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

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

先决条件
在投入之前，请确保您具备以下条件：

• 对 React 的基本了解。
• Node.js 安装在您的计算机上。
• 像npm或yarn这样的包管理器。
• 熟悉 WebSocket 概念。

第 1 步：设置后端
我们需要一个 WebSocket 服务器来处理实时通信。我们将使用 Node.js 和 ws 包。

1. 初始化一个 Node.js 项目：

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

1. 安装 ws 包：

npm install ws 

1. 创建 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');  

1. 运行服务器：

node server.js

第 2 步：设置 React 前端

1. 创建一个新的 React 应用程序：

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

1. 安装 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>



<ol>
<li>Use the Chat component in your App.js:
</li>
</ol>

<pre class="brush:php;toolbar:false">import React from 'react';  
import Chat from './components/Chat';  

function App() {
    return <chat></chat>;  
}  

export default App;  

1. 启动 React 应用程序：

npm start  

第 4 步：测试应用程序

• 在多个选项卡或设备中打开您的 React 应用。
• 开始在一个选项卡中输入消息，并观察它们实时显示在所有连接的客户端中！

其他增强功能
要使应用程序做好生产准备，请考虑：

• 为个性化消息添加用户身份验证。
• 集成数据库来存储聊天记录。
• 将 WebSocket 服务器和 React 应用程序部署到 Vercel、Heroku 或 AWS 等平台。

结论
通过利用 WebSockets，我们使用 React 构建了一个轻量级的实时聊天应用程序。该项目展示了 WebSocket 在动态通信方面的强大功能，这在消息传递平台、游戏和实时通知等各种应用程序中非常有用。深入研究 WebSocket 协议以进一步增强您的应用程序！

编码愉快！ ？