Node.js SSE搭建的聊天室
隨著網路的普及和發展，聊天室已經成為了人們日常線上交流的一個重要平台。而Node.js作為一門基於事件驅動和非阻塞I/O模型的伺服器端JavaScript語言，可以大大提高應用程式的效能和回應能力，因此也成為了許多Web應用的首選技術之一。
本文將介紹如何利用Node.js和SSE(Server-Sent Events)技術來建立一個簡單的聊天室，使用戶可以即時收到聊天訊息。
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來將使用者的消息傳送到伺服器。
同時，我們也監聽了從伺服器傳回的所有訊息。當伺服器發送一條聊天訊息時，我們就將這則訊息新增到已經建立的聊天清單中。
本文介紹了使用Node.js和SSE技術來建立一個簡單的聊天室的過程。透過這個聊天室的例子，我們也可以了解SSE技術的使用方法，以及JavaScript與Node.js的協作方式與優勢，為我們後續的Web開發工作提供了很好的參考。
以上是nodejs sse搭建的聊天的詳細內容。更多資訊請關注PHP中文網其他相關文章！
