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

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來監聽伺服器發送的訊息。