inhumate-rti-vue

Inhumate RTI Vue Integration

Vue 3 integration for the Inhumate RTI (RunTime Infrastructure), part of the Inhumate Suite.

See the Inhumate Suite documentation for more in-depth topics and an overview of the software suite.

Installing

npm install --save inhumate-rti-vue

Quick Start

In main.ts:

import rti from "inhumate-rti-vue"
app.use(rti, { application: "Vue RTI App" })

In a component, if using pinia, use the store to access the RTI client:

import { useRtiStore } from "inhumate-rti-vue"
const rti = useRtiStore()
rti.client.subscribeText("hello", (msg) => console.log("Received: ", msg))
rti.client.whenConnected(() => rti.client.publishText("hello", "Hello World!"))

Or, if not using pinia, the RTI client can be injected:

import { inject } from "vue"
const rti = inject("rti-client")
rti.subscribeText("hello", (msg) => console.log("Received: ", msg))
rti.whenConnected(() => rti.publishText("hello", "Hello World!"))

Performance with high message rates

The RTI client is deliberately not reactive (it's marked with markRaw), as it's a busy object with sockets, buffers and handlers that change on every message. Reactive state, like the connection state, time and clients, is available as refs in the store. So:

• Don't wrap the client in reactive() or ref(), and don't keep it in reactive state of your own - use markRaw() if you must.
• Don't watch the whole store (watch(rti, ...)) - that's a deep watch of everything in it. Watch what you use instead, e.g. watch(() => rti.time, ...).

By default, each incoming message is dispatched to its handlers as soon as it arrives. If handlers update reactive state, each message then causes its own Vue update. With hundreds of messages per second, consider buffering messages and dispatching them once per animation frame, so a frame's worth of messages causes a single update:

import { RTI } from "inhumate-rti-vue"
const rti = inject("rti-client")
rti.defaultDispatchMode = RTI.DispatchMode.BUFFERED
const dispatch = () => {
    rti.flushBuffers()
    requestAnimationFrame(dispatch)
}
requestAnimationFrame(dispatch)

Animation frames stop while the page is hidden, so also flush on a timer (and on visibilitychange) if messages may pile up in the background.

Building and running the sandbox app

Dependencies

• Node (version 20 tested)
• Vue 3
• The Javascript client built

Clone the project from GitHub, and in the vue folder:

npm install
npm run build # to build the library
npm start # to run the sandbox app

Feedback & Contributing

Feedback and contributions of any kind are welcome.

• Please file bug reports and/or feature requests as GitHub issues
• Suggest code changes by creating a pull request
• For any other questions, comments or inquiries, get in touch