WebSocket 是一种提供实时双向通信的协议，与传统的 HTTP 协议不同，它可以在客户端和服务器之间建立持久连接，使得服务器可以主动向客户端推送消息。React 作为一种流行的开发框架，为了实现实时通信，也需要使用 WebSocket。在本文中，我们将讨论如何在 React 中使用 WebSocket 进行实时通信。
WebSocket 基础知识
在使用 WebSocket 之前，有必要了解一些基础知识。WebSocket 的工作方式和 HTTP 类似，但是它只在连接的建立过程中使用 HTTP 协议，在连接建立后，通信数据都采用 WebSocket 协议。WebSocket 的连接建立过程如下：
- 客户端向服务器发送一个 HTTP 请求，请求中包含一个 Upgrade 头，指定要升级的协议为 WebSocket。
- 服务器响应一个 HTTP 响应，包含一个 Upgrade 头和一个 Connection 头，指定协议为 WebSocket。
- 客户端和服务器之间的连接升级为 WebSocket 连接。
WebSocket 连接成功后，就可以发送和接收数据了。客户端和服务器可以互相发送消息。另外，WebSocket 还支持心跳（ping/pong）机制，可以在连接一段时间空闲时发送心跳，保持连接不断开。
React 中使用 WebSocket
在 React 中，通常有两种方式使用 WebSocket。一种是使用原生的 WebSocket API，另一种是使用第三方的库，如 socket.io-client。下面以原生的 WebSocket API 为例，介绍如何在 React 中使用 WebSocket。
创建 WebSocket 对象
在 React 组件中，可以在组件的 componentDidMount() 方法中创建 WebSocket 对象，如下所示：
----- ----------- ------- --------------- -
------------------- -
----- -- - --- --------------------------------------------
-
-------- -
------ ------- ---------------
-
-这里创建了一个 WebSocket 对象，连接到地址为 ws://localhost:8000/mywebsocket 的 WebSocket 服务器。当 React 组件挂载后，WebSocket 对象就会创建，连接到服务器。
监听 WebSocket 事件
WebSocket 和其他事件驱动的 API 一样，也可以监听各种事件。在 React 组件中，可以在 componentDidMount() 方法中添加事件监听器，如下所示：
----- ----------- ------- --------------- -
------------------- -
------- - --- --------------------------------------------
-------------------------------- -- -- -
---------------------- -----------
--
----------------------------------- ------- -- -
----- ------- - ----------
---------------------- -------- ---------- --------
--
--------------------------------- -- -- -
---------------------- --------------
--
--------------------------------- ------- -- -
------------------------ -------- ------
--
-
---------------------- -
---------------
-
-------- -
------ ------- ---------------
-
-这里添加了四个事件监听器：open、message、close 和 error。分别表示 WebSocket 连接成功、收到消息、连接关闭和出现错误时的处理函数。另外，当组件卸载时（即 componentWillUnmount() 方法被触发时），需要手动关闭 WebSocket 连接。
发送 WebSocket 消息
在 React 组件中，可以使用 WebSocket 对象的 send() 方法发送消息，如下所示：
----- ----------- ------- --------------- -
------------------- -
------- - --- --------------------------------------------
-
-------------------- -
-- ------------------- --- --------------- -
---------------------
-
-
---------------------- -
---------------
-
-------- -
------ ------- ---------------
-
-这里定义了一个 sendMessage() 方法，用于发送消息。在方法中，需要检查 WebSocket 对象的 readyState 属性，判断 WebSocket 连接是否已经建立。只有 WebSocket 连接已经建立时，才能发送消息。
示例代码
下面是一个完整的 React 组件示例，演示如何使用 WebSocket 实现一个即时聊天室的功能。客户端向服务器发送一条消息后，服务器会广播给所有的客户端。
------ ----- ---- -------
----- -------- ------- --------------- -
------------------ -
------------
---------- - -
--------- ---
-------- ---
-
------------------------ - -----------------------------------
---------------- - ---------------------------
-
------------------- -
----- -- - --- -------------------------------------
--------------- -- -- -- -- -
----------------------------------------- ------- -- -
----- ------- - ----------
------------------------- -- -- --------- ----------------------- -------- ---
--
--------------------------------------- -- -- -
--------------- --- ---- --
--
--------------------------------------- ------- -- -
--------------------
--
--
-
---------------------- -
-- --------------- -
---------------------
--------------- --- ---- --
-
-
-------------------------- -
--------------- -------- ------------------ --
-
------------------ -
----------------------
-- -------------- -- ------------------------- --- --- -
--------------------------------------
--------------- -------- -- --
-
-
-------- -
------ -
-----
----
---------------------------------- ------ -- -
--- --------------------------
---
-----
----- ----------------------------
------ -------------------------- ----------------------------------- --
------- ---------------------------
-------
------
-
-
-
------ ------- --------在上面的代码中，一个 WebSocket 对象在组件挂载时创建，连接到地址为 ws://localhost:8000/chat 的 WebSocket 服务器。组件中定义了一个消息列表和发送消息的表单，当用户点击 Send 按钮时，调用了 sendMessage() 方法，将表单中的消息发送给服务器。同时，也添加了一个事件监听器，用于接收服务器广播的消息，并更新消息列表。
结论
WebSocket 是一种实现实时通信的协议，可以在 React 中使用原生的 WebSocket API 或第三方库来实现。在使用 WebSocket 时，需要注意事件驱动的编程方式，并使用合适的心跳机制来维护 WebSocket 连接。本文还提供了一个实时聊天室的例子，可以帮助读者更好地理解如何在 React 中使用 WebSocket。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66f80fa8c5c563ced5bb1381