在 React 中使用 WebSockets 构建实时聊天应用程序

实时通信已成为现代 Web 应用程序（尤其是在聊天应用程序中）不可或缺的功能。实时通信提供了一种强大的方法来实现客户端和服务器之间的实时双向通信。在本指南中，我们将逐步讲解如何使用React WebSockets构建实时聊天应用程序。

先决条件

在深入研究之前，请确保您具备以下条件：

• 对 React 有基本的了解。
• 您的机器上安装了 Node.js。
• npm类似或 yarn 的包管理器。
• 熟悉 WebSocket 概念。

步骤 1：设置后端

我们需要一个 WebSocket 服务器来处理实时通信。我们将使用 Node.js 的 ws 包。

1、初始化 Node.js 项目：

mkdir chat-backend
cd chat-backend
npm init -y

2、安装 ws 包：

npm install ws

3、创建 WebSocket 服务器：

// server.js
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
console.log('Client connected');

ws.on('message', (message) => {
console.log(`Received: ${message}`);
// Broadcast the message to all clients
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});

ws.on('close', () => {
console.log('Client disconnected');
});
});

console.log('WebSocket server running on ws://localhost:8080');

4、运行服务器：

node server.js

第 2 步：设置 React 前端

1、创建一个新的 React 应用：

npx create-react-app chat-frontend
cd chat-frontend

2、WebSocket安装 WebSocket 的依赖项：

由于将使用浏览器的本机 API，因此不需要额外的依赖项。

步骤3：构建聊天界面

1、创建聊天组件：

// src/components/Chat.js
import React, { useState, useEffect, useRef } from 'react';

const Chat = () => {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const ws = useRef(null);

useEffect(() => {
ws.current = new WebSocket('ws://localhost:8080');

ws.current.onmessage = (event) => {
setMessages((prev) => [...prev, event.data]);
};

return () => {
ws.current.close();
};
}, []);

const sendMessage = () => {
if (input.trim()) {
ws.current.send(input);
setInput('');
}
};

return (
<div style={{ padding: '20px', maxWidth: '400px', margin: '0 auto', textAlign: 'center' }}>
<h2>Real-Time Chat</h2>
<div
style={{
border: '1px solid #ccc',
borderRadius: '5px',
padding: '10px',
maxHeight: '300px',
overflowY: 'scroll',
}}
>
{messages.map((msg, index) => (
<div key={index} style={{ textAlign: 'left', margin: '5px 0' }}>
{msg}
</div>
))}
</div>
<div style={{ marginTop: '10px' }}>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
style={{
padding: '8px',
width: '70%',
marginRight: '5px',
borderRadius: '5px',
border: '1px solid #ccc',
}}
/>
<button
onClick={sendMessage}
style={{
padding: '8px 12px',
borderRadius: '5px',
border: 'none',
backgroundColor: '#007BFF',
color: '#fff',
}}
>
Send
</button>
</div>
</div>
);
};