Sembang dibina oleh nodejs sse-Soal Jawab bahagian hadapan-php.cn

Sembang dibina oleh nodejs sse

WBOY

Lepaskan： 2023-05-23 19:07:36

asal

686 orang telah melayarinya

Bilik sembang yang dibina oleh Node.js SSE

Dengan populariti dan perkembangan Internet, bilik sembang telah menjadi platform penting untuk komunikasi dalam talian harian orang ramai. Sebagai bahasa JavaScript sisi pelayan berdasarkan model I/O dipacu peristiwa dan tidak menyekat, Node.js boleh meningkatkan prestasi dan responsif aplikasi dengan banyak, dan oleh itu telah menjadi salah satu teknologi pilihan untuk banyak aplikasi web.

Artikel ini akan memperkenalkan cara menggunakan teknologi Node.js dan SSE (Server-Sent Events) untuk membina ruang sembang ringkas supaya pengguna boleh menerima mesej sembang dalam masa nyata.

Node.js dan SSE

SSE ialah teknologi yang ditakrifkan dalam HTML5 yang membolehkan pelayan menghantar strim acara kepada pelanggan dan pelanggan boleh lulus API EventSource untuk menerima aliran acara ini. Dalam aliran acara ini, pelayan boleh menghantar mesej kepada klien dalam masa nyata, dan klien juga boleh berinteraksi dengan menghantar data ke pelayan.

Node.js boleh mencipta pelayan web dengan mudah dan ia mempunyai modul HTTP terbina dalam yang boleh digunakan untuk mengendalikan permintaan dan respons HTTP. Melalui modul ini, kita boleh melaksanakan teknologi SSE dengan mudah.

Bina bilik sembang

2.1 Cipta pelayan

Pertama, kita perlu mencipta projek Node.js. Dalam direktori akar projek, kami mencipta fail server.js dan memperkenalkan modul http.

const http = require('http');

Salin selepas log masuk

Kemudian, kita perlu mencipta pelayan HTTP dan mendengar pada port 8080.

const server = http.createServer((req, res) => {
  // 代码稍后补充
});
server.listen(8080);

Salin selepas log masuk

2.2 Pelaksanaan Teknologi SSE

Kami perlu mencipta laluan pada pelayan untuk menghantar aliran acara. Dalam laluan ini, kami akan menggunakan API EventSource untuk menghantar mesej kepada pelanggan.

const SSE_SEND_CONTENT_TYPE = 'text/event-stream; charset=utf-8';
const SSE_SEND_DATA_PREFIX = 'data: ';
const SSE_SEND_EVENT_PREFIX = 'event: ';
const SSE_SEND_ID_PREFIX = 'id: ';
const SSE_SEND_RETRY_PREFIX = 'retry: ';

const headers = {
    'Content-Type': SSE_SEND_CONTENT_TYPE,
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
};

server.on('request', (req, res) => {
    if (req.method === 'GET' && req.url === '/chat') {
        res.writeHead(200, headers);

        const clientId = Date.now();
        const sseStream = new ServerSentEventsStream(clientId, res);
        clients.set(clientId, sseStream);

        req.on('close', () => {
            clients.delete(clientId);
            sseStream.close();
        });
    } else {
        res.writeHead(404);
        res.end();
    }
});

class ServerSentEventsStream {
    constructor(clientId, response) {
        this.clientId = clientId;
        this.response = response;
        this.closed = false;
    }

    sendEvent(event, data) {
        if (!this.closed) {
            const message = `${SSE_SEND_EVENT_PREFIX} ${event}
${SSE_SEND_DATA_PREFIX}${JSON.stringify(data)}

`;
            this.response.write(message);
        }
    }

    close() {
        if (!this.closed) {
            this.closed = true;
            this.response.end();
        }
    }
}

Salin selepas log masuk

2.3 Melaksanakan fungsi bilik sembang

Selepas melengkapkan langkah di atas, kami kini boleh melaksanakan teknologi asas SSE pada pelayan. Seterusnya, kita perlu melaksanakan fungsi sembang pada klien.

Kami perlu mencipta halaman HTML pada klien untuk memaparkan maklumat sembang. Dalam halaman ini, kami akan menggunakan JavaScript untuk menghantar mesej sembang dan menerima mesej yang dikembalikan oleh pelayan. Dan, kami juga perlu menggunakan API EventSource untuk mendengar mesej yang dihantar oleh pelayan.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chatroom</title>
</head>
<body>
  <form id="chat-form">
    <input type="text" id="msg-input" placeholder="Enter message">
    <button type="submit" id="send-button">Send</button>
  </form>
  <ul id="chat-list"></ul>
  <script>
    const chatList = document.getElementById('chat-list');
    const chatForm = document.getElementById('chat-form');
    const msgInput = document.getElementById('msg-input');
    const sendButton = document.getElementById('send-button');

    const eventSource = new EventSource('/chat');
    eventSource.onmessage = function(event) {
      const chatMsg = JSON.parse(event.data);
      const chatItem = document.createElement('li');
      chatItem.innerText = `${chatMsg.sender}: ${chatMsg.msg}`;
      chatList.appendChild(chatItem);
    }

    chatForm.addEventListener('submit', function(event) {
      event.preventDefault();
      const formData = new FormData(chatForm);
      fetch('/chat', { method: 'POST', body: formData });
      msgInput.value = '';
    });
  </script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta borang yang membolehkan pengguna memasukkan maklumat sembang. Apabila pengguna menyerahkan borang ini, kami akan menggunakan API pengambilan untuk menghantar mesej pengguna ke pelayan.

Pada masa yang sama, kami juga mendengar semua mesej yang dikembalikan daripada pelayan. Apabila pelayan menghantar mesej sembang, kami menambah mesej itu ke senarai sembang yang telah dibuat.

Ringkasan

Artikel ini memperkenalkan proses penggunaan teknologi Node.js dan SSE untuk mencipta ruang sembang ringkas. Melalui contoh bilik sembang ini, kami juga boleh mempelajari cara menggunakan teknologi SSE, serta kaedah kerjasama dan kelebihan JavaScript dan Node.js, yang menyediakan rujukan yang baik untuk kerja pembangunan web kami yang seterusnya.

Atas ialah kandungan terperinci Sembang dibina oleh nodejs sse. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!