前端开发中，实时通信是一个非常重要的话题。随着互联网技术的不断发展，现在有很多实现实时通信的方式，比如 Websocket、Server-Sent Events 和长轮询等。本文将着重介绍 Server-Sent Events 和长轮询两种方式，并对它们的比较和适用场景进行分析。
Server-Sent Events
Server-Sent Events（SSE）是一种基于 HTTP 协议的实时通信方式。它通过一个持久化的 HTTP 连接，将服务器端的数据实时推送到客户端。SSE 的优点在于它的使用非常简单，而且兼容性也很好。只需要使用一个 EventSource 对象来建立连接，然后通过监听 message 事件来接收服务器端推送的数据。
下面是一个简单的 SSE 示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>SSE 示例</title>
</head>
<body>
<div id="messages"></div>
<script>
var source = new EventSource('/stream');
source.addEventListener('message', function(event) {
var messages = document.getElementById('messages');
messages.innerHTML += event.data + '<br>';
});
</script>
</body>
</html>在服务器端，我们需要将数据以一定的格式发送给客户端。下面是一个 Node.js 的例子：
// www.javascriptcn.com code example
var http = require('http');
http.createServer(function(req, res) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
setInterval(function() {
res.write('data: ' + new Date().toString() + '\n\n');
}, 1000);
}).listen(3000);在这个例子中，我们使用了 Node.js 的 http 模块来创建一个服务器。当客户端连接到服务器时，我们设置响应头，告诉客户端这是一个 SSE 连接，并且不要缓存响应。然后我们使用 setInterval 定时向客户端发送数据。
长轮询
长轮询（Long Polling）是一种通过不断向服务器发送请求来实现实时通信的方式。客户端向服务器发送一个请求，服务器在接收到请求后不会立即返回响应，而是等待一段时间。如果在这段时间内有数据更新，服务器就会立即返回响应，并将新的数据一起返回。如果在这段时间内没有数据更新，服务器就会返回一个空响应，客户端再次发送请求，如此循环。
长轮询的优点在于它可以实现实时通信，而且也比较容易实现。但是它的缺点也很明显，就是会产生很多无效的请求，从而增加了服务器的负担。而且长轮询的实现也比较麻烦，需要考虑很多细节。
下面是一个简单的长轮询示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>长轮询示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="messages"></div>
<script>
function longPolling() {
$.ajax({
url: '/poll',
method: 'GET',
dataType: 'json',
success: function(data) {
var messages = document.getElementById('messages');
messages.innerHTML += data.message + '<br>';
longPolling();
},
error: function() {
setTimeout(function() {
longPolling();
}, 1000);
}
});
}
longPolling();
</script>
</body>
</html>在服务器端，我们需要监听客户端的请求，并根据是否有数据更新来返回响应。下面是一个 Node.js 的例子：
// www.javascriptcn.com code example
var http = require('http');
var lastMessage = '';
http.createServer(function(req, res) {
if (req.url === '/poll') {
if (lastMessage) {
res.writeHead(200, {
'Content-Type': 'application/json'
});
res.end(JSON.stringify({
message: lastMessage
}));
lastMessage = '';
} else {
setTimeout(function() {
res.writeHead(204);
res.end();
}, 10000);
}
} else {
res.writeHead(200, {
'Content-Type': 'text/html'
});
res.end('<script src="/client.js"></script>');
}
}).listen(3000);
setInterval(function() {
lastMessage = new Date().toString();
}, 5000);在这个例子中，我们使用了 Node.js 的 http 模块来创建一个服务器。当客户端发送 /poll 请求时，如果有数据更新，我们就返回响应，并将新的数据一起返回。如果没有数据更新，我们就设置一个定时器，等待一段时间后再返回响应。当客户端发送其他请求时，我们就返回一个包含长轮询代码的 HTML 页面。
比较和适用场景分析
Server-Sent Events 和长轮询都可以实现实时通信，但是它们的实现方式和适用场景是不同的。
Server-Sent Events 的优点在于它的使用非常简单，而且兼容性也很好。它适用于需要实时推送数据的场景，比如在线聊天、实时数据监控等。
长轮询的优点在于它可以实现实时通信，而且也比较容易实现。它适用于需要实时获取数据更新的场景，比如新闻资讯、股票行情等。
当然，这并不是绝对的，具体的实现方式和适用场景还要根据具体的业务需求来确定。
结语
本文介绍了 Server-Sent Events 和长轮询两种实现实时通信的方式，并对它们的比较和适用场景进行了分析。希望本文能够对你理解实时通信有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/678b2788881faa801fa53405