在前端开发中，实时通信是一个非常常见的需求，例如聊天室、在线游戏等。而实现实时通信的协议有很多种，其中 Websocket 是一种比较常用的协议。本文将介绍如何使用 React 和 Websocket 实现客户端和服务端的实时通信。
Websocket 简介
Websocket 是一种双向通信协议，它基于 TCP 协议，可以在客户端和服务端之间建立一个持久化的连接，实现实时通信。相比于传统的 HTTP 请求，Websocket 的优势在于：
- 实时性更好：Websocket 可以实现实时通信，而不需要客户端不停地发送请求。
- 双向通信：Websocket 可以实现客户端和服务端之间的双向通信，服务端可以主动推送消息给客户端。
- 更少的数据传输：Websocket 的请求头比较小，数据传输量也比较小，可以减少网络带宽的占用。
React 中使用 Websocket
在 React 中使用 Websocket，我们可以使用第三方库 websocket。它提供了一个 WebSocket 类，可以用来创建 Websocket 连接。下面是一个简单的示例代码：
------ ------ - --------- --------- - ---- --------
------ --------- ---- ------------
-------- ----- -
----- --------- ----------- - -------------
------------ -- -
----- -- - --- ---------------------------------
--------- - -- -- -
-------------------------
--
------------ - ------- -- -
-----------------------
--
------ -- -- -
-----------
--
-- ----
------ ---------------------
-
------ ------- ----在上面的代码中，我们创建了一个 WebSocket 实例，并传入了服务端的地址 ws://localhost:8080。在 useEffect 中，我们监听了 onopen 和 onmessage 事件。当连接建立时，会触发 onopen 事件，我们可以在这里进行一些初始化操作。当服务端发送消息时，会触发 onmessage 事件，我们可以在这里更新组件状态，从而实现实时通信。
需要注意的是，在组件卸载时，我们需要手动关闭 Websocket 连接，否则会造成资源浪费。
服务端实现
在服务端，我们可以使用 Node.js 的 ws 模块来实现 Websocket 服务。下面是一个简单的示例代码：
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- ---- -- -
---------------------
---------------- --------- -- -
--------------------- -------- -------------
------------ ----- -------------
---
---在上面的代码中，我们先创建了一个 WebSocket.Server 实例，并指定了端口号为 8080。当客户端连接时，会触发 connection 事件，我们可以在这里进行一些初始化操作。当客户端发送消息时，会触发 message 事件，我们可以在这里处理消息并回复客户端。
总结
本文介绍了如何使用 React 和 Websocket 实现客户端和服务端的实时通信。Websocket 作为一种双向通信协议，可以实现实时通信，双向通信，以及更少的数据传输。在 React 中，我们可以使用第三方库 websocket 来创建 Websocket 连接。在服务端，我们可以使用 Node.js 的 ws 模块来实现 Websocket 服务。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/655071da7d4982a6eb947a74