vue3+ts+Vuex中使用websocket协议方式(vuex 3)

这篇文章主要介绍了vue3+ts+Vuex中使用websocket协议方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教 目录

推荐整理分享vue3+ts+Vuex中使用websocket协议方式(vuex 3)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vuex 使用,vue vuex使用,vue3.0 使用vuex,vue3 + ts,vue3.0 使用vuex,vue +ts,vue +ts,vue3 + ts,内容如对您有帮助，希望把文章链接给更多的朋友！

vue3+ts+Vuex使用websocket协议在stroe中vue3中vue封装websocket封装的socket.js文件内容使用方法vue3+ts+Vuex使用websocket协议

本文作者使用的是ts+vue3的setup语法糖，大家注意使用的vue版本！

在stroe中import { createStore } from 'vuex'import { stateInt } from '../interface/storeInterface'const state: stateInt = {  //推送消息  data: {},  webSocket: null,}export default createStore({  state,  mutations: {    //websocket初始化    initWebsocket(state) {      state.webSocket = new WebSocket(          // 此处填写你要连接的ws地址        'ws://127.0.0.1:3000/socket/' + Math.random()      )      //建立连接      state.webSocket.onopen = function () {        /*         * 连接成功         * */        console.log('通讯开始')        // 发送心跳防止ws协议自动断联        setInterval(() => {          state.webSocket.send('1')        }, 1000 * 60)      }      //接收服务端消息      state.webSocket.onmessage = function (e) {        /*         * 收到消息时回调函数         * */        console.log('收到的数据：', e.data)        // 如果数据对象为字符串，可转换为对象格式        let data = JSON.parse(e.data)        state.data = e.data        console.log(data)      }      state.webSocket.onerror = function () {        /*         * 通讯异常         * */        console.log('通讯异常')      }      state.webSocket.close = function () {        /*         * 关闭连接时回调函数         * */        console.log('连接已断开')      }    },  },  actions: {  },  modules: {},})

/interface/storeInterface 文件下的interface接口

export interface stateInt {  data: Object  webSocket: WebSocket}vue3中

在App.vue中，语法糖格式下

<script lang="ts" setup>    import { onBeforeMount } from 'vue'    import { useStore } from 'vuex'    /**     * 仓库     */    const store = useStore()    //websocket初始化    const initSocket = () => {      store.commit('initWebsocket')    }        onBeforeMount(() => {      //console.log('2.组件挂载页面之前执行----onBeforeMount')      initSocket()    })</script>vue封装websocket

项目中需要使用websocke，这个是我自己修修改改好多次之后用得最顺手的一版，分享一下。

这个封装需要搭配vuex使用，因为收到的数据都保存在vuex中了，真的绝绝子好用，解决了我一大堆问题。

如果需要可以搭配上心跳、websocke重连。

话说，vuex的使用也有好多坑，在踩坑的路上狂奔，下次再写vuex的

封装的socket.js文件内容var websock = null;var global_callback = null;var serverPort = "80"; // webSocket连接端口var wsuri = "ws://" + window.location.hostname + ":" + serverPort;function createWebSocket(callback) {if (websock == null || typeof websock !== WebSocket) {initWebSocket(callback);}}function initWebSocket(callback) {global_callback = callback;// 初始化websocketwebsock = new WebSocket(wsuri);websock.onmessage = function (e) {websocketonmessage(e);};websock.onclose = function (e) {websocketclose(e);};websock.onopen = function () {websocketOpen();};// 连接发生错误的回调方法websock.onerror = function () {console.log("WebSocket连接发生错误");//createWebSocket();啊，发现这样写会创建多个连接，加延时也不行};}// 实际调用的方法function sendSock(agentData ) {if (websock.readyState === websock.OPEN) {// 若是ws开启状态websocketsend(agentData);} else if (websock.readyState === websock.CONNECTING) {// 若是 正在开启状态，则等待1s后重新调用setTimeout(function () {sendSock(agentData);}, 1000);} else {// 若未开启 ，则等待1s后重新调用setTimeout(function () {sendSock(agentData);}, 1000);}}function closeSock() {websock.close();}// 数据接收function websocketonmessage(msg) {// console.log("收到数据："+JSON.parse(e.data));// console.log("收到数据："+msg);// global_callback(JSON.parse(msg.data));// 收到信息为Blob类型时let result = null;// debuggerif (msg.data instanceof Blob) {const reader = new FileReader();reader.readAsText(msg.data, "UTF-8");reader.onload = (e) => {result = JSON.parse(reader.result);//console.log("websocket收到", result);global_callback(result);};} else {result = JSON.parse(msg.data);//console.log("websocket收到", result);global_callback(result);}}// 数据发送function websocketsend(agentData) {console.log("发送数据：" + agentData);websock.send(agentData);}// 关闭function websocketclose(e) {console.log("connection closed (" + e.code + ")");}function websocketOpen(e) {console.log("连接打开");}export { sendSock, createWebSocket, closeSock };

封装的websocke暴露三个接口

sendSock用于发送数据createWebSocket用于创建连接、对收到的数据进行处理closeSock 用于关闭连接使用方法

先看目录

1、建立连接

建立好socket.js文件之后就可以开始使用了，因为我的登录是用axios的，只有登录成功（进入主页之后才建立websocke连接），所以我把连接写在了Home.vue的文件中。

第一步：导入文件

import { sendSock, createWebSocket, closeSock } from "@/api/socket";

第二步：初始化时建立websocket连接

created() {    this.init();    ......  },  methods: {    init() {      createWebSocket(this.global_callback);      ......    },     // websocket的回调函数，msg表示收到的消息    global_callback(msg) {      console.log("websocket的回调函数收到服务器信息：" + JSON.stringify(msg));      // console.log("收到服务器信息：" + msg);           switch (msg.operate) {//        case "autoIndex":          this.$store.dispatch("setAutoIndex", msg);          break;        case "allChannelSwitch":          this.$store.dispatch("setAllChannelSwitch", msg);          break;        case "singleChannelSwitch":          this.$store.dispatch("setSingleChannelSwitch", msg);          break;        case "sceneSelect":          this.$store.dispatch("setSceneSelect", msg);          break;          ......      }    },  },

msg.operate是用于判断收到通信数据

this.$store.dispatch()是用于异步修改vuex保存的数据的函数。

界面中通信数据收到后都保存在vuex中，需要该数据的地方就从vuex中获取

2、发送数据

第一步：导入文件

import { sendSock } from "@/api/socket";

第二步：发送数据

 var sendData = {        operate:"singleChannelSwitch",        index:index+1,        opera:row.button_relay      };      sendSock(JSON.stringify(sendData));

3、关闭连接

第一步：导入文件

import { closeSock} from "@/api/socket";

第二步：关闭连接

closeSock();

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。