目录
源内容（英文）
WebSocket 协议通过单个 TCP 套接字 连接，在客户端和服务器之间提供持续的、实时的全双工通信。WebSocket 协议只有两个计划：开启握手和促进数据传输。在服务器接收到客户端发送的握手请求并启动 WebSocket 连接后，它可以与任意数量的头相互发送数据。在本文中，我们将讨论如何利用 WebSockets 和 React Hooks 来实现实时更新。
使用 WebSockets & React Hooks 实现实时更新的方法：
对于后端：
- 导入 WebSocket 库：我们依赖
ws模块作为 Node.js 中 WebSocket 实例的助手。 - 创建 WebSocket 服务器：端口 8080 被绑定用于 WebSocket 服务器以接收连接。
- 处理连接：当用户尝试连接到服务器时，也会触发
‘connection‘事件。 - 处理来自客户端的传入消息：当发生 INLINECODE6c7d65d0 事件且与某个客户端关联时，它会触发一个 INLINECODE94a54b7e 事件。
- 解析和处理消息：下一步是接收消息分解，通常以 JSON 格式发送，随后相应地处理或记录数据。
- 向所有客户端广播消息：处理开始后，消息将被发送给所有其他连接的客户端。
- 处理客户端断开连接：通过连接的
"****close****"事件，如果客户端与服务器断开连接，这也将被记录。
对于前端：
- 我们从 INLINECODEeecf0ed9 导入 INLINECODE248d468b、INLINECODE2be97994 和 INLINECODEc5244c06。使用箭头函数声明一个函数组件 INLINECODE20cee165。使用 INLINECODE8f8fbd47 初始化状态变量（INLINECODE9337eeaa、INLINECODE5617ac86、INLINECODE1a700003、INLINECODE06717456）。
- 在 INLINECODE49a26e2d 中设置 WebSocket 连接，连接到 ‘ws://127.0.0.1:8080‘ 并注册事件监听器（INLINECODE654e9db8、INLINECODE5b1d79e8、INLINECODE2a3c1b6c）。通过使用 INLINECODE9989b264 更新 INLINECODEb92f4ca0 状态来处理传入消息。
- 在组件卸载时使用 INLINECODE587569ec 清理函数关闭 WebSocket 连接。使用 INLINECODE0eec674d 函数向服务器发送消息，以 JSON 格式发送包含客户端 ID 的
message状态。 - 使用 INLINECODE7409d014 函数处理输入变化以更新 INLINECODE684a78bc 状态。渲染 UI，包括显示 INLINECODE1e667fce 的标题、INLINECODE086c9edb 列表、消息输入字段和发送按钮。
- 将
RealTimeUpdates组件作为默认导出从模块中导出。
创建 NodeJS 应用程序和安装模块的步骤：
步骤 1： 通过运行以下命令初始化一个新的 NodeJS 项目：
npm init -y
步骤 2： 使用以下命令在您的项目中安装必要的包：
npm install ws
步骤 3： 在项目目录中创建一个新的 JavaScript 文件（例如，server.js）并编写以下代码以在 server.js 中创建您的 WebSocket 服务器：
项目结构：
后端 package.json 文件中的依赖项将如下所示：
"dependencies": {
"ws": "^8.16.0"
}
示例： 以下是创建实时更新应用程序服务器的示例。
JavaScript
CODEBLOCK_71456042
步骤 4： 通过运行以下命令启动您的 WebSocket 服务器：
node server.js
现在您的 WebSocket 服务器正在运行并监听端口 8080 上的连接
在前端实现实时更新的步骤：
步骤 1： 创建一个 react 项目文件夹，打开终端，并编写以下命令。
npx create-react-app foldername
步骤 2： 使用以下命令导航到项目的根目录。
cd foldername
项目结构（前端）：
![Screenshot-2024-01-30-104510](https://media.geeksforgeeks.org