nodejs sse搭建的聊天

2023-05-23 19:01

短信预约 -IT技能 免费直播动态提醒

Node.js SSE搭建的聊天室

随着互联网的普及和发展，聊天室已经成为了人们日常在线交流的一个重要平台。而Node.js作为一门基于事件驱动和非阻塞I/O模型的服务器端JavaScript语言，可以极大地提高应用程序的性能和响应能力，因此也成为了很多Web应用的首选技术之一。

本文将介绍如何利用Node.js和SSE(Server-Sent Events)技术搭建一个简单的聊天室，使用户可以实时收到聊天信息。

Node.js和SSE

SSE是HTML5中定义的一项技术，可以让服务器向客户端发送事件流，而客户端则可以通过EventSource API来接收这些事件流。在这个事件流中，服务器可以实时地发送消息给客户端，而客户端也可以通过发送数据给服务器来交互。

Node.js可以轻松地创建一个Web服务器，并且它内置了一个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来将用户的消息发送到服务器。

同时，我们也监听了从服务器返回的所有消息。当服务器发送一条聊天信息时，我们就将这条消息添加到已经创建的聊天列表中。