简介
近年来，实时聊天应用程序在移动和Web应用程序中越来越受欢迎。与传统的聊天形式不同，实时聊天应用程序通过实时更新和同步消息，使得用户可以快速响应和互动。
在前端领域，Node.js和Server-Sent Events（SSE）提供了一种强大的技术来处理实时聊天应用程序。Node.js是一个基于事件驱动的服务器端JavaScript运行时环境，可以非常轻松地创建并进行即时通讯。SSE则是一种支持服务器主动推送消息的Web API，其中就包括了一些重要的事件类接口，如open、message、error，用于在浏览器与服务器之间双向通讯。
本篇文章将介绍如何使用Node.js和SSE来构建实时聊天应用程序，从代码层面详细地讲解实时通讯的机制和实现方式。
实时聊天应用程序实现流程
第一步: 创建Node.js服务器应用程序
Node.js提供了一个HTTP服务器模块，可以轻松地创建一个Web服务器应用程序。首先，需要在本地计算机上安装Node.js，然后在终端中运行以下命令:
npm install http
接着，打开编辑器，并新建一个server.js文件。代码示例如下：
// javascriptcn.com 代码示例
const http = require('http');
const server = http.createServer((req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.write('\n');
res.write(`event: welcome\n`);
res.write(`data: Welcome to the chat room\n\n`);
});
server.listen(3000, () => {
console.log('Server running on port 3000');
});代码中，createServer() 方法创建了一个新的 HTTP 服务器，并设置监听的地址和端口。
其中，也设置了响应头 Content-Type 为 text/event-stream 和 Cache-Control 为 no-cache，这是 Server-Sent Events 对于浏览器的约定。
最后，通过 write() 方法向客户端输出 SSE 事件。在第一次连接到服务器时，发送欢迎信息给客户端.
第二步: 创建HTML页面
首先，需要在一个HTML页面中嵌入JavaScript脚本，并创建用于显示聊天消息的DOM元素。以下是一个简单的HTML页面代码：
// javascriptcn.com 代码示例
<!doctype html>
<html>
<head>
<title>Real-time Chat Application</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Real-time chat application</h1>
<hr>
<div id="chat-area"></div>
<form action="" onsubmit="return sendMsg()">
<input type="text" id="message" placeholder="Enter message here..." autofocus>
<button type="submit">Send</button>
</form>
<script src="/js/app.js"></script>
</body>
</html>第三步: 使用Server-Sent Events与Node.js服务器通讯
接着，需要在客户端JavaScript脚本中创建一个事件流对象，并从服务器接收实时消息。以下是一个简单的客户端脚本代码：
// javascriptcn.com 代码示例
const chatArea = document.getElementById('chat-area');
const message = document.getElementById('message');
const evtSource = new EventSource('/events');
evtSource.addEventListener('welcome', function(e) {
const welcomeMsg = document.createElement('p');
welcomeMsg.innerHTML = e.data;
chatArea.appendChild(welcomeMsg);
});
evtSource.addEventListener('message', function(e) {
const chatMsg = document.createElement('p');
chatMsg.innerHTML = e.data;
chatArea.appendChild(chatMsg);
});
function sendMsg() {
evtSource.close();
evtSource = new EventSource('/events');
const msg = message.value;
let xhr = new XMLHttpRequest();
xhr.open('POST', '/message');
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(JSON.stringify({message:msg}));
message.value = '';
return false;
}代码中，首先通过EventSource()构造函数创建一个SSE服务器连接，然后使用addEventListener()方法来监听来自服务器的消息。
在这个示例中，我们对 welcome 和 message 两种事件进行监听，当从服务器上接收到来自特定事件时，我们将创建一个HTML文本节点，并附加到聊天消息区域的DOM元素树上进行显示。
最后在 sendMsg() 函数中，使用 XMLHttpRequest 发送 POST 请求。
第四步: 处理客户端发送的数据
在服务器端代码中添加代码用于接收并处理客户端发送的消息。以下是一个简单的服务器端代码：
// javascriptcn.com 代码示例
const http = require('http');
const server = http.createServer((req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.write('\n');
res.write(`event: welcome\n`);
res.write(`data: Welcome to the chat room\n\n`);
req.on('data', (chunk) => {
const msgObj = JSON.parse(chunk);
res.write(`event: message\n`);
res.write(`data: ${msgObj.message}\n\n`);
});
});
server.listen(3000, () => {
console.log('Server running on port 3000');
});代码中，使用请求对象 req.on() 监听客户端发送的数据。一旦服务器收到这些数据，就会将其解析为JSON对象，并创建新的SSE事件。
在本例中，将使用名为“message”的SSE事件，用于在客户端显示聊天消息。
总结
这篇文章介绍了如何使用Node.js和Server-Sent Events来实现一个实时的聊天应用程序。从服务器端和客户端代码层面详细讲解了实现过程，重点是 Server-Sent Events 的实现机制。
Server-Sent Events 是一种非常强大的Web API，在实现实时应用程序时可以大大提高效率和用户体验。尤其是在聊天应用程序中，使用Server-Sent Events可以通过实时更新和同步消息，使得用户可以快速响应和互动。
本篇文章为初学者提供了一份完整、详细的代码实例，可以帮助更多的Web开发者快速入门并实现实时聊天应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b2b8b7d4982a6eb581ed5