nodejs sse搭建的聊天-前端問答-PHP中文網

nodejs sse搭建的聊天

WBOY

發布： 2023-05-23 19:07:36

原創

686 人瀏覽過

Node.js SSE搭建的聊天室

隨著網路的普及和發展，聊天室已經成為了人們日常線上交流的一個重要平台。而Node.js作為一門基於事件驅動和非阻塞I/O模型的伺服器端JavaScript語言，可以大大提高應用程式的效能和回應能力，因此也成為了許多Web應用的首選技術之一。

本文將介紹如何利用Node.js和SSE(Server-Sent Events)技術來建立一個簡單的聊天室，使用戶可以即時收到聊天訊息。

Node.js和SSE

SSE是HTML5中定義的技術，可以讓伺服器傳送事件流，而客戶端可以透過EventSource API來接收這些事件流。在這個事件流中，伺服器可以即時地傳送訊息給客戶端，而客戶端也可以透過發送資料給伺服器來互動。

Node.js可以輕鬆地建立一個網路伺服器，而且它內建了一個HTTP模組，可以用來處理HTTP請求和回應。透過這個模組，我們就可以很容易實現SSE技術了。

建立聊天室

2.1 建立伺服器

#首先，我們需要建立一個Node.js的專案。在專案的根目錄下，我們來建立一個server.js文件，並且引入http模組。

const http = require('http');

登入後複製

然後，我們需要建立一個HTTP伺服器，並且監聽8080連接埠。

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

登入後複製

2.2 SSE技術實作

我們需要在伺服器上建立一個用於發送事件流的路由。在這個路由中，我們將使用EventSource API向客戶端發送訊息。

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();
        }
    }
}

登入後複製

2.3 實作聊天室功能

完成上面的步驟後，我們現在已經可以在伺服器上實現基本的SSE技術了。接下來，我們需要在客戶端上實作聊天功能。

我們需要在客戶端上建立一個HTML頁面，用來顯示聊天資訊。在這個頁面中，我們將使用JavaScript來傳送聊天訊息和接收伺服器傳回的訊息。並且，我們還需要使用EventSource API來監聽伺服器發送的訊息。

<!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>

登入後複製

在上面的程式碼中，我們建立了一個表單，讓使用者可以輸入聊天資訊。當使用者提交這個表單時，我們將使用fetch API來將使用者的消息傳送到伺服器。

同時，我們也監聽了從伺服器傳回的所有訊息。當伺服器發送一條聊天訊息時，我們就將這則訊息新增到已經建立的聊天清單中。