實(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
vue自定義加載指令v-loading占位圖指令v-showimg
這篇文章主要為大家介紹了vue自定義加載指令和v-loading占位圖指令v-showimg的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
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項(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

