快捷導(dǎo)航

vue使用socket與服務(wù)端進(jìn)行通信的代碼詳解

更新時(shí)間：2023年09月24日 10:35:10 作者：謹(jǐn)言的鼠貓

這篇文章主要給大家介紹了vue如何使用socket與服務(wù)端進(jìn)行通信的相關(guān)資料,在Vue中我們可以將Websocket類封裝成一個(gè)Vue插件,以便全局使用,需要的朋友可以參考下

1、定義socket

var ws = new WebSocket('wss://地址');

2、進(jìn)行連接，同時(shí)每5秒鐘發(fā)送心跳一次

ws.onopen = () => {
  console.log('@open');
  // params為與服務(wù)端定義好的參數(shù)
  ws.send(JSON.stringify(params));
  this.sendTimmer = setInterval(function () {
    ws.send('Hi Server!');
  }, 5000);
};

3、獲取服務(wù)端發(fā)送來的信息，進(jìn)行處理

ws.onmessage = (event) => {
  console.log('@message:', event);
  try {
      const data = JSON.parse(event.data);
      if (data.end) {
        //約定的單條消息傳遞結(jié)束
      } else {
          // 進(jìn)行數(shù)據(jù)處理
      }
  } catch (err) {
      // 數(shù)據(jù)錯(cuò)誤處理
      ws.close();
      console.error(err);
  }
  if (event.data == '[DONE]') {
      // 消息傳遞結(jié)束
      this.sendTimmer && clearInterval(this.sendTimmer);
      ws.close();
  }
};

4、關(guān)閉socket

ws.onclose = (event) => {
  console.log('@close:', event);
  this.sendTimmer && clearInterval(this.sendTimmer);
  ws.close();
};

5、判斷socket發(fā)送錯(cuò)誤

ws.onerror = (event) => {
  console.error('error:', event);
  // 進(jìn)行錯(cuò)誤類型判斷，展示不同信息
  ws.close();
};

到此這篇關(guān)于vue使用socket與服務(wù)端進(jìn)行通信的代碼詳解的文章就介紹到這了,更多相關(guān)vue socket服務(wù)端通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue?table?甘特圖vxe-gantt?實(shí)現(xiàn)多個(gè)表格的任務(wù)互相拖拽數(shù)據(jù)功能
vxe-gantt支持多表格任務(wù)跨表拖拽,通過設(shè)置row-drag-config.isCrossTableDrag啟用功能,需確保數(shù)據(jù)主鍵不重復(fù)且指定keyField字段,該方案適用于需要多表數(shù)據(jù)聯(lián)動(dòng)的場(chǎng)景,實(shí)現(xiàn)方式簡(jiǎn)潔高效,感興趣的朋友跟隨小編一起看看吧
2025-09-09
vue.js如何處理數(shù)組對(duì)象中某個(gè)字段是否變?yōu)閮蓚€(gè)字段
這篇文章主要介紹了vue.js如何處理數(shù)組對(duì)象中某個(gè)字段是否變?yōu)閮蓚€(gè)字段方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-03-03
在vant 中使用cell組件定義圖標(biāo)該圖片和位置操作
這篇文章主要介紹了在vant 中使用cell組件定義圖標(biāo)該圖片和位置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
React組件通信之路由傳參(react-router-dom)
本文主要介紹了React組件通信之路由傳參(react-router-dom)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
Vue3之元素和組件的動(dòng)畫切換實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了Vue3之元素和組件的動(dòng)畫切換實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
前端vue3使用SSE、EventSource攜帶請(qǐng)求頭實(shí)例代碼
這篇文章主要介紹了前端vue3使用SSE、EventSource攜帶請(qǐng)求頭的相關(guān)資料,SSE是基于HTTP的服務(wù)器向客戶端推送數(shù)據(jù)技術(shù),實(shí)現(xiàn)單向?qū)崟r(shí)通信,輕量級(jí)且支持跨域、自動(dòng)重連,文中將實(shí)現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下
2025-06-06
Vue項(xiàng)目如何開啟gzip
這篇文章主要介紹了Vue項(xiàng)目如何開啟gzip的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-06-06
Vue組件化開發(fā)的必備技能之組件遞歸
組件是可以在它們自己的模板中調(diào)用自身的,不過它們只能通過?name?選項(xiàng)來做這件事,下面這篇文章主要給大家介紹了關(guān)于Vue組件化開發(fā)的必備技能之組件遞歸的相關(guān)資料,需要的朋友可以參考下
2022-01-01
vue3組件的v-model:value與v-model的區(qū)別解析
在Vue3中,v-model和v-model:value都是用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定的語法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認(rèn)行為、靈活性、多模型綁定和使用場(chǎng)景,感興趣的朋友一起看看吧
2025-02-02
vue實(shí)現(xiàn)iview表格添加篩選功能的示例代碼
本文主要介紹了vue實(shí)現(xiàn)iview表格添加篩選功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07