Gathering detailed insights and metrics for vue3-native-websocket
Installations
npm install vue3-native-websocketDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.0.0
NPM Version
7.10.0
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
2
TypeScript
JavaScript
TypeScript (91.22%)
JavaScript (8.78%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
FrontToEnd
Download Statistics
Total Downloads
571
Last Day
1
Last Week
3
Last Month
15
Last Year
117
GitHub Statistics
1 Stars
30 Commits
1 Branches
1 Contributors
Updated on Apr 29, 2022
Maintainers
1
Package Meta Information
Latest Version
1.0.1
Package Id
vue3-native-websocket@1.0.1
Unpacked Size
774.29 kB
Size
192.00 kB
File Count
14
NPM Version
7.10.0
Node Version
16.0.0
Total Downloads
Cumulative downloads
Total Downloads
571
Last Day
0%
1
Compared to previous day
Last Week
0%
3
Compared to previous week
Last Month
150%
15
Compared to previous month
Last Year
-32%
117
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
21
@commitlint/cli@commitlint/config-angular@typescript-eslint/eslint-plugin@typescript-eslint/parser@vue/cli-plugin-babel@vue/cli-plugin-eslint@vue/cli-plugin-typescript@vue/cli-service@vue/compiler-sfc@vue/eslint-config-prettier@vue/eslint-config-typescriptcommitizencz-conventional-changelogeslinteslint-plugin-prettiereslint-plugin-vuehuskyprettiersasssass-loadertypescript
vue3-native-websocket
仅支持vue3的websocket插件 | Only supports vue3 websocket plugin
English documents please move: README-EN.md
本插件改造自vue-native-websocket-vue3，如果项目使用Vuex，建议使用原插件。
本插件仅做了支持Pinia的兼容处理。
插件安装
1npm install vue3-native-websocket --save
插件使用
如果你的项目启用了TypeScript，则在main.ts文件中导入并使用插件。
没有启用就在main.js中导入并使用。
使用插件时，第二个参数为必填项，是你的websocket服务端连接地址。
1import VueNativeSock from "vue3-native-websocket"; 2 3// 使用VueNativeSock插件，并进行相关配置 4app.use(VueNativeSock,"");
注意：插件依赖于Vuex，你的项目一定要安装vuex才可以使用本插件。vuex的相关配置请查阅文档后面的插件配置项中的内容。
插件配置项
插件提供了一些配置选项，提高了插件的灵活度，能更好的适配开发者的业务需求。
启用Vuex集成
在main.ts | main.js中导入vuex，在使用插件时，第三个参数就是用户可以传配置项，他为一个对象类型，在对象中加入store属性，值为导入的vuex。
1import store from "./store"; 2 3app.use(VueNativeSock,"",{ 4 store: store 5});
如果启用了vuex集成，就需要在其配置文件中定义state以及mutations方法。mutations中定义的方法为websocket的6个监听，你可以在这几个监听中做相应的操作。
1import { createStore } from "vuex"; 2import main from "../main"; 3 4export default createStore({ 5 state: { 6 socket: { 7 // 连接状态 8 isConnected: false, 9 // 消息内容 10 message: "", 11 // 重新连接错误 12 reconnectError: false, 13 // 心跳消息发送时间 14 heartBeatInterval: 50000, 15 // 心跳定时器 16 heartBeatTimer: 0 17 } 18 }, 19 mutations: { 20 // 连接打开 21 SOCKET_ONOPEN(state, event) { 22 main.config.globalProperties.$socket = event.currentTarget; 23 state.socket.isConnected = true; 24 // 连接成功时启动定时发送心跳消息，避免被服务器断开连接 25 state.socket.heartBeatTimer = setInterval(() => { 26 const message = "心跳消息"; 27 state.socket.isConnected && 28 main.config.globalProperties.$socket.sendObj({ 29 code: 200, 30 msg: message 31 }); 32 }, state.socket.heartBeatInterval); 33 }, 34 // 连接关闭 35 SOCKET_ONCLOSE(state, event) { 36 state.socket.isConnected = false; 37 // 连接关闭时停掉心跳消息 38 clearInterval(state.socket.heartBeatTimer); 39 state.socket.heartBeatTimer = 0; 40 console.log("连接已断开: " + new Date()); 41 console.log(event); 42 }, 43 // 发生错误 44 SOCKET_ONERROR(state, event) { 45 console.error(state, event); 46 }, 47 // 收到服务端发送的消息 48 SOCKET_ONMESSAGE(state, message) { 49 state.socket.message = message; 50 }, 51 // 自动重连 52 SOCKET_RECONNECT(state, count) { 53 console.info("消息系统重连中...", state, count); 54 }, 55 // 重连错误 56 SOCKET_RECONNECT_ERROR(state) { 57 state.socket.reconnectError = true; 58 } 59 }, 60 modules: {} 61});
自定义方法名
你也可以自定义mutations中自定义websocket的默认监听事件名。
1// mutation-types.ts 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.ts 19import { createStore } from "vuex"; 20import main from "../main"; 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 30export default createStore({ 31 state: { 32 socket: { 33 isConnected: false, 34 message: '', 35 reconnectError: false, 36 } 37 }, 38 mutations: { 39 [SOCKET_ONOPEN](state, event) { 40 state.socket.isConnected = true 41 }, 42 [SOCKET_ONCLOSE](state, event) { 43 state.socket.isConnected = false 44 }, 45 [SOCKET_ONERROR](state, event) { 46 console.error(state, event) 47 }, 48 // default handler called for all methods 49 [SOCKET_ONMESSAGE](state, message) { 50 state.socket.message = message 51 }, 52 // mutations for reconnect methods 53 [SOCKET_RECONNECT](state, count) { 54 console.info(state, count) 55 }, 56 [SOCKET_RECONNECT_ERROR](state) { 57 state.socket.reconnectError = true; 58 } 59 }, 60 modules: {} 61}); 62 63// index.js 64import store from './store' 65import { 66 SOCKET_ONOPEN, 67 SOCKET_ONCLOSE, 68 SOCKET_ONERROR, 69 SOCKET_ONMESSAGE, 70 SOCKET_RECONNECT, 71 SOCKET_RECONNECT_ERROR 72} from './mutation-types' 73 74const mutations = { 75 SOCKET_ONOPEN, 76 SOCKET_ONCLOSE, 77 SOCKET_ONERROR, 78 SOCKET_ONMESSAGE, 79 SOCKET_RECONNECT, 80 SOCKET_RECONNECT_ERROR 81} 82 83app.use(VueNativeSock,"",{ 84 store: store, 85 mutations: mutations 86});
启用pinia集成
在main.js | main.ts中导入pinia，使用插件传入导入的pinia。
1import { useSocketStoreWithOut } from './useSocketStore'; 2 3const store = useSocketStoreWithOut(); 4 5app.use(VueNativeSock, "", { 6 store: store 7});
还需要在配置文件中定义actions，由于pinia去除了mutations，因此这里的配置与vuex不同。
1import { defineStore } from 'pinia'; 2import { store } from '/@/store'; 3import main from '/@/main'; 4 5interface SocketStore { 6 // 连接状态 7 isConnected: boolean; 8 // 消息内容 9 message: string; 10 // 重新连接错误 11 reconnectError: boolean; 12 // 心跳消息发送时间 13 heartBeatInterval: number; 14 // 心跳定时器 15 heartBeatTimer: number; 16} 17 18export const useSocketStore = defineStore({ 19 id: 'socket', 20 state: (): SocketStore => ({ 21 // 连接状态 22 isConnected: false, 23 // 消息内容 24 message: '', 25 // 重新连接错误 26 reconnectError: false, 27 // 心跳消息发送时间 28 heartBeatInterval: 50000, 29 // 心跳定时器 30 heartBeatTimer: 0, 31 }), 32 actions: { 33 // 连接打开 34 SOCKET_ONOPEN(event) { 35 main.config.globalProperties.$socket = event.currentTarget; 36 this.isConnected = true; 37 // 连接成功时启动定时发送心跳消息，避免被服务器断开连接 38 this.heartBeatTimer = window.setInterval(() => { 39 const message = '心跳消息'; 40 this.isConnected && 41 main.config.globalProperties.$socket.sendObj({ 42 code: 200, 43 msg: message, 44 }); 45 }, this.heartBeatInterval); 46 }, 47 // 连接关闭 48 SOCKET_ONCLOSE(event) { 49 this.isConnected = false; 50 // 连接关闭时停掉心跳消息 51 window.clearInterval(this.heartBeatTimer); 52 this.heartBeatTimer = 0; 53 console.log('连接已断开: ' + new Date()); 54 console.log(event); 55 }, 56 // 发生错误 57 SOCKET_ONERROR(event) { 58 console.error(event); 59 }, 60 // 收到服务端发送的消息 61 SOCKET_ONMESSAGE(message) { 62 this.message = message; 63 }, 64 // 自动重连 65 SOCKET_RECONNECT(count) { 66 console.info('消息系统重连中...', count); 67 }, 68 // 重连错误 69 SOCKET_RECONNECT_ERROR() { 70 this.reconnectError = true; 71 }, 72 }, 73}); 74 75// Need to be used outside the setup 76export function useSocketStoreWithOut() { 77 return useSocketStore(store); 78}
为了方便在组件外面使用pinia，这里额外导出了useSocketStoreWithOut，否则pinia会报错，提示找不到pinia实例。
引入的store代码如下：
1import type { App } from 'vue'; 2import { createPinia } from 'pinia'; 3 4const store = createPinia(); 5 6export function setupStore(app: App<Element>) { 7 app.use(store); 8} 9 10export { store };
其它配置
下述方法，均为插件的可传参数，可以和
store搭配使用
- 设置websocket子协议默，认为空字符串。
1{ 2 "protocol": "my-protocol" 3}
- 启用JSON消息传递，开启后数据发送与接收均采用json作为数据格式。
1{ 2 "format": "json" 3}
如果你没启用JSON消息传递，只能使用
send方法来发送消息.
- 启用自动重连
reconnection,启用时可配置重连次数reconnectionAttempts与重连间隔时长reconnectionDelay
1{ 2 "reconnection": true, 3 "reconnectionAttempts": 5, 4 "reconnectionDelay": 3000 5}
- 手动管理连接
1{ 2 "connectManually": true 3}
启用手动管理连接后，项目启动时则不会自动连接，你可以在项目的特定组件调用连接方法来进行连接。在组件销毁时调用关闭方法来关闭连接。
如果你启用了手动连接，必须要要启用vuex，否则此设置将不会生效。
1 // 连接websocket服务器，参数为websocket服务地址 2 this.$connect(""); 3 // 关闭连接 4 this.$disconnect();
- 自定义socket事件处理
触发vuex里的mutations事件时，你可以选择自己写函数处理，做你想做的事情，在使用插件时传入
passToStoreHandler参数即可，如果你没有传则走默认的处理函数，默认函数的定义如下:
1export default class { 2 /** 3 * 默认的事件处理函数 4 * @param eventName 事件名称 5 * @param event 事件 6 */ 7 defaultPassToStore( 8 eventName: string, 9 event: { 10 data: string; 11 mutation: string; 12 namespace: string; 13 action: string; 14 } 15 ): void { 16 // 事件名称开头不是SOCKET_则终止函数 17 if (!eventName.startsWith("SOCKET_")) { 18 return; 19 } 20 let method = "commit"; 21 // 事件名称字母转大写 22 let target = eventName.toUpperCase(); 23 // 消息内容 24 let msg = event; 25 // data存在且数据为json格式 26 if (this.format === "json" && event.data) { 27 // 将data从json字符串转为json对象 28 msg = JSON.parse(event.data); 29 // 判断msg是同步还是异步 30 if (msg.mutation) { 31 target = [msg.namespace || "", msg.mutation].filter((e: string) => !!e).join("/"); 32 } else if (msg.action) { 33 method = "dispatch"; 34 target = [msg.namespace || "", msg.action].filter((e: string) => !!e).join("/"); 35 } 36 } 37 if (this.mutations) { 38 target = this.mutations[target] || target; 39 } 40 // 触发store中的方法 | Trigger the method in the store 41 if (this.store._p) { 42 // pinia 43 target = eventName.toUpperCase(); 44 this.store[target](msg); 45 } else { 46 // vuex 47 this.store[method](target, msg); 48 } 49 } 50}
当你要自定义一个函数时，这个函数接收3个参数：
- event name 事件名
- event 事件
- 默认事件处理，这使你可以选择将事件移交给原始处理程序之前进行一些基本的预处理
下面是一个例子
1app.use(VueNativeSock, "", { 2 passToStoreHandler: function (eventName, event, next) { 3 event.data = event.should_have_been_named_data 4 next(eventName, event) 5 } 6})
在组件中使用
做完上述配置后，就可以在组件中使用了，如下所示为发送数据的例子。
1export default defineComponent({ 2 methods: { 3 clickButton: function(val) { 4 // 调用send方法，以字符串形式发送数据 5 this.$socket.send('some data'); 6 // 如果fomat配置为了json，即可调用sendObj方法来发送数据 7 this.$socket.sendObj({ awesome: 'data'} ); 8 } 9 } 10})
注意：
sendObj方法必须在你启用JSON消息传递时才可以使用，不然只能使用send方法。
消息监听，即接收websocket服务端推送的消息，如下所示为消息监听的示例代码。
1// optionsAPI用法 2this.$options.sockets.onmessage = (res: { data: string }) => { 3 console.log(data); 4} 5 6// CompositionAPI用法 7import { getCurrentInstance } from "vue"; 8const { proxy } = getCurrentInstance() as ComponentInternalInstance; 9proxy.$socket.onmessage = (res: { 10 data: string; 11}) => { 12 console.log(data); 13}
发送消息，向服务端推送消息
1// optionsAPI用法 2this.$socket.sendObj({msg: '消息内容'}); 3 4// compositionAPI写法 5const internalInstance = data.currentInstance; 6internalInstance?.proxy.$socket.sendObj({ 7 msg: "消息内容" 8});
compositionAPI写法由于在setup中无法拿到vue实例，因此需要在页面挂载后将实例存储到全局对象中，用的时候再将实例取出来。详细使用方法可以参考我的chat-system中的写法：InitData.ts#L91 、EventMonitoring.ts#L50 、SendMessage.ts#L73 、contact-list.vue#L620
移除消息监听
1delete this.$options.sockets.onmessage
写在最后
至此，插件的所有使用方法就介绍完了。
想进一步了解插件源码的请移步项目的GitHub仓库：vue-native-websocket-vue3
Vue2版本请移步原插件：vue-native-websocket
No vulnerabilities found.
No security vulnerabilities found.