实时通信Socket io的使用示例详解

苏承栈

2026-09-23 • 👁 0人浏览过

目录引言

1、什么是socket.io

2、socket.io的使用

3、客户端自带事件

4、版本问题

引言最近在工作中，遇到了一个需求，需要和后台服务实时通信，获取各种设备的实时状态、以及对设备下发指令。后端这边选择了socket.io这个库，前端这边配合也只能使用这个，它的使用方式跟websocket很类似，为此简单记录一下socket.io的使用，希望帮助到有需要的人。

1、什么是socket.io

Socket.IO 是一个库，可以在客户端和服务器之间实现低延迟, 双向和基于事件的通信。

它建立在WebSocket协议之上，并提供额外的保证，例如回退到 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链接成功以后，我们继续接下来的操作，了解各个事件的使用。

socket.on("connect", () => {//监听连接是否成功console.log("链接成功");});socket.on("disconnect", (reason) => {//监听连接异常中断console.log("中断", reason);});socket.on("message_event", (data) => {console.log("接收到的消息", data);})// 此处需要注意的是on是一个监听事件，监听的message_event是和后台约定好的事件名。

前端主动断开链接socket.close()或者 socket.disconnect()

4、消息的发送

// 发送消息sendMessage(msgType, msgContent) {var jsonObject = { msgType: msgType, msgContent: msgContent };socket.emit("send_event", jsonObject);},//前端这边通过emit发送消息，这里的send_event也是跟后端人员约定好的事件。

3、客户端自带事件

除了上面介绍的几个主要事件外、还有一些其他事件connect：连接成功connecting：正在连接disconnect：断开连接connect_failed：连接失败error：错误发生，并且无法被其他事件类型所处理reconnect_failed：重连失败reconnect：成功重连reconnecting：正在重连

4、版本问题

socket.io分为客户端和服务器端，在选择使用的时候，一定要注意相关版本的选择要对应，要不然就会出现各种奇怪的问题，我当时做的时候没注意这一块，就耽误了一些时间。。。

1、什么是socket.io

2、socket.io的使用

3、客户端自带事件

4、版本问题

1、什么是socket.io

2、socket.io的使用

1、安装引入

2、初始化

3、使用

4、消息的发送

3、客户端自带事件

4、版本问题

相关文章