WebSocket 是一种全双工通信协议，可以实现浏览器和服务器之间的实时双向通信。在现代 Web 开发中，WebSocket 已经成为了构建实时应用的重要工具。在 React 应用中实现 WebSocket 通信可以用来实现实时聊天、多用户协作等功能。本文将分享在 React 中实现 WebSocket 通信的详细方法以及示例代码。
WebSocket 的基本使用方法
在 React 应用中，我们通常使用 WebSocket API 与 WebSocket 进行通信。在使用 WebSocket 时，可以通过指定 URL 和协议，创建一个 WebSocket 实例。创建 WebSocket 实例后，我们可以通过发送消息和监听消息事件等方式与服务器进行通信。
以下为 WebSocket 基本使用方法：
-- -------------------- ---- ------- ----- ------ - --- --------------------------------- ------------ ------------- - -- -- - ---------------------- -------- ------------------ --------- -- ---------------- - ------- -- - -------------------------------------- -- -------------- - -- -- - ---------------------- -------- --
在代码中，我们通过调用 new WebSocket() 方法创建了一个 WebSocket 实例，并指定了服务器 URL 和通信协议。然后，我们通过监听 onopen 事件，等 WebSocket 连接建立后，调用 send() 方法发送了一条消息给服务器。接着，我们监听 onmessage 事件，当接收到服务器发送的消息时，会触发回调函数进行处理。最后，监听 onclose 事件，当 WebSocket 连接被关闭时，会触发回调函数进行处理。
使用 WebSocket 实现实时聊天应用
下面我们通过一个示例代码，演示如何在 React 应用中，使用 WebSocket 实现实时聊天应用。在示例中，我们将通过 WebSocket 连接，从服务器接收实时消息，并使用 React 组件实现聊天窗口和输入框。
服务器端
首先，我们需要搭建一个 WebSocket 服务器，用于接收和发送消息。这里，我们使用 ws 库来构建 WebSocket 服务器。以下是服务器端代码：
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
---------------------- --------
---------------- -------- ----------------- -
-----------------------------------
-- --------------
---------------------------- ------------ -
-- ------------------ --- --------------- -
---------------------
-
---
---
-------------- -------- ------- -
---------------------- --------
---
---我们首先通过 require('ws') 引入 ws 模块，创建 WebSocket 实例，监听端口 3000。然后，当 WebSocket 连接建立时，会触发 connection 事件，我们在事件处理函数中，监听客户端发送的消息，并通过 wss.clients 获取所有客户端，并广播收到的消息。最后，当 WebSocket 连接关闭时，会触发 close 事件。
客户端
接着，我们在 React 应用中引入 WebSocket API，使用 React 组件实现聊天窗口和输入框，并通过 WebSocket 连接向服务器发送和接收消息。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ------------ -
----- ---- ------ - ---------------
----- ---------- ------------ - -------------
----- ------------ -------------- - -------------
------------ -- -
----- ----- - --- ----------------------------------
-------------
------ -- -- -
--------------
--
-- ----
------------ -- -
-- ----- -------
------------ - ------- -- -
------------------------- - -------- ---------- ----
--
---------- - -- -- -
---------------------- --------
--
-- ---- -----------
----- ------------------ - --- -- -
------------------------------
--
----- ----------------- - -- -- -
-- ------------- -------
--------------------
------------------
--
------ -
-----
-----
----------------------- ------ -- -
---- -----------------------------------
---
------
-----
------ ------------------ ----------------------------- --
------- ---------------------------------------
------
------
--
-在以上代码中，我们首先使用 useState 和 useEffect 钩子，分别管理 WebSocket 实例和消息数组。在 useEffect 中，我们通过 new WebSocket() 创建 WebSocket 实例，并监听 onmessage 事件和 onclose 事件。当 WebSocket 接收到服务器发送的消息时，我们将消息添加到消息数组中，通过 setMessages 更新视图。当 WebSocket 连接关闭时，会触发 onclose 事件，提示 WebSocket 连接已关闭。
接着，我们使用 React 组件，实现聊天窗口和输入框，通过 inputValue 状态管理输入框的值，点击发送按钮时，将输入框的内容发送给服务器，清空输入框的值。
总结
本文介绍了在 React 应用中实现 WebSocket 通信的方法。我们演示了实时聊天应用的示例代码，让大家了解了如何使用 React 组件实现聊天窗口和输入框，以及通过 WebSocket 连接向服务器发送和接收消息。WebSocket 连接可以用于构建实时应用，提高用户体验和提升产品价值。希望本文能帮助大家了解 WebSocket 技术的基本使用，以及在 React 中的应用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459ece1968c7c53b0c070b9