{"id":19626108,"url":"https://github.com/deepsourcecorp/nuxt-websocket","last_synced_at":"2026-03-05T16:03:45.390Z","repository":{"id":43151372,"uuid":"451448194","full_name":"DeepSourceCorp/nuxt-websocket","owner":"DeepSourceCorp","description":"A tiny Nuxt.js module for WebSocket interactions","archived":false,"fork":false,"pushed_at":"2025-02-05T07:48:07.000Z","size":278,"stargazers_count":26,"open_issues_count":3,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-20T12:01:55.791Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DeepSourceCorp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-01-24T12:05:45.000Z","updated_at":"2025-08-25T17:03:12.000Z","dependencies_parsed_at":"2024-06-21T13:11:30.041Z","dependency_job_id":"dac5ce50-c1fc-452a-ac66-9166435f569b","html_url":"https://github.com/DeepSourceCorp/nuxt-websocket","commit_stats":null,"previous_names":["deepsourcelabs/nuxt-websocket"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/DeepSourceCorp/nuxt-websocket","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeepSourceCorp%2Fnuxt-websocket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeepSourceCorp%2Fnuxt-websocket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeepSourceCorp%2Fnuxt-websocket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeepSourceCorp%2Fnuxt-websocket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DeepSourceCorp","download_url":"https://codeload.github.com/DeepSourceCorp/nuxt-websocket/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeepSourceCorp%2Fnuxt-websocket/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30134578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T15:35:27.018Z","status":"ssl_error","status_checked_at":"2026-03-05T15:35:23.768Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T11:44:59.066Z","updated_at":"2026-03-05T16:03:45.368Z","avatar_url":"https://github.com/DeepSourceCorp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n  \n  \u003ch1\u003e@deepsource/nuxt-websocket\u003c/h1\u003e\n\n[![DeepSource](https://deepsource.io/gh/deepsourcelabs/nuxt-websocket.svg/?label=active+issues\u0026show_trend=true\u0026token=aDA1Tz2a_4FxFsxvu4by_loF)](https://deepsource.io/gh/deepsourcelabs/nuxt-websocket/?ref=repository-badge) [![DeepSource](https://deepsource.io/gh/deepsourcelabs/nuxt-websocket.svg/?label=resolved+issues\u0026show_trend=true\u0026token=aDA1Tz2a_4FxFsxvu4by_loF)](https://deepsource.io/gh/deepsourcelabs/nuxt-websocket/?ref=repository-badge)\n\n  \u003cp\u003eA tiny Nuxt.js module for WebSocket interactions.\u003c/p\u003e\n\n\u003c/div\u003e\n\n\u003e This module is only compatible with Nuxt v2 at the moment.\n\n## Setup\n\n1. Add `@deepsource/nuxt-websocket` dependency to your project.\n\n```bash\nyarn add @deepsource/nuxt-websocket # or npm install @deepsource/nuxt-websocket\n```\n\n2. Add `@deepsource/nuxt-websocket` to the `modules` section of `nuxt.config.js`.\n\n```js\n{\n  modules: [\n    '@deepsource/nuxt-websocket',\n  ],\n  websocket: {\n    // module options\n  }\n}\n```\n\n### TypeScript\n\nAdd the types to your `types` array in `tsconfig.json` after the `@nuxt/types` (Nuxt 2.9.0+) entry.\n\n```json\n{\n  \"compilerOptions\": {\n    \"types\": [\"@nuxt/types\", \"@deepsource/nuxt-websocket\"]\n  }\n}\n```\n\n## Options\n\nYou can pass different options using the `websocket` property in your `nuxt.config.js`.\n\n```js\n// nuxt.config.js\nexport default {\n  websocket: {\n    url: 'wss://echo.websocket.events/'\n    reconnectInterval: 1000\n  }\n};\n```\n\n| Parameter           | Default | Description                                                                                                    |\n| ------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |\n| `url`               | -       | WebSocket URL to connect                                                                                       |\n| `reconnectInterval` | 1000    | The time interval after which a reconnection attempt takes place for a close event. It should be less than 3s. |\n\n### Runtime Config\n\nYou can also provide the URL via [runtime config](https://nuxtjs.org/docs/configuration-glossary/configuration-runtime-config/). It always takes precedence over the URL provided via options.\n\n```js\n// nuxt.config.js\nexport default {\n  // Via Runtime config\n  publicRuntimeConfig: {\n    websocket: {\n      url: process.env.WEBSOCKET_URL\n    }\n  }\n};\n```\n\n## API\n\nThe following two plugins are injected into the Vue instance and are accessible across the app:-\n\n- `$socket` - [Vue](https://v2.vuejs.org/v2/api/#Instance-Methods-Events) instance.\n- `$socketManager` - [WebSocketManager](https://github.com/deepsourcelabs/nuxt-websocket/blob/docs/update-info/src/templates/WebSocketManager.ts) instance.\n\n### `$socket`\n\nIt's a Vue instance that's used as an event bus.\n\n```js\nmounted() {\n  this.$socket.$on('socket', (data) =\u003e {\n    console.log(`got ${data} from WebSocket`);\n  });\n}\n\nbeforeDestroy() {\n  this.$socket.$off('socket');\n}\n```\n\nPlease refer to the [official documentation](https://v2.vuejs.org/v2/api/#Instance-Methods-Events) for the supported instance methods/events.\n\n### `$socketManager`\n\nThe WebSocketManager instance has access to the following methods:-\n\n#### `connect(): void`\n\nEstablishes WebSocket connection. It defines handlers for message, close and error events.\n\n```js\nthis.$socketManager.connect();\n```\n\n\u003e Invoked by the WebSocketManager class [constructor function](https://github.com/deepsourcelabs/nuxt-websocket/blob/docs/update-info/src/templates/WebSocketManager.ts#L14).\n\n#### `ready(): Promise\u003cvoid\u003e`\n\nReturns a promise that resolves straightaway if the WebSocket connection is open. Or else, waits until the open event is fired.\n\n```js\nawait this.$socketManager.ready();\n```\n\n\u003e Invoked by the [send](https://github.com/deepsourcelabs/nuxt-websocket/blob/docs/update-info/src/templates/WebSocketManager.ts#L52-L53) method.\n\n#### `send (message: string | Record\u003cstring, unknown\u003e): Promise\u003cvoid\u003e`\n\nWaits for the WebSocket connection to be open if not already and transmits the data received.\n\n```js\nawait this.$socketManager.send({ event: \"socket\", data: \"Hello world\" });\n```\n\n#### `close(code?: number | undefined, reason?: string | undefined): void`\n\nCloses the WebSocket connection, optionally using code as the the WebSocket connection close code and reason as the the WebSocket connection close reason.\n\n```js\nthis.$socketManager.close();\n```\n\n\u003e The [message event handler](https://github.com/deepsourcelabs/nuxt-websocket/blob/main/src/templates/WebSocketManager.ts#L39-L46) expects data received from the server as either a string or an object of the shape `{ event: string, data: string }`.\n\n```js\n// Data received of the type string.\n// Emits an event by the name `message`.\nthis.$socket.$on(\"message\", () =\u003e {});\n\n// Data received as an object.\n// Emits an event based on the value for the 'event' key.\n// { event: \"socket\", data: \"Hello world\" }\nthis.$socket.$on(\"socket\", () =\u003e {});\n```\n\n\u003e The [close event handler](https://github.com/deepsourcelabs/nuxt-websocket/blob/main/src/templates/WebSocketManager.ts#L48-L64) attempts reconnection for a close event that is not normal ([connection close code](https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent/code) other than 1000).\n\n## Development\n\n1. Clone this repository.\n2. Install dependencies using `yarn install`.\n3. Start development server using `yarn dev`.\n\n## License\n\n[MIT License](https://github.com/deepsourcelabs/nuxt-websocket/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepsourcecorp%2Fnuxt-websocket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeepsourcecorp%2Fnuxt-websocket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeepsourcecorp%2Fnuxt-websocket/lists"}