Cara membina apl sembang masa nyata dengan React dan WebSocket

Cara membina aplikasi sembang masa nyata menggunakan React dan WebSocket

Pengenalan:
Dengan perkembangan pesat Internet, komunikasi masa nyata telah menarik lebih banyak perhatian. Apl sembang langsung telah menjadi sebahagian daripada kehidupan sosial dan kerja moden. Artikel ini akan memperkenalkan cara membina aplikasi sembang masa nyata yang ringkas menggunakan React dan WebSocket, dan memberikan contoh kod khusus.

1. Persediaan teknikal
Sebelum kami mula membina aplikasi sembang masa nyata, kami perlu menyediakan teknologi dan alatan berikut:

1. React: perpustakaan JavaScript untuk membina antara muka pengguna.
2. WebSocket: Protokol berasaskan TCP yang digunakan untuk komunikasi masa nyata antara pelanggan dan pelayan.
3. Node.js: Persekitaran berjalan JavaScript berdasarkan enjin Chrome V8.
4. Express.js: Rangka kerja aplikasi web Node.js yang ringkas dan fleksibel.
5. Socket.IO: Perpustakaan berasaskan WebSocket untuk komunikasi dua hala masa nyata.

2. Tetapan projek

1. Buat aplikasi React
   Gunakan arahan create-react-app dalam baris arahan untuk mencipta aplikasi React baharu:

   npx create-react-app chat-app

2. Memasang kebergantungan projek berikut
   dependencies:

   cd chat-app
   npm install socket.io-client express

3. Tetapan pelayan

1. Buat fail pelayan
   Buat fail bernama server.js dan tambah kod berikut:

   const express = require('express');
   const http = require('http');
   const app = express();
   const server = http.createServer(app);
   const io = require('socket.io')(server);
   
   io.on('connection', (socket) => {
     console.log('a user connected');
   
     socket.on('disconnect', () => {
    console.log('user disconnected');
     });
   
     socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
     });
   });
   
   server.listen(4000, () => {
     console.log('listening on *:4000');
   });

2. Mulakan pelayan untuk arahan berikut
   R mulakan pelayan ：

   node server.js

IV. Tetapan pelanggan

1. Buat komponen sembang
   Buat fail bernama Chat.js dalam direktori src dan tambah kod berikut:

   import React, { useState, useEffect } from 'react';
   import io from 'socket.io-client';
   
   const socket = io('http://localhost:4000');
   
   const Chat = () => {
     const [messages, setMessages] = useState([]);
     const [message, setMessage] = useState('');
   
     useEffect(() => {
    socket.on('chat message', (msg) => {
      setMessages([...messages, msg]);
    });
     }, [messages]);
   
     const handleSendMessage = () => {
    socket.emit('chat message', message);
    setMessage('');
     };
   
     return (
    <div>
      <div>
        {messages.map((msg, index) => (
          <p key={index}>{msg}</p>
        ))}
      </div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={handleSendMessage}>Send</button>
    </div>
     );
   };
   
   export default Chat;

2. Sembang Kompaun dalam Appj

   
   

   Dalam fail App.js dalam direktori src, tambahkan kod berikut pada kod asal:

import React from 'react';
import Chat from './Chat';

const App = () => {
  return (
 <div>
   <h1 id="Real-time-Chat-Application">Real-time Chat Application</h1>
   <Chat />
 </div>
  );
};

export default App;

3. 
   Jalankan aplikasi

   Jalankan arahan berikut dalam baris arahan untuk memulakan aplikasi React:

npm start

5 . Aplikasi Ujian

Buka http://localhost:3000 dalam penyemak imbas, anda boleh melihat antara muka sembang masa nyata yang ringkas. Masukkan mesej dalam kotak input dan klik butang hantar untuk menghantar mesej dan memaparkannya pada antara muka sembang dalam masa nyata.

Kesimpulan:

Artikel ini menerangkan cara membina aplikasi sembang masa nyata menggunakan React dan WebSocket. Dengan menggunakan React untuk membina antara muka bahagian hadapan dan berkomunikasi dalam masa nyata melalui WebSocket, kami boleh membina aplikasi sembang masa nyata yang ringkas dengan mudah. Saya harap artikel ini membantu anda memahami cara membina aplikasi sembang masa nyata. 🎜

Atas ialah kandungan terperinci Cara membina apl sembang masa nyata dengan React dan WebSocket. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!