什么是SSE
SSE（Server-Sent Events）是一种用于实现服务器向客户端推送实时数据的技术。它基于 HTTP 协议，使用简单的文本格式传输数据，与 WebSocket 相比，SSE 更加轻量级，易于实现。
SSE的优点
- 实时性：SSE 可以在服务器端有新数据时立即推送到客户端，实现实时更新。
- 简单易用：SSE 的实现非常简单，只需要一个 HTTP 服务器和一些 JavaScript 代码就可以实现。
- 兼容性好：SSE 在现代浏览器中都有很好的支持，即使在老旧的浏览器中也可以使用 polyfill 库来实现。
如何使用SSE实现即时聊天室
服务端实现
在服务端，我们需要创建一个 HTTP 服务器，并向客户端发送 SSE 事件。下面是一个使用 Node.js 实现的简单的 SSE 服务器代码：
// javascriptcn.com 代码示例
const http = require('http');
http.createServer((req, res) => {
// 设置响应头
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// 向客户端发送 SSE 事件
setInterval(() => {
res.write(`data: ${Date.now()}\n\n`);
}, 1000);
}).listen(3000);上面的代码中，我们设置了响应头，告诉客户端返回的数据是 SSE 事件流，并使用 setInterval 定时向客户端发送事件。
客户端实现
在客户端，我们需要使用 JavaScript 代码来接收 SSE 事件，并将事件数据显示在页面上。下面是一个简单的聊天室页面的 HTML 和 JavaScript 代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊天室</title>
</head>
<body>
<div id="messages"></div>
<form>
<input type="text" id="message">
<button type="submit">发送</button>
</form>
<script>
const messages = document.getElementById('messages');
const source = new EventSource('/sse');
source.addEventListener('message', event => {
const message = document.createElement('div');
message.textContent = event.data;
messages.appendChild(message);
});
const form = document.querySelector('form');
const input = document.getElementById('message');
form.addEventListener('submit', event => {
event.preventDefault();
const message = input.value;
input.value = '';
fetch('/message', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({message})
});
});
</script>
</body>
</html>上面的代码中，我们使用 EventSource 对象来接收 SSE 事件，使用 fetch 函数向服务器发送聊天消息。当接收到新的聊天消息时，我们使用 JavaScript 动态创建一个 div 元素，并将消息显示在页面上。
总结
通过本文的介绍，我们了解了 SSE 技术的优点和如何使用 SSE 实现即时聊天室。SSE 技术不仅可以用于实现聊天室，还可以用于实时数据展示、实时监控等场景。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65787940d2f5e1655d2664e5