Registry / messaging / vue-websocket-next

vue-websocket-next

library0.2.7jsnpmunverified

A socket.io plugin for Vue.js 2 that provides WebSocket integration via $socket on Vue instances and a socket option in components. Version 0.2.7 is the latest stable release with infrequent updates. It requires socket.io-client as a peer dependency and works by registering the plugin with Vue.use. Differentiates from newer libraries by targeting Vue 2 with Vue 3 support as a planned future version (2.x line only).

messaging

npm install vue-websocket-next

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-WEBSOCKET-NEXT

vue-websocket-next

messagingjavascriptv0.2.7

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import VueWebsocket from 'vue-websocket-next'

CommonJS require: const VueWebsocket = require('vue-websocket-next').default

$socket

✓ this.$socket

✗ Vue.prototype.$socket

Access via component instance after plugin registration. Not directly on Vue.

socket option

✓ export default { socket: { events: { ... } } }

✗ export default { sockets: { ... } }

The option is named 'socket', not 'sockets'. Inside it, use 'events' to register listeners.

Registers the plugin with Vue 2 and socket.io-client, then uses $socket to emit and socket events to listen.

import Vue from 'vue'; import VueWebsocket from 'vue-websocket-next'; import IO from 'socket.io-client'; Vue.use(VueWebsocket, IO, 'http://localhost:3000', { reconnection: true }); new Vue({ el: '#app', template: '<div>{{ message }}</div>', data: { message: '' }, socket: { events: { message(data) { this.message = data.text; }, connect() { console.log('Connected'); }, disconnect() { console.log('Disconnected'); } } }, mounted() { this.$socket.emit('join', { room: 'chat' }); } });

Debug

Known issues

breakingThe package name changed from 'vue-websocket' to 'vue-websocket-next'. If you were using the old package, update your import.

fix

Install vue-websocket-next instead of vue-websocket, and update imports accordingly.

affects: <0.1.0

deprecatedThis plugin is only compatible with Vue 2. Vue 3 is not supported.

fix

For Vue 3, consider using vue-socketio-extended or native socket.io-client with Composition API.

affects: >=0.0.0

gotchaThe socket.io-client instance must be passed as the second argument to Vue.use. Omitting it causes runtime errors.

fix

Always pass the IO import as the second argument: Vue.use(VueWebsocket, IO);

affects: >=0.0.0

gotchaEvent names in the socket.events object are matched literally. If your server emits events with namespaces or prefixes, you must set the prefix or namespace option in the socket object.

fix

Use socket.prefix or socket.namespace in the component socket option to adjust event names.

affects: >=0.0.0

gotchaThe package does not handle reconnection automatically unless you pass reconnection options via socket.io-client options when registering.

fix

Pass reconnection: true (or other options) as the fourth argument to Vue.use.

affects: >=0.0.0

Errors

Common errors & fixes

TypeError: Cannot read property 'emit' of undefined

The plugin was not properly registered with Vue.use, or the $socket property is accessed before connection.

fix

Ensure Vue.use(VueWebsocket, IO) is called before creating the Vue instance. Check that socket.io-client is correctly imported.

Uncaught ReferenceError: io is not defined

The socket.io-client library is not imported or not passed as an argument to Vue.use.

fix

Install socket.io-client (npm install socket.io-client) and import it: import IO from 'socket.io-client'; then pass IO to Vue.use.

Websocket error! (and no further details)

socket.io-client connection error. Could be wrong URL or server not running.

fix

Check the server URL and ensure socket.io server is running. Add error handler in socket.events to log more details.

Vue.use is not a function

Vue is not imported correctly or you are using Vue 3, which does not have Vue.use.

fix

This plugin only works with Vue 2. Ensure you are using vue@2.x. For Vue 3, use a different plugin.

Upgrade

Version history

0.2.7latest on npm

Audit

Dependencies

socket.io-clientrequiredThis is a first argument passed to Vue.use as the socket.io client instance.

Agent activity

23 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/cgwire/vue-websocket-next ↗

packagevue-websocket-next ↗

homepagehttps://github.com/cgwire/vue-websocket-next ↗