在 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 />;  
}  

export default App;  

1. 啟動 React 應用程式：

npm start  

第 4 步：測試應用程式

• 在多個分頁或裝置中開啟您的 React 應用程式。
• 開始在一個選項卡中輸入訊息，並觀察它們即時顯示在所有連接的客戶端中！

其他增強功能
要讓應用程式做好生產準備，請考慮：

• 為個人化訊息新增使用者身份驗證。
• 整合資料庫來儲存聊天記錄。
• 將 WebSocket 伺服器和 React 應用程式部署到 Vercel、Heroku 或 AWS 等平台。

結論
透過利用 WebSockets，我們使用 React 建立了一個輕量級的即時聊天應用程式。該專案展示了 WebSocket 在動態通訊方面的強大功能，這在訊息平台、遊戲和即時通知等各種應用程式中非常有用。深入研究 WebSocket 協議以進一步增強您的應用程式！

編碼愉快！ ？

以上是在 React 中使用 WebSocket 建立即時聊天應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！