vue3+ts+Vuex中使用websocket協(xié)議方式
更新時間：2022年10月10日 14:12:48 作者：玲小叮當(dāng)
這篇文章主要介紹了vue3+ts+Vuex中使用websocket協(xié)議方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue3+ts+Vuex使用websocket協(xié)議
本文作者使用的是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('通訊開始')
? ? ? ? // 發(fā)送心跳防止ws協(xié)議自動斷聯(lián)
? ? ? ? setInterval(() => {
? ? ? ? ? state.webSocket.send('1')
? ? ? ? }, 1000 * 60)
? ? ? }
? ? ? //接收服務(wù)端消息
? ? ? state.webSocket.onmessage = function (e) {
? ? ? ? /*
? ? ? ? ?* 收到消息時回調(diào)函數(shù)
? ? ? ? ?* */
? ? ? ? console.log('收到的數(shù)據(jù)：', e.data)
? ? ? ? // 如果數(shù)據(jù)對象為字符串，可轉(zhuǎn)換為對象格式
? ? ? ? let data = JSON.parse(e.data)
? ? ? ? state.data = e.data
? ? ? ? console.log(data)
? ? ? }
? ? ? state.webSocket.onerror = function () {
? ? ? ? /*
? ? ? ? ?* 通訊異常
? ? ? ? ?* */
? ? ? ? console.log('通訊異常')
? ? ? }
? ? ? state.webSocket.close = function () {
? ? ? ? /*
? ? ? ? ?* 關(guān)閉連接時回調(diào)函數(shù)
? ? ? ? ?* */
? ? ? ? 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.組件掛載頁面之前執(zhí)行----onBeforeMount')
?? ? ?initSocket()
?? ?})
</script>vue封裝websocket
項目中需要使用websocke，這個是我自己修修改改好多次之后用得最順手的一版，分享一下。
這個封裝需要搭配vuex使用，因為收到的數(shù)據(jù)都保存在vuex中了，真的絕絕子好用，解決了我一大堆問題。
如果需要可以搭配上心跳、websocke重連。
話說，vuex的使用也有好多坑，在踩坑的路上狂奔，下次再寫vuex的
封裝的socket.js文件內(nèi)容
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();
};
// 連接發(fā)生錯誤的回調(diào)方法
websock.onerror = function () {
console.log("WebSocket連接發(fā)生錯誤");
//createWebSocket();啊，發(fā)現(xiàn)這樣寫會創(chuàng)建多個連接，加延時也不行
};
}
// 實際調(diào)用的方法
function sendSock(agentData ) {
if (websock.readyState === websock.OPEN) {
// 若是ws開啟狀態(tài)
websocketsend(agentData);
} else if (websock.readyState === websock.CONNECTING) {
// 若是 正在開啟狀態(tài)，則等待1s后重新調(diào)用
setTimeout(function () {
sendSock(agentData);
}, 1000);
} else {
// 若未開啟 ，則等待1s后重新調(diào)用
setTimeout(function () {
sendSock(agentData);
}, 1000);
}
}
function closeSock() {
websock.close();
}
// 數(shù)據(jù)接收
function websocketonmessage(msg) {
// console.log("收到數(shù)據(jù)："+JSON.parse(e.data));
// console.log("收到數(shù)據(jù)："+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);
}
}
// 數(shù)據(jù)發(fā)送
function websocketsend(agentData) {
console.log("發(fā)送數(shù)據(jù)：" + agentData);
websock.send(agentData);
}
// 關(guān)閉
function websocketclose(e) {
console.log("connection closed (" + e.code + ")");
}
function websocketOpen(e) {
console.log("連接打開");
}
export { sendSock, createWebSocket, closeSock };
封裝的websocke暴露三個接口
sendSock用于發(fā)送數(shù)據(jù)createWebSocket用于創(chuàng)建連接、對收到的數(shù)據(jù)進行處理closeSock用于關(guān)閉連接
使用方法
先看目錄
1、建立連接
建立好socket.js文件之后就可以開始使用了，因為我的登錄是用axios的，只有登錄成功（進入主頁之后才建立websocke連接），所以我把連接寫在了Home.vue的文件中。
第一步：導(dǎo)入文件
import { sendSock, createWebSocket, closeSock } from "@/api/socket";第二步：初始化時建立websocket連接
created() {
? ? this.init();
? ? ......
? },
? methods: {
? ? init() {
? ? ? createWebSocket(this.global_callback);
? ? ? ......
? ? },
?
? ? // websocket的回調(diào)函數(shù)，msg表示收到的消息
? ? global_callback(msg) {
? ? ? console.log("websocket的回調(diào)函數(shù)收到服務(wù)器信息：" + JSON.stringify(msg));
? ? ? // console.log("收到服務(wù)器信息：" + 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是用于判斷收到通信數(shù)據(jù)
this.$store.dispatch()是用于異步修改vuex保存的數(shù)據(jù)的函數(shù)。
界面中通信數(shù)據(jù)收到后都保存在vuex中，需要該數(shù)據(jù)的地方就從vuex中獲取
2、發(fā)送數(shù)據(jù)
第一步：導(dǎo)入文件
import { sendSock } from "@/api/socket";第二步：發(fā)送數(shù)據(jù)
?var sendData = {
? ? ? ? operate:"singleChannelSwitch",
? ? ? ? index:index+1,
? ? ? ? opera:row.button_relay
? ? ? };
? ? ? sendSock(JSON.stringify(sendData));3、關(guān)閉連接
第一步：導(dǎo)入文件
import { closeSock} from "@/api/socket";第二步：關(guān)閉連接
closeSock();
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中marker被識別點擊的過程場景分析,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了vue this.$toast()用法 ，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本文主要介紹了常見路由跳轉(zhuǎn)的幾種方式，主要介紹了四種常見方式，具有一定的參考價值，感興趣的可以了解一下2023-09-09
下面小編就為大家分享一篇Vue-路由導(dǎo)航菜單欄的高亮設(shè)置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue之監(jiān)聽方法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
Vue判斷字符串(或數(shù)組)中是否包含某個元素的多種方法
在我們前端日常開發(fā)中經(jīng)常會遇到判斷一個字符串中是否包含某個元素的需求,下面這篇文章主要給大家介紹了關(guān)于Vue判斷字符串(或數(shù)組)中是否包含某個元素的多種方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了解決vue過濾器filters獲取不到this對象的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了vue中的循環(huán)遍歷對象、數(shù)組和字符串，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3使用Vuex之mapState與mapGetters詳解
這篇文章主要為大家介紹了Vue3使用Vuex之mapState與mapGetters詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
防抖（Debounce）在前端開發(fā)中是一種常用的技術(shù),它的作用是限制某個操作在短時間內(nèi)的頻繁觸發(fā),下面我們就來看看如何一個Vue指令搞定函數(shù)防抖吧2024-02-02