vue使用socket與服務端進行通信的代碼詳解
更新時間：2023年09月24日 10:35:10 作者：謹言的鼠貓
這篇文章主要給大家介紹了vue如何使用socket與服務端進行通信的相關資料,在Vue中我們可以將Websocket類封裝成一個Vue插件,以便全局使用,需要的朋友可以參考下
1、定義socket
var ws = new WebSocket('wss://地址');2、進行連接，同時每5秒鐘發(fā)送心跳一次
ws.onopen = () => {
console.log('@open');
// params為與服務端定義好的參數(shù)
ws.send(JSON.stringify(params));
this.sendTimmer = setInterval(function () {
ws.send('Hi Server!');
}, 5000);
};3、獲取服務端發(fā)送來的信息，進行處理
ws.onmessage = (event) => {
console.log('@message:', event);
try {
const data = JSON.parse(event.data);
if (data.end) {
//約定的單條消息傳遞結束
} else {
// 進行數(shù)據(jù)處理
}
} catch (err) {
// 數(shù)據(jù)錯誤處理
ws.close();
console.error(err);
}
if (event.data == '[DONE]') {
// 消息傳遞結束
this.sendTimmer && clearInterval(this.sendTimmer);
ws.close();
}
};4、關閉socket
ws.onclose = (event) => {
console.log('@close:', event);
this.sendTimmer && clearInterval(this.sendTimmer);
ws.close();
};5、判斷socket發(fā)送錯誤
ws.onerror = (event) => {
console.error('error:', event);
// 進行錯誤類型判斷，展示不同信息
ws.close();
};到此這篇關于vue使用socket與服務端進行通信的代碼詳解的文章就介紹到這了,更多相關vue socket服務端通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue?table?甘特圖vxe-gantt?實現(xiàn)多個表格的任務互相拖拽數(shù)據(jù)功能
vxe-gantt支持多表格任務跨表拖拽,通過設置row-drag-config.isCrossTableDrag啟用功能,需確保數(shù)據(jù)主鍵不重復且指定keyField字段,該方案適用于需要多表數(shù)據(jù)聯(lián)動的場景,實現(xiàn)方式簡潔高效,感興趣的朋友跟隨小編一起看看吧2025-09-09
vue.js如何處理數(shù)組對象中某個字段是否變?yōu)閮蓚€字段
這篇文章主要介紹了vue.js如何處理數(shù)組對象中某個字段是否變?yōu)閮蓚€字段方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了在vant 中使用cell組件 定義圖標該圖片和位置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
React組件通信之路由傳參(react-router-dom)
本文主要介紹了React組件通信之路由傳參(react-router-dom)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家介紹了Vue3之元素和組件的動畫切換實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
前端vue3使用SSE、EventSource攜帶請求頭實例代碼
這篇文章主要介紹了前端vue3使用SSE、EventSource攜帶請求頭的相關資料,SSE是基于HTTP的服務器向客戶端推送數(shù)據(jù)技術,實現(xiàn)單向實時通信,輕量級且支持跨域、自動重連,文中將實現(xiàn)的方法介紹的非常詳細,需要的朋友可以參考下2025-06-06
這篇文章主要介紹了Vue項目如何開啟gzip的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
組件是可以在它們自己的模板中調用自身的,不過它們只能通過?name?選項來做這件事,下面這篇文章主要給大家介紹了關于Vue組件化開發(fā)的必備技能之組件遞歸的相關資料,需要的朋友可以參考下2022-01-01
vue3組件的v-model:value與v-model的區(qū)別解析
在Vue3中,v-model和v-model:value都是用于實現(xiàn)雙向數(shù)據(jù)綁定的語法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認行為、靈活性、多模型綁定和使用場景,感興趣的朋友一起看看吧2025-02-02
本文主要介紹了vue實現(xiàn)iview表格添加篩選功能的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07