前言
在前端开发过程中，我们经常需要向后端服务器发送请求获取数据或推送消息。在推送消息方面，现在常见的方式有 WebSocket、Server-Sent Events、Long Polling 三种，本文将通过详细的介绍和示例代码，帮助读者更好地理解和掌握这三种方式。
一、WebSocket
WebSocket 是一种基于 TCP 协议进行全双工通信的协议，它使得客户端和服务器可以在同一个连接中进行实时通信。在使用 WebSocket 推送消息时，服务器可以直接将消息推送给客户端，而不用等待客户端主动发起请求。
使用 WebSocket 推送消息的步骤：
1.客户端发起 WebSocket 连接
var ws = new WebSocket('ws://localhost:8080');
2.服务器与客户端建立连接后，可以发送消息给客户端
ws.send('Hello World!');
3.客户端接收到服务器推送的消息，可以回调处理函数进行业务处理
ws.onmessage = function (event) {console.log(event.data);}
WebSocket 的优点在于实时性强、保持连接、可靠性高，缺点是需要浏览器和服务端都支持。
二、Server-Sent Events
Server-Sent Events (SSE) 是一种类似于 WebSocket 的实时通信协议，但它只能从服务器向客户端发送数据，不能进行双向通信。在使用 SSE 推送消息时，服务器会向客户端发送一个无限制的持续流，并且在流中不断地发送消息。
使用 SSE 推送消息的步骤：
1.客户端发起 SSE 连接
var sse = new EventSource('http://localhost:8080/sse');
2.服务器在连接后，通过流不断发送消息给客户端
res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' });
res.write('data: Hello World\n\n');
3.客户端接收到服务器推送的消息，可以回调处理函数进行业务处理
sse.onmessage = function (event) {console.log(event.data);}
SSE 的优点在于实时性强，缺点是只能从服务器向客户端发送数据，不能进行双向通信。
三、Long Polling
Long Polling 是一种将客户端请求变为阻塞状态的技术，即客户端发起请求后，服务端一直保持连接打开，直到有新数据时才返回响应。在使用 Long Polling 推送消息时，客户端需要不断地向服务器发起请求，服务器在返回响应前会一直坚挺到有新数据或超时才返回响应。
使用 Long Polling 推送消息的步骤：
1.客户端发起 Long Polling 请求
function longPolling() {
$.ajax({
url: 'http://localhost:8080/polling',
type: 'get',
success: function(data) {
console.log('receive message: ' + data);
longPolling(); //递归调用
}});
}
2.服务器接收到客户端请求后，先阻塞一段时间等待有新数据时才返回响应
function polling(req, res) {
setTimeout(function() {
res.send('Hello World!');}, 5000);
}
3.客户端接收到服务器推送的消息后，再次发起 Long Polling 请求等待下一次数据的到来。
Long Polling 的优点在于可以兼容老版本浏览器，缺点是效率较低且容易出现性能和安全问题。
结论
WebSocket、Server-Sent Events、Long Polling 三种方式都可以用于实现推送服务器端消息的功能，具体使用哪种方式需要根据业务场景和需求进行选择。例如需要进行双向通信时，最好选择 WebSocket；需要快速响应时，可以选择 SSE；需要兼容老版本浏览器时，可以选择 Long Polling。
总之，在推送服务器端消息时，需要根据具体场景和需求进行选择，综合考虑优缺点和性能差异等因素，以达到提高应用性能并优化用户体验的目的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66f752d3c5c563ced595d0e7