vue-native-websocket-vue3 ·

插件安装

yarn add vue-native-websocket-vue3# ornpm install vue-native-websocket-vue3 --save

插件使用

importVueNativeSockfrom"vue-native-websocket-vue3";// 使用VueNativeSock插件，并进行相关配置app.use(VueNativeSock,"");

插件配置项

启用Vuex集成

importstorefrom"./store";app.use(VueNativeSock,"",{store:store});

import{createStore}from"vuex";importmainfrom"../main";exportdefaultcreateStore({state:{socket:{// 连接状态isConnected:false,// 消息内容message:"",// 重新连接错误reconnectError:false,// 心跳消息发送时间heartBeatInterval:50000,// 心跳定时器heartBeatTimer:0}},mutations:{// 连接打开SOCKET_ONOPEN(state,event){main.config.globalProperties.$socket=event.currentTarget;state.socket.isConnected=true;// 连接成功时启动定时发送心跳消息，避免被服务器断开连接state.socket.heartBeatTimer=setInterval(()=>{constmessage="心跳消息";state.socket.isConnected&&main.config.globalProperties.$socket.sendObj({code:200,msg:message});},state.socket.heartBeatInterval);},// 连接关闭SOCKET_ONCLOSE(state,event){state.socket.isConnected=false;// 连接关闭时停掉心跳消息clearInterval(state.socket.heartBeatTimer);state.socket.heartBeatTimer=0;console.log("连接已断开: "+newDate());console.log(event);},// 发生错误SOCKET_ONERROR(state,event){console.error(state,event);},// 收到服务端发送的消息SOCKET_ONMESSAGE(state,message){state.socket.message=message;},// 自动重连SOCKET_RECONNECT(state,count){console.info("消息系统重连中...",state,count);},// 重连错误SOCKET_RECONNECT_ERROR(state){state.socket.reconnectError=true;}},modules:{}});

自定义方法名

// mutation-types.tsconstSOCKET_ONOPEN='✅ Socket connected!'constSOCKET_ONCLOSE='❌ Socket disconnected!'constSOCKET_ONERROR='❌ Socket Error!!!'constSOCKET_ONMESSAGE='Websocket message received'constSOCKET_RECONNECT='Websocket reconnected'constSOCKET_RECONNECT_ERROR='Websocket is having issues reconnecting..'export{SOCKET_ONOPEN,SOCKET_ONCLOSE,SOCKET_ONERROR,SOCKET_ONMESSAGE,SOCKET_RECONNECT,SOCKET_RECONNECT_ERROR}// store.tsimport{createStore}from"vuex";importmainfrom"../main";import{SOCKET_ONOPEN,SOCKET_ONCLOSE,SOCKET_ONERROR,SOCKET_ONMESSAGE,SOCKET_RECONNECT,SOCKET_RECONNECT_ERROR}from"./mutation-types"exportdefaultcreateStore({state:{socket:{isConnected:false,message:'',reconnectError:false,}},mutations:{[SOCKET_ONOPEN](state,event){state.socket.isConnected=true},[SOCKET_ONCLOSE](state,event){state.socket.isConnected=false},[SOCKET_ONERROR](state,event){console.error(state,event)},// default handler called for all methods[SOCKET_ONMESSAGE](state,message){state.socket.message=message},// mutations for reconnect methods[SOCKET_RECONNECT](state,count){console.info(state,count)},[SOCKET_RECONNECT_ERROR](state){state.socket.reconnectError=true;}},modules:{}});// main.tsimportstorefrom'./store'import{SOCKET_ONOPEN,SOCKET_ONCLOSE,SOCKET_ONERROR,SOCKET_ONMESSAGE,SOCKET_RECONNECT,SOCKET_RECONNECT_ERROR}from'./mutation-types'constmutations={SOCKET_ONOPEN,SOCKET_ONCLOSE,SOCKET_ONERROR,SOCKET_ONMESSAGE,SOCKET_RECONNECT,SOCKET_RECONNECT_ERROR}app.use(VueNativeSock,"",{store:store,mutations:mutations});

启用pinia集成

// useSocketStore为pinia的socket配置文件import{useSocketStoreWithOut}from'./useSocketStore';conststore=useSocketStoreWithOut();app.use(VueNativeSock,"",{store:store});

import{defineStore}from'pinia';import{store}from'/@/store';importmainfrom'/@/main';interfaceSocketStore{// 连接状态isConnected:boolean;// 消息内容message:string;// 重新连接错误reconnectError:boolean;// 心跳消息发送时间heartBeatInterval:number;// 心跳定时器heartBeatTimer:number;}exportconstuseSocketStore=defineStore({id:'socket',state:():SocketStore=>({// 连接状态isConnected:false,// 消息内容message:'',// 重新连接错误reconnectError:false,// 心跳消息发送时间heartBeatInterval:50000,// 心跳定时器heartBeatTimer:0,}),actions:{// 连接打开SOCKET_ONOPEN(event){main.config.globalProperties.$socket=event.currentTarget;this.isConnected=true;// 连接成功时启动定时发送心跳消息，避免被服务器断开连接this.heartBeatTimer=window.setInterval(()=>{constmessage='心跳消息';this.isConnected&&main.config.globalProperties.$socket.sendObj({code:200,msg:message,});},this.heartBeatInterval);},// 连接关闭SOCKET_ONCLOSE(event){this.isConnected=false;// 连接关闭时停掉心跳消息window.clearInterval(this.heartBeatTimer);this.heartBeatTimer=0;console.log('连接已断开: '+newDate());console.log(event);},// 发生错误SOCKET_ONERROR(event){console.error(event);},// 收到服务端发送的消息SOCKET_ONMESSAGE(message){this.message=message;},// 自动重连SOCKET_RECONNECT(count){console.info('消息系统重连中...',count);},// 重连错误SOCKET_RECONNECT_ERROR(){this.reconnectError=true;},},});// Need to be used outside the setupexportfunctionuseSocketStoreWithOut(){returnuseSocketStore(store);}

importtype{App}from'vue';import{createPinia}from'pinia';conststore=createPinia();exportfunctionsetupStore(app:App<Element>){app.use(store);}export{store};

其它配置

{"protocol":"my-protocol"}

{"format":"json"}

{"reconnection":true,"reconnectionAttempts":5,"reconnectionDelay":3000}

{"connectManually":true}

// 连接websocket服务器，参数为websocket服务地址this.$connect("");// 关闭连接this.$disconnect();// CompositionAPIproxy.$connect("");proxy.$disconnect("");

exportdefaultclass{/**     * 默认的事件处理函数     *@param eventName 事件名称     *@param event 事件     */defaultPassToStore(eventName:string,event:{data:string;mutation:string;namespace:string;action:string;}):void{// 事件名称开头不是SOCKET_则终止函数if(!eventName.startsWith("SOCKET_")){return;}letmethod="commit";// 事件名称字母转大写lettarget=eventName.toUpperCase();// 消息内容letmsg=event;// data存在且数据为json格式if(this.format==="json"&&event.data){// 将data从json字符串转为json对象msg=JSON.parse(event.data);// 判断msg是同步还是异步if(msg.mutation){target=[msg.namespace||"",msg.mutation].filter((e:string)=>!!e).join("/");}elseif(msg.action){method="dispatch";target=[msg.namespace||"",msg.action].filter((e:string)=>!!e).join("/");}}if(this.mutations){target=this.mutations[target]||target;}// 触发store中的方法 | Trigger the method in the storeif(this.store._p){// piniatarget=eventName.toUpperCase();this.store[target](msg);}else{// vuexthis.store[method](target,msg);}}}

app.use(VueNativeSock,"",{passToStoreHandler:function(eventName,event,next){event.data=event.should_have_been_named_datanext(eventName,event)}})

插件暴露的函数

在组件中使用

exportdefaultdefineComponent({methods:{clickButton:function(val){// 调用send方法，以字符串形式发送数据this.$socket.send('some data');// 如果fomat配置为了json，即可调用sendObj方法来发送数据this.$socket.sendObj({awesome:'data'});}}})

// optionsAPI用法this.$options.sockets.onmessage=(res:{data:string})=>{console.log(data);}// CompositionAPI用法import{getCurrentInstance}from"vue";const{ proxy}=getCurrentInstance()asComponentInternalInstance;proxy.$socket.onmessage=(res:{data:string;})=>{console.log(data);}

// optionsAPI用法this.$socket.sendObj({msg:'消息内容'});// compositionAPI写法constinternalInstance=data.currentInstance;internalInstance?.proxy.$socket.sendObj({msg:"消息内容"});

deletethis.$options.sockets.onmessage// compositionAPI写法deleteproxy.$socket.onmessage

写在最后