Membina aplikasi sembang masa nyata dengan Next.js dan WebSockets

Aplikasi web moden semakin bergantung pada komunikasi masa nyata untuk ciri seperti sokongan pelanggan, kerjasama pasukan dan interaksi sosial. Tutorial ini menunjukkan membina aplikasi sembang masa nyata yang teguh dan berskala menggunakan kuasa Next.js dan WebSockets. Kami akan merangkumi persediaan WebSocket, pengurusan mesej dan mencipta UI sembang responsif dengan React.

Memahami Soket Web

Sebelum menyelami kod, mari kita jelaskan peranan WebSockets. Tidak seperti permintaan HTTP tradisional, WebSockets mewujudkan saluran komunikasi dua hala yang berterusan melalui satu sambungan TCP. Komunikasi dupleks penuh ini sesuai untuk pertukaran data masa nyata, menjadikannya sempurna untuk aplikasi sembang, kemas kini langsung dan alatan kerjasama.

---

Prasyarat

Untuk mengikuti panduan ini, anda memerlukan:

1. Node.js dipasang.
2. Kebiasaan asas dengan React dan Next.js.
3. Pemahaman asas tentang WebSockets (walaupun kami akan menerangkan konsep utama).
4. Socket.IO dipasang dalam projek anda (memudahkan pengendalian WebSocket).

---

Langkah 1: Sediakan Projek Next.js Anda

Buat projek Next.js baharu (jika anda belum berbuat demikian):

<code class="language-bash">npx create-next-app real-time-chat
cd real-time-chat</code>

Pasang Socket.IO untuk kegunaan pihak klien dan pelayan:

<code class="language-bash">npm install socket.io-client socket.io</code>

---

Langkah 2: Mencipta Pelayan WebSocket

Kami akan memanfaatkan Laluan API Next.js untuk mencipta pelayan WebSocket kami.

1. Buat fail pages/api/chat.js:

<code class="language-bash">mkdir pages/api
touch pages/api/chat.js</code>

2. Tambahkan kod berikut pada chat.js:

<code class="language-javascript">// pages/api/chat.js

import { Server } from 'socket.io';

export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: 'Chat API' });
  } else {
    res.status(405).send('Method Not Allowed');
  }
}

export function configureSocket(server) {
  const io = new Server(server, {
    path: '/api/chat',
    cors: {
      origin: '*',
      methods: ['GET', 'POST'],
    },
  });

  io.on('connection', (socket) => {
    console.log('A user connected');

    socket.on('send_message', (message) => {
      io.emit('receive_message', message);
    });

    socket.on('disconnect', () => {
      console.log('A user disconnected');
    });
  });
}</code>

Kod ini menyediakan pelayan Socket.IO, mengendalikan CORS untuk komunikasi silang asal dan mendengar acara send_message, menyiarkan mesej kepada semua pelanggan yang disambungkan melalui receive_message.

Seterusnya, mulakan pelayan WebSocket dalam next.config.js:

<code class="language-javascript">// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      const { configureSocket } = require('./pages/api/chat');
      const http = require('http');
      const server = http.createServer(config.server);
      configureSocket(server);
      return config;
    }
    return config;
  },
};</code>

---

Langkah 3: Membina Frontend (React & Socket.IO Client)

Sekarang, mari buat bahagian hadapan menggunakan Socket.IO Client untuk menyambung ke pelayan.

1. Buka pages/index.js (atau buat komponen baharu).
2. Tambahkan kod pelanggan React dan Socket.IO berikut:

<code class="language-javascript">// pages/index.js
import { useState, useEffect, useRef } from 'react';
import io from 'socket.io-client';

export default function Home() {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState('');
  const socketRef = useRef(null);

  useEffect(() => {
    socketRef.current = io({ path: '/api/chat' });
    socketRef.current.on('receive_message', (message) => {
      setMessages((prevMessages) => [...prevMessages, message]);
    });
    return () => { socketRef.current.disconnect(); };
  }, []);

  const sendMessage = () => {
    if (message.trim()) {
      socketRef.current.emit('send_message', message);
      setMessage('');
    }
  };

  // ... (JSX for the chat UI -  input field, send button, message display) ...
}</code>

Kod ini mewujudkan sambungan WebSocket, mendengar mesej masuk dan mengendalikan penghantaran mesej ke pelayan. Ingat untuk menambah JSX yang diperlukan untuk mencipta antara muka sembang (medan input, butang hantar dan kawasan paparan mesej).

---

Langkah 4: Menjalankan Aplikasi

Jalankan aplikasi menggunakan:

<code class="language-bash">npm run dev</code>

Akses http://localhost:3000 dalam penyemak imbas anda. Membuka berbilang tab penyemak imbas akan menunjukkan kemas kini mesej masa nyata merentas semua tab.

---

Kesimpulan

Anda telah berjaya membina aplikasi sembang masa nyata menggunakan Next.js dan WebSockets! Socket.IO memudahkan proses, menyediakan fungsi yang mudah digunakan untuk pengurusan sambungan dan penyiaran mesej. Asas ini boleh dikembangkan dengan ciri seperti pengesahan pengguna, pemesejan peribadi dan penyimpanan mesej berterusan menggunakan pangkalan data. Ini menunjukkan kuasa WebSockets dalam mencipta pengalaman pengguna yang dinamik dan responsif.

Atas ialah kandungan terperinci Membina aplikasi sembang masa nyata dengan Next.js dan WebSockets. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!