Socket.IO 是一个用于实时通信的 JavaScript 库，可以在前端和服务器之间建立双向连接，实现实时通信的功能。在 React 中，使用 Socket.IO 可以方便地实现实时更新数据和交互功能。
安装和使用
首先需要使用 npm 安装 Socket.IO：
npm install socket.io-client
然后在 React 组件中引入 Socket.IO：
import io from 'socket.io-client';
接下来可以根据具体需求在组件的生命周期中建立 Socket.IO 连接，监听事件，发送数据等。
建立连接
在组件挂载完成后，建立 Socket.IO 连接：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
----------- - -----
-
------------------- -
----------- - ----------------------------
-
-------- -
------ -
-----
--- --- ---
------
--
-
-此时，页面已经建立了 Socket.IO 的连接。可以在 componentWillUnmount 生命周期中手动关闭连接：
componentWillUnmount() {
this.socket.close();
}监听事件
可以使用 socket.on 方法监听服务器端主动发送的事件：
componentDidMount() {
this.socket = io('http://localhost:3000');
this.socket.on('news', (data) => {
console.log(data);
});
}以上代码表示监听了服务器端发送的名为 news 的事件，并在事件发生时打印消息到控制台。
发送数据
使用 socket.emit 方法向服务器发送数据：
componentDidMount() {
this.socket = io('http://localhost:3000');
this.socket.emit('my message', { hello: 'world' });
}以上代码表示向服务器发送名为 my message 的消息，并携带了一个 {hello: 'world'} 的数据。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ -- ---- -------------------
----- ----------- ------- --------------- -
------------------ -
-------------
----------- - -----
---------- - -
--------- ---
--
-
------------------- -
----------- - ----------------------------
------------------------- --------- -- -
---------------
--------- ------------------------ ---------
---
---
------------------- ------ ---------- -- -
------------------------ ------ --- -------
---
-
---------------------- -
--------------------
-
------------- -
----- ----- - ---------------------------------
--------------------------- -------------
----------- - ---
-
-------- -
------ -
-----
----
---------------------------------- -- -
--- ----------------------------
---
-----
------ ----------- ---------- --
------- ----------- -- ---------------------------------
------
--
-
-以上代码实现了一个基本的聊天室功能，建立了 Socket.IO 连接，在组件挂载后监听服务器发送的两种事件，发送消息到服务器等。可以根据具体需求修改实现自己的功能。
总结
本文介绍了 Socket.IO 在 React 中的基本用法，包括建立连接、监听事件、发送数据等。Socket.IO 在实时更新数据和交互功能的实现中具有重要作用，使用起来非常方便。但需要注意的是，在使用 Socket.IO 时需要注意安全性和性能等问题，使用时需慎重。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458c5a0968c7c53b0b1572e