vs

@quangdao/vue-signalr

SignalR plugin for Vue

Showing:

Popularity

Downloads/wk

132

GitHub Stars

8

Maintenance

Last Commit

24d ago

Contributors

2

Package

Dependencies

0

License

ISC

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

Vue SignalR Plugin

NPM Install

This plugin has only been tested with Vue 3 and TypeScript. Use at your own risk.

Installation

To install in Vue 3:

import { createApp } from 'vue';
import { VueSignalR } from '@quangdao/vue-signalr';
import App from './App.vue';

createApp(App)
  .use(VueSignalR, { url: 'http://localhost:5000/signalr' })
  .mount('#app');

Configuration

The plugin accept a configuration object with the following values:

PropertyRequiredDescription
urlYesThe address to your SignalR server
disconnectedNoCallback to call when the connection is severed
automaticReconnectNoWhether to enable automatic reconnections

Usage

This plugin provides a composable function to inject the SignalR service:

import { inject } from 'vue';
import { useSignalR } from '@quangdao/vue-signalr';

export default {
  setup() {
    const signalr = useSignalR();
  }
};

Tokens

For type safety, I recommend declaring constant tokens. As an example:

import { MyObject } from '@/models/my-object';
import { HubCommandToken, HubEventToken } from '@quangdao/vue-signalr';

const SendMessage: HubCommandToken<MyObject> = 'SendMessage';
const MessageReceived: HubEventToken<MyObject> = 'MessageReceived';

// models/my-object.ts
interface MyObject {
  prop: string;
}

Note: In version 0.0.6, SignalRClientMethod and SignalRServerMethod were renamed to HubEventToken and HubCommandToken, respectively. The original names are exported as aliases for compatibility reasons, but will be removed in a final release. Please make sure to update these accordingly if you are upgrading from 0.0.5.

Receiving Messages

If you used tokens mentioned above:

setup() {
  signalr.on(MessageReceived, (message) => console.log(message.prop));
}

Alternative, you can pass in the method name as a string, with an optional type argument for the data:

// Both of these work:
signalr.on('MessageReceived', message => console.log(message.prop)); // Data object is untyped
signalr.on<MyObject>('MessageReceived', message => console.log(message.prop));

Unsubscribing

Eventually, I want to automatically unbind all subscription within the context of a component when that component is destroyed, but for now I recommend unsubscribing from all of your connections onBeforeUnmount.

Same rules regarding tokens above apply here.

setup() {
  const messageReceivedCallback = (message) => console.log(message.prop);

  signalr.on(MessageReceived, messageReceivedCallback);
  onBeforeUnmount(() => signalr.off(MessageReceived, messageReceivedCallback));
}

Sending Message

To send a message to the server, you can either invoke a command if you are expecting a response, or send a command without waiting for an acknowledgement. Same rules regarding tokens above apply to both methods.

signalr.send(SendMessage, { prop: 'value' });
signalr.invoke(SendMessage, { prop: 'value' }).then(response => doSomethingWith(response));

Error Handling

Errors are handled at the app level by passing in a property to the options object. I used a redirect here, but you can probably get creative with some fancy state management or something.

import { createApp } from 'vue';
import { VueSignalR } from '@quangdao/vue-signalr';
import router from './router';
import App from './App.vue';

createApp(App)
  .use(VueSignalR, {
    url: 'http://localhost:5000/signalr',
    disconnected() {
      router.push('/disconnected');
    }
  })
  .mount('#app');

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100