### Install Vue SignalR Package

Source: https://github.com/quangdaon/vue-signalr/wiki/01. Installation

Installs the @quangdao/vue-signalr package using npm. This is the first step to integrate SignalR functionality into your Vue 3 project.

```bash
npm install --save @quangdao/vue-signalr
```

--------------------------------

### Configure prebuild hook for SignalR HubConnectionBuilder in Vue

Source: https://github.com/quangdaon/vue-signalr/wiki/02.-Configuration

This example demonstrates how to use the `prebuild` option in Vue SignalR to access and configure the `HubConnectionBuilder`. This allows for advanced customization of the SignalR connection, such as setting logging levels.

```typescript
app.use(VueSignalR, {
  /* ... */
  prebuild(builder: HubConnectionBuilder) {
    builder.configureLogging(LogLevel.Information);
  }
});
```

--------------------------------

### Configure accessTokenFactory directly with Vue SignalR

Source: https://github.com/quangdaon/vue-signalr/wiki/02.-Configuration

This example shows how to configure the `accessTokenFactory` option for Vue SignalR by directly returning an access token string. This is used to provide authentication credentials to the SignalR hub.

```typescript
app.use(VueSignalR, {
  /* ... */
  accessTokenFactory: () => '<my-access-token>'
});
```

--------------------------------

### Programmatic Unsubscription from SignalR Events

Source: https://github.com/quangdaon/vue-signalr/wiki/03. Usage

Provides an example of manually unsubscribing from a SignalR event using `signalr.off` within the `onBeforeUnmount` lifecycle hook. This is useful when automatic unsubscription is disabled or for specific control.

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

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

--------------------------------

### Inject SignalR Service in Vue

Source: https://github.com/quangdaon/vue-signalr/wiki/03. Usage

Demonstrates how to inject the SignalR service using the `useSignalR` composable function within a Vue component's setup method. This is the primary way to access SignalR functionalities.

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

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

--------------------------------

### Configure Vue 3 App with SignalR

Source: https://github.com/quangdaon/vue-signalr/wiki/01. Installation

Sets up the Vue 3 application to use the VueSignalR plugin. It requires the SignalR server URL and mounts the application.

```typescript
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');
```

--------------------------------

### Invoke SignalR Command With Response

Source: https://github.com/quangdaon/vue-signalr/wiki/03. Usage

Shows how to invoke a SignalR command using the `invoke` method, which waits for a response from the server. The response can then be processed using a Promise.

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

--------------------------------

### Receive SignalR Messages with Tokens

Source: https://github.com/quangdaon/vue-signalr/wiki/03. Usage

Shows how to subscribe to SignalR events using predefined tokens for type safety. The callback function receives typed message objects, enabling IntelliSense and compile-time checks.

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

--------------------------------

### Configure accessTokenFactory with async function in Vue SignalR

Source: https://github.com/quangdaon/vue-signalr/wiki/02.-Configuration

This snippet illustrates using an asynchronous function for the `accessTokenFactory` in Vue SignalR, allowing for token retrieval via a promise or async/await. This is useful for fetching tokens from an authentication service.

```typescript
app.use(VueSignalR, {
  /* ... */
  accessTokenFactory: async () => await authService.getAccessToken()
});
```

--------------------------------

### Use Vue SignalR Composable for Hub Interaction

Source: https://github.com/quangdaon/vue-signalr/blob/main/README.md

Demonstrates how to use the `useSignalR` composable function within a Vue 3 component to interact with SignalR hubs. It allows listening to events, sending messages, and invoking hub methods with payloads.

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

interface MyObject {
  prop: string;
}

// Optional Tokens
// Learn More: https://github.com/quangdaon/vue-signalr/wiki/03.-Usage#tokens
const SendMessage: HubCommandToken<MyObject> = 'SendMessage';
const MessageReceived: HubEventToken<MyObject> = 'MessageReceived';

export default {
  setup() {
    // Inject the service
    const signalr = useSignalR();

    // Listen to the "MessageReceived" event
    signalr.on(MessageReceived, () => doSomething());

    // Send a "SendMessage" payload to the hub
    signalr.send(SendMessage, { prop: 'Hello world!' });

    // Invoke "SendMessage" and wait for a response
    signalr.invoke(SendMessage, { prop: 'Hello world!' })
      .then(() => doSomething())
  }
};
```

--------------------------------

### Receive SignalR Messages as Strings

Source: https://github.com/quangdaon/vue-signalr/wiki/03. Usage

Illustrates receiving SignalR messages using string names for events, with an option to provide a type argument for the data. This method is less type-safe but offers flexibility.

```typescript
// 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));
```

--------------------------------

### Configure disconnected callback with Vue SignalR

Source: https://github.com/quangdaon/vue-signalr/wiki/02.-Configuration

This snippet demonstrates how to configure the `disconnected` callback when initializing the Vue SignalR plugin. This callback is executed when the SignalR connection is lost or fails to establish, and can be used for actions like redirecting the user.

```typescript
app.use(VueSignalR, {
  /* ... */
  disconnected() {
    router.push('/disconnected');
  }
});
```

--------------------------------

### Declare Type-Safe SignalR Tokens

Source: https://github.com/quangdaon/vue-signalr/wiki/03. Usage

Explains how to declare constant tokens for SignalR commands and events to enhance type safety. This approach improves code maintainability and reduces potential runtime errors by providing clear types for messages.

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

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

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

--------------------------------

### Manually control event unsubscription with signalr.on

Source: https://github.com/quangdaon/vue-signalr/wiki/02.-Configuration

This code shows how to manually control automatic unsubscription for SignalR events using the `signalr.on` method. Passing `true` ensures unsubscription when a component is destroyed, while `false` prevents it.

```typescript
// Unsubscribes
signalr.on(MessageReceived, messageReceivedCallback, true);

// Does not unsubscribe
signalr.on(MessageReceived, messageReceivedCallback, false);
```

--------------------------------

### Listen to SignalR Connection Close Event

Source: https://github.com/quangdaon/vue-signalr/wiki/03. Usage

Illustrates how to attach an event listener to the global SignalR connection object to handle the 'close' event. Note that this listener is not automatically unbound when a component is destroyed.

```typescript
setup() {
  const signalr = useSignalR();
  signalr.connection.onclose(() => customCallback());
}
```

--------------------------------

### Send SignalR Message Without Response

Source: https://github.com/quangdaon/vue-signalr/wiki/03. Usage

Demonstrates sending a SignalR message to the server using the `send` method, which does not wait for a response. This is suitable for fire-and-forget operations.

```typescript
signalr.send(SendMessage, { prop: 'value' });
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.