快捷導(dǎo)航

實(shí)時(shí)通信Socket?io的使用示例詳解

更新時(shí)間：2022年11月13日 16:52:29 作者：故友

這篇文章主要為大家介紹了實(shí)時(shí)通信Socket?io的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

最近在工作中，遇到了一個(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)聽(tīng)連接是否成功
        console.log("鏈接成功");
      });
      socket.on("disconnect", (reason) => {
        //監(jiān)聽(tīng)連接異常中斷
        console.log("中斷", reason);
      });
      socket.on("message_event", (data) => {
      console.log("接收到的消息", data);
      })
     // 此處需要注意的是on是一個(gè)監(jiān)聽(tīng)事件，監(jiān)聽(tīng)的message_event是和后臺(tái)約定好的事件名。
     前端主動(dòng)斷開(kāi)鏈接
     socket.close()或者 socket.disconnect()

4、消息的發(fā)送

    // 發(fā)送消息
    sendMessage(msgType, msgContent) {
      var jsonObject = { msgType: msgType, msgContent: msgContent };
      socket.emit("send_event", jsonObject);
    },
    //前端這邊通過(guò)emit發(fā)送消息，這里的send_event也是跟后端人員約定好的事件。

3、客戶端自帶事件

除了上面介紹的幾個(gè)主要事件外、還有一些其他事件

connect：連接成功
connecting：正在連接
disconnect：斷開(kāi)連接
connect_failed：連接失敗
error：錯(cuò)誤發(fā)生，并且無(wú)法被其他事件類型所處理
reconnect_failed：重連失敗
reconnect：成功重連
reconnecting：正在重連

4、版本問(wèn)題

socket.io分為客戶端和服務(wù)器端，在選擇使用的時(shí)候，一定要注意相關(guān)版本的選擇要對(duì)應(yīng)，要不然就會(huì)出現(xiàn)各種奇怪的問(wèn)題，我當(dāng)時(shí)做的時(shí)候沒(méi)注意這一塊，就耽誤了一些時(shí)間。。。

相關(guān)版本兼容性如下表所示！