@deepsource/nuxt-websocket
A tiny Nuxt.js module for WebSocket interactions.
This module is only compatible with Nuxt v2 at the moment.
Setup
- Add
@deepsource/nuxt-websocketdependency to your project.
yarn add @deepsource/nuxt-websocket # or npm install @deepsource/nuxt-websocket
- Add
@deepsource/nuxt-websocketto themodulessection ofnuxt.config.js.
{
modules: [
'@deepsource/nuxt-websocket',
],
websocket: {
// module options
}
}
TypeScript
Add the types to your types array in tsconfig.json after the @nuxt/types (Nuxt 2.9.0+) entry.
{
"compilerOptions": {
"types": ["@nuxt/types", "@deepsource/nuxt-websocket"]
}
}
Options
You can pass different options using the websocket property in your nuxt.config.js.
// nuxt.config.js
export default {
websocket: {
url: 'wss://echo.websocket.events/'
reconnectInterval: 1000
}
};
| Parameter | Default | Description |
|---|---|---|
url |
- | WebSocket URL to connect |
reconnectInterval |
1000 | The time interval after which a reconnection attempt takes place for a close event. It should be less than 3s. |
Runtime Config
You can also provide the URL via runtime config. It always takes precedence over the URL provided via options.
// nuxt.config.js
export default {
// Via Runtime config
publicRuntimeConfig: {
websocket: {
url: process.env.WEBSOCKET_URL
}
}
};
API
The following two plugins are injected into the Vue instance and are accessible across the app:-
$socket- Vue instance.$socketManager- WebSocketManager instance.
$socket
It's a Vue instance that's used as an event bus.
mounted() {
this.$socket.$on('socket', (data) => {
console.log(`got ${data} from WebSocket`);
});
}
beforeDestroy() {
this.$socket.off('socket');
}
Please refer to the official documentation for the supported instance methods/events.
$socketManager
The WebSocketManager instance has access to the following methods:-
connect(): void
Establishes WebSocket connection. It defines handlers for message, close and error events.
this.$socketManager.connect();
Invoked by the WebSocketManager class constructor function.
ready(): Promise<void>
Returns a promise that resolves straightaway if the WebSocket connection is open. Or else, waits until the open event is fired.
await this.$socketManager.ready();
Invoked by the send method.
send (message: string | Record<string, unknown>): Promise<void>
Waits for the WebSocket connection to be open if not already and transmits the data received.
await this.$socketManager.send({ event: "socket", data: "Hello world" });
close(code?: number | undefined, reason?: string | undefined): void
Closes the WebSocket connection, optionally using code as the the WebSocket connection close code and reason as the the WebSocket connection close reason.
this.$socketManager.close();
The message event handler expects data received from the server as either a string or an object of the shape
{ event: string, data: string }.
// Data received of the type string.
// Emits an event by the name `message`.
this.$socket.on("message", () => {});
// Data received as an object.
// Emits an event based on the value for the 'event' key.
// { event: "socket", data: "Hello world" }
this.$socket.on("socket", () => {});
The close event handler attempts reconnection for a close event that is not normal (connection close code other than 1000).
Development
- Clone this repository.
- Install dependencies using
yarn install. - Start development server using
yarn dev.
3.6k Dec 30, 2022
2.1k Dec 29, 2022
19.2k Jan 4, 2023
588 Dec 23, 2022
70 Dec 23, 2022
2.4k Jan 2, 2023
24 Sep 6, 2022
21 Dec 28, 2022
4 Jul 14, 2022
13 Oct 7, 2022
12 Dec 3, 2022
7 May 5, 2023
14 Sep 7, 2022
4 Sep 13, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
180 Jan 5, 2023
719 Dec 13, 2022