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