Membina Aplikasi Sembang Masa Nyata dengan WebSockets dalam React

Komunikasi masa nyata telah menjadi ciri penting dalam aplikasi web moden, terutamanya dalam aplikasi sembang. WebSockets menyediakan cara yang berkuasa untuk mendayakan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam panduan ini, kami akan melalui proses membina aplikasi sembang masa nyata menggunakan WebSockets dan React.

Prasyarat
Sebelum menyelam, pastikan anda mempunyai perkara berikut:

• Pemahaman asas React.
• Node.js dipasang pada mesin anda.
• Pengurus pakej seperti npm atau benang.
• Kebiasaan dengan konsep WebSocket.

Langkah 1: Sediakan Bahagian Belakang
Kami memerlukan pelayan WebSocket untuk mengendalikan komunikasi masa nyata. Kami akan menggunakan Node.js dengan pakej ws.

1. Memulakan projek Node.js:

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

1. Pasang pakej ws:

npm install ws 

1. Buat pelayan 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. Jalankan pelayan:

node server.js

Langkah 2: Sediakan React Frontend

1. Buat apl React baharu:

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

1. Pasang kebergantungan untuk WebSocket: Tiada kebergantungan tambahan diperlukan kerana API WebSocket asli penyemak imbas akan digunakan.

Langkah 3: Membina Antara Muka Sembang

1. Buat komponen Sembang:

// 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. Mulakan apl React:

npm start  

Langkah 4: Menguji Aplikasi

• Buka apl React anda dalam berbilang tab atau peranti.
• Mula menaip mesej dalam satu tab, dan perhatikan ia muncul dalam semua pelanggan yang disambungkan dalam masa nyata!

Peningkatan Tambahan
Untuk menyediakan pengeluaran apl, pertimbangkan:

• Menambahkan pengesahan pengguna untuk mesej yang diperibadikan.
• Menyepadukan pangkalan data untuk menyimpan sejarah sembang.
• Menetapkan pelayan WebSocket dan apl React ke platform seperti Vercel, Heroku atau AWS.

Kesimpulan
Dengan memanfaatkan WebSockets, kami telah membina aplikasi sembang masa nyata yang ringan menggunakan React. Projek ini menunjukkan kuasa WebSockets untuk komunikasi dinamik, yang berguna dalam pelbagai aplikasi seperti platform pemesejan, permainan dan pemberitahuan langsung. Menyelam lebih dalam ke dalam protokol WebSocket untuk meningkatkan lagi aplikasi anda!

Selamat pengekodan! ?

Atas ialah kandungan terperinci Membina Aplikasi Sembang Masa Nyata dengan WebSockets dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!