實(shí)時(shí)通信Socket?io的使用示例詳解
引言
最近在工作中，遇到了一個(gè)需求，需要和后臺(tái)服務(wù)實(shí)時(shí)通信，獲取各種設(shè)備的實(shí)時(shí)狀態(tài)、以及對(duì)設(shè)備下發(fā)指令。后端這邊選擇了socket.io這個(gè)庫(kù)，前端這邊配合也只能使用這個(gè)，它的使用方式跟websocket很類似，為此簡(jiǎn)單記錄一下socket.io的使用，希望幫助到有需要的人。
1、什么是socket.io
Socket.IO 是一個(gè)庫(kù)，可以在客戶端和服務(wù)器之間實(shí)現(xiàn) 低延遲, 雙向 和 基于事件的 通信。
它建立在 WebSocket 協(xié)議之上，并提供額外的保證，例如回退到 HTTP 長(zhǎng)輪詢或自動(dòng)重新連接。
2、socket.io的使用
1、安裝引入
npm install socket.io-client
import { io } from "socket.io-client";
2、初始化
const socket = io("https://server-domain.com");
3、使用
socket鏈接成功以后，我們繼續(xù)接下來(lái)的操作，了解各個(gè)事件的使用。
socket.on("connect", () => {
//監(jiān)聽連接是否成功
console.log("鏈接成功");
});
socket.on("disconnect", (reason) => {
//監(jiān)聽連接異常中斷
console.log("中斷", reason);
});
socket.on("message_event", (data) => {
console.log("接收到的消息", data);
})
// 此處需要注意的是on是一個(gè)監(jiān)聽事件，監(jiān)聽的message_event是和后臺(tái)約定好的事件名。
前端主動(dòng)斷開鏈接
socket.close()或者 socket.disconnect()
4、消息的發(fā)送
// 發(fā)送消息
sendMessage(msgType, msgContent) {
var jsonObject = { msgType: msgType, msgContent: msgContent };
socket.emit("send_event", jsonObject);
},
//前端這邊通過emit發(fā)送消息，這里的send_event也是跟后端人員約定好的事件。
3、客戶端自帶事件
除了上面介紹的幾個(gè)主要事件外、還有一些其他事件
- connect：連接成功
- connecting：正在連接
- disconnect：斷開連接
- connect_failed：連接失敗
- error：錯(cuò)誤發(fā)生，并且無(wú)法被其他事件類型所處理
- reconnect_failed：重連失敗
- reconnect：成功重連
- reconnecting：正在重連
4、版本問題
socket.io分為客戶端和服務(wù)器端，在選擇使用的時(shí)候，一定要注意相關(guān)版本的選擇要對(duì)應(yīng)，要不然就會(huì)出現(xiàn)各種奇怪的問題，我當(dāng)時(shí)做的時(shí)候沒注意這一塊，就耽誤了一些時(shí)間。。。
相關(guān)版本兼容性如下表所示！
以上就是實(shí)時(shí)通信Socket io的使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Socket io實(shí)時(shí)通信的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue前端頁(yè)面數(shù)據(jù)加載添加loading效果的實(shí)現(xiàn)
這篇文章主要介紹了vue前端頁(yè)面數(shù)據(jù)加載添加loading效果的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法
vue3項(xiàng)目,新增彈框連續(xù)點(diǎn)擊確定按鈕防止多次提交,在按鈕上添加自定義指令,這篇文章主要介紹了VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue2.x對(duì)象深層劫持的原理實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
今天小編就為大家分享一篇對(duì)vue中v-if的常見使用方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
vue自定義加載指令v-loading占位圖指令v-showimg
這篇文章主要為大家介紹了vue自定義加載指令和v-loading占位圖指令v-showimg的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
在vue中當(dāng)我們管理數(shù)據(jù)的時(shí)候比較亂，我們要用到下面的這個(gè)庫(kù)，本文主要介紹了如何使用 Vuex的入門教程，具有一定的參考價(jià)值，感興趣的可以了解一下2022-02-02
vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路詳解
這篇文章主要給大家介紹了關(guān)于vue-virtual-scroll-list虛擬組件實(shí)現(xiàn)思路的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue 使用monaco實(shí)現(xiàn)代碼高亮的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue項(xiàng)目實(shí)現(xiàn)登陸注冊(cè)效果
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)登陸注冊(cè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue項(xiàng)目中chunk-vendors.js提示報(bào)錯(cuò)的查看方法(最新推薦)
在vue項(xiàng)目中,chunk-vendors.js報(bào)出的錯(cuò)誤提示經(jīng)常會(huì)導(dǎo)致開發(fā)者困惑,正確查看錯(cuò)誤的方法是從錯(cuò)誤提示的詳細(xì)信息中找到報(bào)錯(cuò)原因,下面給大家分享vue項(xiàng)目中chunk-vendors.js提示報(bào)錯(cuò)的查看方法,感興趣的朋友一起看看吧2024-12-12