實時通信Socket?io的使用示例詳解

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

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

引言

最近在工作中，遇到了一個需求，需要和后臺服務實時通信，獲取各種設備的實時狀態(tài)、以及對設備下發(fā)指令。后端這邊選擇了socket.io這個庫，前端這邊配合也只能使用這個，它的使用方式跟websocket很類似，為此簡單記錄一下socket.io的使用，希望幫助到有需要的人。

1、什么是socket.io

Socket.IO 是一個庫，可以在客戶端和服務器之間實現(xiàn) 低延遲, 雙向和基于事件的通信。

它建立在 WebSocket 協(xié)議之上，并提供額外的保證，例如回退到 HTTP 長輪詢或自動重新連接。

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ù)接下來的操作，了解各個事件的使用。

    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是一個監(jiān)聽事件，監(jiān)聽的message_event是和后臺約定好的事件名。
     前端主動斷開鏈接
     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也是跟后端人員約定好的事件。