WebSockets 是一种用于双向通信的网络协议，它在客户端和服务器之间建立了一个持久的连接，使得实时的数据传输成为可能。React 和 Node.js 是目前最受欢迎的前端和后端技术，它们可以很好地结合起来构建可扩展的 WebSockets 应用程序。
在本文中，我们将介绍如何使用 React 和 Node.js 构建可扩展的 WebSockets 应用程序，内容涵盖如下：
- 了解 WebSockets 协议的基本知识
- 使用 Node.js 实现 WebSocket 服务器
- 使用 React 编写 WebSocket 客户端
- 实现 WebSockets 多房间聊天室应用程序
了解 WebSockets 协议的基本知识
WebSocket 协议是一种基于 TCP 的网络协议，它实现了双向通信，允许客户端和服务器之间实时地进行数据传输。与 HTTP 协议不同的是，WebSocket 协议建立了一个持久的连接，客户端和服务器可以在任何时间进行数据交流，而不需要重新建立连接。
WebSocket 协议建立连接的过程如下：
- 客户端向服务器发送一个 HTTP 请求，请求头中包含 "Upgrade" 和 "Connection" 字段，并且 "Upgrade" 字段的值为 "websocket"。
- 服务器接收到请求之后，向客户端返回一个 HTTP 响应，响应头中包含 "Upgrade" 和 "Connection" 字段，并且 "Upgrade" 字段的值为 "websocket"。
- 客户端和服务器建立一个 TCP 连接，这个连接是持久的。
- 客户端和服务器之间可以发送任何类型的数据，这些数据会被打包成一个数据帧进行传输，每个数据帧包含了数据的类型、长度以及负载数据。
使用 Node.js 实现 WebSocket 服务器
Node.js 提供了一个叫做 "ws" 的第三方库，可以帮助我们快速实现 WebSocket 服务器。使用 "ws" 库实现 WebSocket 服务器的代码如下：
// javascriptcn.com 代码示例
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
// 监听客户端请求
server.on('connection', (socket) => {
console.log('Client connected.');
// 发送消息给客户端
socket.send('Hello, World!');
// 监听客户端发送的消息
socket.on('message', (message) => {
console.log(`Received message: ${message}`);
});
// 监听客户端关闭连接
socket.on('close', () => {
console.log('Client disconnected.');
});
});上述代码通过创建一个 WebSocket.Server 对象来实现一个 WebSocket 服务器，监听端口号为 8080。当客户端连接到服务器时，WebSocket.Server 对象会触发 "connection" 事件，回调函数中可以处理客户端请求。在这里，我们简单地向客户端发送一个 "Hello, World!" 消息，并且监听客户端发送的消息和关闭连接事件。
使用 React 编写 WebSocket 客户端
React 是一个用于构建用户界面的 JavaScript 库，通过在组件化的方式下进行构建，开发者可以更好地组织、调试和维护代码。要想实现一个 WebSocket 客户端，我们可以使用 React 提供的 "WebSocket" 组件。
使用 "WebSocket" 组件实现 WebSocket 客户端的代码如下：
// javascriptcn.com 代码示例
import React, { useState, useEffect } from 'react';
function WebSocketClient() {
const [socket, setSocket] = useState(null);
const [message, setMessage] = useState('');
useEffect(() => {
// 创建 WebSocket 对象
const ws = new WebSocket('ws://localhost:8080');
// 监听连接事件
ws.onopen = () => {
console.log('Connected to server.');
};
// 监听接收到消息事件
ws.onmessage = (event) => {
setMessage(event.data);
};
// 监听关闭连接事件
ws.onclose = () => {
console.log('Disconnected from server.');
};
// 设置 WebSocket 对象
setSocket(ws);
// 组件卸载时关闭 WebSocket 连接
return () => {
ws.close();
};
}, []);
const handleSendMessage = () => {
socket.send('Hello, server!');
};
return (
<div>
<p>Message received: {message}</p>
<button onClick={handleSendMessage}>Send message to server</button>
</div>
);
}
export default WebSocketClient;上述代码通过 React 的 "useState" 和 "useEffect" 钩子实现了一个 WebSocket 客户端。在 "useEffect" 钩子中，我们创建了一个 WebSocket 对象，并且监听连接、接收消息和关闭连接事件。在返回函数中，我们通过调用 WebSocket 对象的 "close" 方法来关闭连接。
组件中还实现了一个 "handleSendMessage" 函数，它用来向服务器发送消息。
实现 WebSockets 多房间聊天室应用程序
我们可以通过 React 和 Node.js 实现一个 WebSockets 多房间聊天室应用程序。多房间聊天室应用程序包含如下功能：
- 多个用户可以同时进入聊天室，并且可以选择加入不同的聊天室。
- 用户可以在聊天室中发送消息，其他用户可以看到消息。
- 聊天室内可以显示当前在线用户列表。
实现多房间聊天室应用程序的代码如下：
// javascriptcn.com 代码示例
// server.js
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
const rooms = {};
server.on('connection', (socket) => {
console.log('Client connected.');
// 监听客户端发送的消息
socket.on('message', (message) => {
const { room, text } = JSON.parse(message);
if (!rooms[room]) {
rooms[room] = [];
}
if (text === '/list') {
const users = rooms[room].map((userSocket) => {
return userSocket.username;
});
const response = {
type: 'users',
users
};
socket.send(JSON.stringify(response));
} else {
// 向聊天室内的所有用户发送消息
const response = {
type: 'message',
username: socket.username,
text
};
rooms[room].forEach((userSocket) => {
userSocket.send(JSON.stringify(response));
});
}
});
// 监听客户端关闭连接
socket.on('close', () => {
console.log('Client disconnected.');
// 从当前聊天室中删除用户
const room = socket.room;
if (rooms[room]) {
rooms[room] = rooms[room].filter((userSocket) => userSocket !== socket);
// 向聊天室内的所有用户发送用户离开消息
const response = {
type: 'leave',
username: socket.username
};
rooms[room].forEach((userSocket) => {
userSocket.send(JSON.stringify(response));
});
}
});
});
// client.js
import React, { useState, useEffect, useRef } from 'react';
function WebSocketClient({ username, room }) {
const [socket, setSocket] = useState(null);
const [users, setUsers] = useState([]);
const [messages, setMessages] = useState([]);
const inputRef = useRef(null);
useEffect(() => {
// 创建 WebSocket 对象
const ws = new WebSocket('ws://localhost:8080');
// 监听连接事件
ws.onopen = () => {
console.log('Connected to server.');
// 加入聊天室
const message = {
room,
text: '/join'
};
ws.send(JSON.stringify(message));
};
// 监听接收到消息事件
ws.onmessage = (event) => {
const response = JSON.parse(event.data);
if (response.type === 'message') {
setMessages((messages) => [...messages, response]);
} else if (response.type === 'users') {
setUsers(response.users);
} else if (response.type === 'leave') {
setMessages((messages) => [...messages, response]);
setUsers((users) => users.filter((user) => user !== response.username));
}
};
// 监听关闭连接事件
ws.onclose = () => {
console.log('Disconnected from server.');
};
// 设置 WebSocket 对象
setSocket(ws);
// 组件卸载时关闭 WebSocket 连接
return () => {
const message = {
room,
text: '/leave'
};
ws.send(JSON.stringify(message));
ws.close();
};
}, [room]);
const handleSendMessage = () => {
const text = inputRef.current.value.trim();
if (text) {
const message = {
room,
text
};
socket.send(JSON.stringify(message));
inputRef.current.value = '';
}
};
return (
<div>
<p>Online users:</p>
<ul>
{users.map((user, index) => {
return <li key={index}>{user}</li>;
})}
</ul>
<p>Messages:</p>
<ul>
{messages.map((message, index) => {
if (message.type === 'message') {
return (
<li key={index}>
{message.username}: {message.text}
</li>
);
} else if (message.type === 'leave') {
return (
<li key={index}>
{message.username} has left the room.
</li>
);
}
})}
</ul>
<input type="text" ref={inputRef} />
<button onClick={handleSendMessage}>Send</button>
</div>
);
}
export default WebSocketClient;上述代码中，我们通过在服务器端创建一个 "rooms" 对象来管理多个聊天室。当客户端进入聊天室时，我们向 "rooms" 对象中添加一个数组来存储聊天室内的用户。当客户端发送消息时，我们根据消息的类型来处理不同的逻辑。
在客户端中，我们采用 React 的 "useState" 和 "useEffect" 钩子来管理组件状态和副作用。当组件挂载时，我们通过向服务器发送一个 "/join" 消息来加入聊天室，同时监听服务器发送给我们的消息，当服务器发送给我们的消息为聊天消息时，我们将消息显示在聊天记录中，当服务器发送给我们的消息为在线用户列表时，我们将用户列表显示在界面上。
当组件卸载时，我们通过向服务器发送一个 "/leave" 消息来离开聊天室，同时关闭 WebSocket 连接。
总结
本文介绍了如何使用 React 和 Node.js 构建可扩展的 WebSockets 应用程序。通过学习本文，你可以了解到 WebSockets 协议的基本知识，了解如何使用 Node.js 实现 WebSocket 服务器，了解如何使用 React 编写 WebSocket 客户端，以及了解如何实现 WebSockets 多房间聊天室应用程序。希望本文对你对于 WebSockets 技术的学习和应用能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6533bafb7d4982a6eb74df6c