随着 Web 技术的发展，越来越多的应用场景需要实时通信功能。在前端开发中，SSE（Server-Sent Events）和 WebSocket 是两种常用的实现实时通信的技术。虽然它们都可以实现实时通信，但是它们之间还是存在一些不同之处的。
SSE
SSE 是一种基于 HTTP 的单向通信技术。它允许服务器向客户端发送事件，而客户端则通过 EventSource API 来监听服务器端发送的事件。SSE 使用简单，不需要像 WebSocket 那样建立双向通信，只需要一个 HTTP 连接就可以了。以下是一个简单的 SSE 示例代码：
const eventSource = new EventSource('/sse'); // 创建 EventSource 对象
eventSource.onmessage = (event) => { // 监听服务器发送的消息
console.log(event.data);
};服务器端代码如下：
// www.javascriptcn.com code example
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream', // 设置响应头
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(() => {
res.write(`data: ${new Date()}\n\n`); // 发送数据
}, 1000);
}).listen(3000);上面的例子中，我们创建了一个 EventSource 对象，然后通过 onmessage 方法来监听服务器发送的消息。服务器端则通过 setInterval 方法每隔一秒钟向客户端发送一个事件。
WebSocket
WebSocket 是一种基于 TCP 的双向通信技术。它使用 WebSocket 协议来实现双向通信，可以在客户端和服务器之间实现实时的双向数据传输。WebSocket 的通信过程是通过一个握手过程来建立连接，然后进行数据传输。以下是一个简单的 WebSocket 示例代码：
const socket = new WebSocket('ws://localhost:3000'); // 创建 WebSocket 对象
socket.onmessage = (event) => { // 监听服务器发送的消息
console.log(event.data);
};
socket.send('Hello WebSocket!'); // 发送消息服务器端代码如下：
// www.javascriptcn.com code example
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', (ws) => {
ws.send('Hello WebSocket!'); // 发送消息
ws.on('message', (message) => { // 监听客户端发送的消息
console.log(message);
});
});上面的例子中，我们创建了一个 WebSocket 对象，然后通过 onmessage 方法来监听服务器发送的消息。服务器端则通过监听 connection 事件来建立连接，并通过 send 方法向客户端发送消息。
不同之处
虽然 SSE 和 WebSocket 都可以实现实时通信，但是它们之间还是存在一些不同之处的。下面是一些不同之处：
- SSE 是基于 HTTP 的单向通信技术，而 WebSocket 是基于 TCP 的双向通信技术。
- SSE 不需要像 WebSocket 那样建立双向通信，只需要一个 HTTP 连接就可以了。
- SSE 可以通过 EventSource API 来监听服务器端发送的事件，而 WebSocket 则使用 WebSocket API 来进行数据传输。
- SSE 的通信过程是通过一个长轮询的方式来实现的，而 WebSocket 则通过一个握手过程来建立连接。
学习意义
SSE 和 WebSocket 都是实现实时通信的常用技术，对于前端开发人员来说，掌握它们的原理和使用方法是非常重要的。通过学习 SSE 和 WebSocket，我们可以更好地实现实时通信功能，提高用户体验。
指导意义
在实际开发中，我们需要根据具体的业务需求来选择使用 SSE 还是 WebSocket。如果只需要单向通信，则可以选择 SSE；如果需要双向通信，则需要选择 WebSocket。另外，在使用 SSE 和 WebSocket 时，我们需要注意它们的兼容性和性能问题，尽可能地减少不必要的资源消耗。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0f6b1a941bf713421530f