vue3+ts+Vuex中使用websocket協(xié)議方式
更新時(shí)間：2022年10月10日 14:12:48 作者：玲小叮當(dāng)
這篇文章主要介紹了vue3+ts+Vuex中使用websocket協(xié)議方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue3+ts+Vuex使用websocket協(xié)議
本文作者使用的是ts+vue3的setup語(yǔ)法糖，大家注意使用的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é)議自動(dòng)斷聯(lián)
? ? ? ? setInterval(() => {
? ? ? ? ? state.webSocket.send('1')
? ? ? ? }, 1000 * 60)
? ? ? }
? ? ? //接收服務(wù)端消息
? ? ? state.webSocket.onmessage = function (e) {
? ? ? ? /*
? ? ? ? ?* 收到消息時(shí)回調(diào)函數(shù)
? ? ? ? ?* */
? ? ? ? console.log('收到的數(shù)據(jù)：', e.data)
? ? ? ? // 如果數(shù)據(jù)對(duì)象為字符串，可轉(zhuǎn)換為對(duì)象格式
? ? ? ? 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)閉連接時(shí)回調(diào)函數(shù)
? ? ? ? ?* */
? ? ? ? console.log('連接已斷開')
? ? ? }
? ? },
? },
? actions: {
? },
? modules: {},
})/interface/storeInterface 文件下的interface接口
export interface stateInt {
? data: Object
? webSocket: WebSocket
}vue3中
在App.vue中，語(yǔ)法糖格式下
<script lang="ts" setup>
?? ?import { onBeforeMount } from 'vue'
?? ?import { useStore } from 'vuex'
?? ?/**
?? ? * 倉(cāng)庫(kù)
?? ? */
?? ?const store = useStore()
?? ?//websocket初始化
?? ?const initSocket = () => {
?? ? ?store.commit('initWebsocket')
?? ?}
?? ?
?? ?onBeforeMount(() => {
?? ? ?//console.log('2.組件掛載頁(yè)面之前執(zhí)行----onBeforeMount')
?? ? ?initSocket()
?? ?})
</script>vue封裝websocket
項(xiàng)目中需要使用websocke，這個(gè)是我自己修修改改好多次之后用得最順手的一版，分享一下。
這個(gè)封裝需要搭配vuex使用，因?yàn)槭盏降臄?shù)據(jù)都保存在vuex中了，真的絕絕子好用，解決了我一大堆問題。
如果需要可以搭配上心跳、websocke重連。
話說(shuō)，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ā)生錯(cuò)誤的回調(diào)方法
websock.onerror = function () {
console.log("WebSocket連接發(fā)生錯(cuò)誤");
//createWebSocket();啊，發(fā)現(xiàn)這樣寫會(huì)創(chuàng)建多個(gè)連接，加延時(shí)也不行
};
}
// 實(shí)際調(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類型時(shí)
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暴露三個(gè)接口
sendSock用于發(fā)送數(shù)據(jù)createWebSocket用于創(chuàng)建連接、對(duì)收到的數(shù)據(jù)進(jìn)行處理closeSock用于關(guān)閉連接
使用方法
先看目錄
1、建立連接
建立好socket.js文件之后就可以開始使用了，因?yàn)槲业牡卿浭怯胊xios的，只有登錄成功（進(jìn)入主頁(yè)之后才建立websocke連接），所以我把連接寫在了Home.vue的文件中。
第一步：導(dǎo)入文件
import { sendSock, createWebSocket, closeSock } from "@/api/socket";第二步：初始化時(shí)建立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();
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue解決彈出蒙層滑動(dòng)穿透問題的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09
關(guān)于axios配置多個(gè)請(qǐng)求地址(打包后可通過配置文件修改)
這篇文章主要介紹了關(guān)于axios配置多個(gè)請(qǐng)求地址(打包后可通過配置文件修改)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
淺談webpack編譯vue項(xiàng)目生成的代碼探索
本篇文章主要介紹了淺談webpack編譯vue項(xiàng)目生成的代碼探索，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了vue組件間傳值的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要介紹了vue中引入路徑@的用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3使用富文本框(wangeditor)的方法總結(jié)
項(xiàng)目中用到了富文本,選來(lái)選去選擇了wangeditor,下面這篇文章主要給大家介紹了關(guān)于Vue3使用富文本框(wangeditor)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問題
這篇文章主要介紹了vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)
當(dāng)我們遇到定位展示的時(shí)候會(huì)出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關(guān)于前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue3在history模式下如何通過vite打包部署白屏問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
最近在學(xué)習(xí)Three.js相關(guān)的技術(shù),恰逢Vue 3.0正式版也已推出,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目中使用three.js的操作步驟,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01