在 web 开发中，实时推送消息是非常常见的需求。传统的 HTTP 请求和响应模式并不能满足这种需求，因为 HTTP 请求是由客户端发起的，服务器只能被动地响应请求。但随着技术的不断发展，出现了一些新的技术来支持实时推送消息，比如长轮询、短轮询以及 websocket。本文就来总结一下这些实现方法的原理、优缺点以及实例代码。
1. 长轮询
长轮询是最早出现的实时推送技术，它的实现方式是客户端发起一个 HTTP 请求，如果服务器没有新的数据可以返回，那么服务器就不立即返回响应，而是保持请求连接打开，等待有新的数据需要推送时再返回响应。客户端收到响应后再立即发起下一个请求，这样就实现了持续的实时数据推送效果。
长轮询的优点是实现简单，只需要对请求和响应进行一些处理就可以了。但是它的缺点也很明显，每次请求都会占用服务器资源，如果客户端数量特别多，服务器容易被压垮。而且长轮询也会产生一些延迟，因为服务器需要等待新数据到来才能返回响应。
以下是一个简单的长轮询实现代码示例：
-- -------------------- ---- -------
-------- ------------- -
----- --- - --- -----------------
---------------------- - -- -- -
-- --------------- --- ------------------- -- ---------- --- ---- -
----- ---- - -----------------
-- ---------
--------------
- ---- -
------------- -- -
--------------
-- ------
-
--
--------------- ------------ ------
-----------
-2. 短轮询
短轮询是和长轮询相对的一种实现方式，也就是普通的 HTTP 请求和响应模式。客户端每隔一定时间就发送一次请求，询问服务器是否有新的数据，如果有就返回数据，否则就返回空响应。
短轮询的优点是实现简单，而且不需要占用服务器资源，因为客户端会控制请求的时间间隔。但是它的缺点也很明显，请求的频率太高会导致服务器压力大，而且响应的延迟也无法避免。
以下是一个简单的短轮询实现代码示例：
-- -------------------- ---- -------
-------- -------------- -
----- --- - --- -----------------
---------------------- - -- -- -
-- --------------- --- ------------------- -- ---------- --- ---- -
----- ---- - -----------------
-- ---------
-
--
--------------- ------------ ------
-----------
------------- -- -
---------------
-- ------
-3. websocket
websocket 是 HTML5 标准中定义的一种新协议，它实现了双向通信，并且可以在一个连接中保持长时间的持久性通信。websocket 的原理是客户端和服务器建立一个套接字连接，通过这个连接进行实时的数据传输。客户端和服务器都可以主动推送数据，所以它的实时性更高，而且也可以避免每次请求都建立连接的消耗。
websocket 的优点是实时性高，传输数据的开销小，而且可靠性好。但是它的缺点是实现相对复杂，而且需要服务器端进行对应的协议支持。
以下是一个简单的 websocket 实现代码示例：
-- -------------------- ---- ------- ----- ------ - --- --------------------------------- ------------- - -- -- - ---------------------- -- ---------------- - ------- -- - ----- ---- - ----------- -- --------- -- -------------- - -- -- - ---------------------- --
结论
长轮询、短轮询以及 websocket 都是实现实时推送的技术，它们各自有自己的优缺点，可以根据实际需求进行选择。长轮询和短轮询适合轻量级的实时推送需求，而 websocket 适合传输大量数据、有较高实时要求的场景。在实际应用中，也可以根据需求选择合适的方式进行混合使用，从而达到最佳效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a1347348841e9894d77fab