vue3+ts+Vuex中使用websocket协议方式
作者:玲小叮当
这篇文章主要介绍了vue3+ts+Vuex中使用websocket协议方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
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; // 初始化websocket websock = 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; // debugger if (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();
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。