Gathering detailed insights and metrics for vue-native-websocket
Installations
npm install vue-native-websocketDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
14.15.5
NPM Version
6.14.11
Score
81.2
Supply Chain
100
Quality
78.3
Maintenance
100
Vulnerability
100
License
Releases
12
Contributors
29
Unable to fetch Contributors
Languages
1
JavaScript
JavaScript (100%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
nathantsoi
Download Statistics
Total Downloads
2,291,884
Last Day
1,314
Last Week
6,196
Last Month
27,916
Last Year
316,590
GitHub Statistics
941 Stars
168 Commits
162 Forks
22 Watchers
7 Branches
29 Contributors
Updated on Mar 07, 2025
Bundle Size
6.07 kB
Minified
2.00 kB
Minified + Gzipped
Maintainers
2
Package Meta Information
Latest Version
2.0.15
Package Id
vue-native-websocket@2.0.15
Size
126.25 kB
NPM Version
6.14.11
Node Version
14.15.5
Published on
Aug 02, 2021
Total Downloads
Cumulative downloads
Total Downloads
2,291,884
Last Day
23.4%
1,314
Compared to previous day
Last Week
10.8%
6,196
Compared to previous week
Last Month
7.1%
27,916
Compared to previous month
Last Year
-9%
316,590
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
27
babel-clibabel-eslintbabel-loaderbabel-preset-es2015chaieslinteslint-config-standardeslint-plugin-importeslint-plugin-nodeeslint-plugin-promiseeslint-plugin-standardexports-loaderkarmakarma-chrome-launcherkarma-coveragekarma-mochakarma-sinon-chaikarma-sourcemap-loaderkarma-spec-reporterkarma-webpackmochamock-socketscript-loadersinonsinon-chaivuewebpack
vue-native-websocket · 
native websocket implementation for Vuejs 2 and Vuex
Install
1yarn add vue-native-websocket 2 3# or 4 5npm install vue-native-websocket --save
Usage
Configuration
Automatic socket connection from an URL string
1import VueNativeSock from 'vue-native-websocket' 2Vue.use(VueNativeSock, 'ws://localhost:9090')
Enable Vuex integration, where './store' is your local apps store:
1import store from './store' 2Vue.use(VueNativeSock, 'ws://localhost:9090', { store: store })
Set sub-protocol, this is optional option and default is empty string.
1import VueNativeSock from 'vue-native-websocket' 2Vue.use(VueNativeSock, 'ws://localhost:9090', { protocol: 'my-protocol' })
Optionally enable JSON message passing:
1Vue.use(VueNativeSock, 'ws://localhost:9090', { format: 'json' })
JSON message passing with a store:
1import store from './store' 2Vue.use(VueNativeSock, 'ws://localhost:9090', { store: store, format: 'json' })
Enable ws reconnect automatically:
1Vue.use(VueNativeSock, 'ws://localhost:9090', { 2 reconnection: true, // (Boolean) whether to reconnect automatically (false) 3 reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity), 4 reconnectionDelay: 3000, // (Number) how long to initially wait before attempting a new (1000) 5})
Manage connection manually:
1Vue.use(VueNativeSock, 'ws://localhost:9090', {
2 connectManually: true,
3})
4const vm = new Vue()
5// Connect to the websocket target specified in the configuration
6vm.$connect()
7// Connect to an alternative websocket URL and Options e.g.
8vm.$connect('ws://localhost:9090/alternative/connection/', { format: 'json' })
9// do stuff with WebSockets
10vm.$disconnect()On Vuejs instance usage
1var vm = new Vue({ 2 methods: { 3 clickButton: function(val) { 4 // $socket is [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) instance 5 this.$socket.send('some data') 6 // or with {format: 'json'} enabled 7 this.$socket.sendObj({awesome: 'data'}) 8 } 9 } 10})
Dynamic socket event listeners
Create a new listener, for example:
1this.$options.sockets.onmessage = (data) => console.log(data)
Remove existing listener
1delete this.$options.sockets.onmessage
Vuex Store integration
Vuex integration works differently depending on if you've enabled a format
Without a format enabled
Socket events will commit mutations on the root store corresponding to the following events
SOCKET_ONOPEN
SOCKET_ONCLOSE
SOCKET_ONERROR
SOCKET_ONMESSAGE
Each callback is passed the raw websocket event object
Update state in the open, close and error callbacks. You can also check the socket state directly with the this.$socket object on the main Vue object.
Handle all the data in the SOCKET_ONMESSAGE mutation.
Reconect events will commit mutations SOCKET_RECONNECT and SOCKET_RECONNECT_ERROR.
1import Vue from 'vue' 2import Vuex from 'vuex' 3 4Vue.use(Vuex); 5 6export default new Vuex.Store({ 7 state: { 8 socket: { 9 isConnected: false, 10 message: '', 11 reconnectError: false, 12 } 13 }, 14 mutations:{ 15 SOCKET_ONOPEN (state, event) { 16 Vue.prototype.$socket = event.currentTarget 17 state.socket.isConnected = true 18 }, 19 SOCKET_ONCLOSE (state, event) { 20 state.socket.isConnected = false 21 }, 22 SOCKET_ONERROR (state, event) { 23 console.error(state, event) 24 }, 25 // default handler called for all methods 26 SOCKET_ONMESSAGE (state, message) { 27 state.socket.message = message 28 }, 29 // mutations for reconnect methods 30 SOCKET_RECONNECT(state, count) { 31 console.info(state, count) 32 }, 33 SOCKET_RECONNECT_ERROR(state) { 34 state.socket.reconnectError = true; 35 }, 36 }, 37 actions: { 38 sendMessage: function(context, message) { 39 ..... 40 Vue.prototype.$socket.send(message) 41 ..... 42 } 43 } 44})
With custom mutation names
1// mutation-types.js 2const SOCKET_ONOPEN = '✅ Socket connected!' 3const SOCKET_ONCLOSE = '❌ Socket disconnected!' 4const SOCKET_ONERROR = '❌ Socket Error!!!' 5const SOCKET_ONMESSAGE = 'Websocket message received' 6const SOCKET_RECONNECT = 'Websocket reconnected' 7const SOCKET_RECONNECT_ERROR = 'Websocket is having issues reconnecting..' 8 9export { 10 SOCKET_ONOPEN, 11 SOCKET_ONCLOSE, 12 SOCKET_ONERROR, 13 SOCKET_ONMESSAGE, 14 SOCKET_RECONNECT, 15 SOCKET_RECONNECT_ERROR 16} 17 18// store.js 19import Vue from 'vue' 20import Vuex from 'vuex' 21import { 22 SOCKET_ONOPEN, 23 SOCKET_ONCLOSE, 24 SOCKET_ONERROR, 25 SOCKET_ONMESSAGE, 26 SOCKET_RECONNECT, 27 SOCKET_RECONNECT_ERROR 28} from './mutation-types' 29 30Vue.use(Vuex); 31 32export default new Vuex.Store({ 33 state: { 34 socket: { 35 isConnected: false, 36 message: '', 37 reconnectError: false, 38 } 39 }, 40 mutations: { 41 [SOCKET_ONOPEN](state, event) { 42 state.socket.isConnected = true 43 }, 44 [SOCKET_ONCLOSE](state, event) { 45 state.socket.isConnected = false 46 }, 47 [SOCKET_ONERROR](state, event) { 48 console.error(state, event) 49 }, 50 // default handler called for all methods 51 [SOCKET_ONMESSAGE](state, message) { 52 state.socket.message = message 53 }, 54 // mutations for reconnect methods 55 [SOCKET_RECONNECT](state, count) { 56 console.info(state, count) 57 }, 58 [SOCKET_RECONNECT_ERROR](state) { 59 state.socket.reconnectError = true; 60 } 61 } 62}) 63 64// index.js 65import store from './store' 66import { 67 SOCKET_ONOPEN, 68 SOCKET_ONCLOSE, 69 SOCKET_ONERROR, 70 SOCKET_ONMESSAGE, 71 SOCKET_RECONNECT, 72 SOCKET_RECONNECT_ERROR 73} from './mutation-types' 74 75const mutations = { 76 SOCKET_ONOPEN, 77 SOCKET_ONCLOSE, 78 SOCKET_ONERROR, 79 SOCKET_ONMESSAGE, 80 SOCKET_RECONNECT, 81 SOCKET_RECONNECT_ERROR 82} 83 84Vue.use(VueNativeSock, 'ws://localhost:9090', { 85 store: store, 86 mutations: mutations 87})
With format: 'json' enabled
All data passed through the websocket is expected to be JSON.
Each message is JSON.parsed if there is a data (content) response.
If there is no data, the fallback SOCKET_ON* mutation is called with the original event data, as above.
If there is a .namespace on the data, the message is sent to this namespaced: true store (be sure to turn this on in the store module).
If there is a .mutation value in the response data, the corresponding mutation is called with the name SOCKET_[mutation value]
If there is an .action value in the response data ie. action: 'customerAdded', the corresponding action is called by name:
1actions: { 2 customerAdded (context) { 3 console.log('action received: customerAdded') 4 } 5 }
Use the .sendObj({some: data}) method on the $socket object to send stringified json messages.
Custom socket event handling
Provide you own custom code to handle events received via the passToStoreHandler option. The function you provide will be passed the following arguments:
- event name
- event
- original/default handler code function
function (eventName, event). This allows you to optionally do some basic preprocessing before handing the event over to the original handler.
The original passToStore code is used if no passToStoreHandler is configured.
Here is an example of passing in a custom handler. This has the original passToStore code to give you an example of what you can do:
1Vue.use(VueNativeSock, 'ws://localhost:9090', { 2 passToStoreHandler: function (eventName, event) { 3 if (!eventName.startsWith('SOCKET_')) { return } 4 let method = 'commit' 5 let target = eventName.toUpperCase() 6 let msg = event 7 if (this.format === 'json' && event.data) { 8 msg = JSON.parse(event.data) 9 if (msg.mutation) { 10 target = [msg.namespace || '', msg.mutation].filter((e) => !!e).join('/') 11 } else if (msg.action) { 12 method = 'dispatch' 13 target = [msg.namespace || '', msg.action].filter((e) => !!e).join('/') 14 } 15 } 16 this.store[method](target, msg) 17 } 18})
Here is an example of do some preprocessing, then pass the event onto the original handler code:
1Vue.use(VueNativeSock, 'ws://localhost:9090', { 2 passToStoreHandler: function (eventName, event, next) { 3 event.data = event.should_have_been_named_data 4 next(eventName, event) 5 } 6})
Examples
TODO: post your example here!
Credits
Derived from https://github.com/MetinSeylan/Vue-Socket.io
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
8 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
Reason
Found 4/23 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 11 are checked with a SAST tool
Score
1.7
/10
Last Scanned on 2025-03-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More