HTTP：实时消息推送

Love The Way You Lie 2022-03-26 13:22 417阅读 0赞

# 1、什么叫做消息推送 #

传统互联网上数据交互一般有poll和push两种方式。

*  poll典型使用场景是浏览网页，是用户主动发起请求，向服务器获取数据；
 *  push刚好相反，通过服务器直接发送数据给客户端，用户被动接受消息，类似于更加及时的短信。

PUSH是互联网上内容提供者和内容定制方之间的一种通信机制，利用在服务器端的程序把数据源源不断地推向客户端，大大提高客户机和服务器之间的交互性能。

# 2、有哪些可以实现web消息推送的技术 #

*  短轮询(polling)：Ajax隔一段事件就去查询服务器， 服务端处理后返回响应
    
     *  优点：服务端逻辑简单；
     *  缺点：其中大多数请求可能是无效请求，在大量用户轮询很频繁的情况下对服务器的压力很大，实时性也不高
     *  应用：并发用户量少，而且要求消息地实时性不高，一般很少采用  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]
 *  长轮询（long-polling）：客户端向服务器发送Ajax请求，服务器将请求挂起\[不返回响应\]，直到有新消息或者超时，异常才返回消息并关闭连接，客户端处理完响应消息之后再向服务器发送新地请求 。为了节约资源，一次长轮询的周期时间最好在 10s ~ 25s左右
    
     *  优点：实时性高，无消息的情况下不会进行频繁的请求；\[数据更新后，可以立即推送，仅在数据更新时，才有推送\]
     *  缺点：服务器维持着连接期间会消耗资源；  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]
 *  基于 iframe 及 htmlfile 的流（streaming）方式：这种是基于 iframe 或者 script实现的
    
     *  主要原理：在主页面中插入一个隐藏的 iframe(script)，然后这个 iframe(script)的 src属性指向服务端获取数据的接口，因为是iframe(script)是隐藏的，而且iframe(script)的 刷新也不会导致主页面刷新，所以可以为这个iframe(script)设置一个定时器，让其每隔一段时间就朝服务器发送一次请求，这样就能获得服务端的最新数据了。
     *  缺点：服务器维持着长连接期会消耗资源；
 *  插件提供 socket 方式：比如利用 Flash XMLSocket，Java Applet 套接口，Activex 包装的 socket。
    
     *  优点：原生 socket 的支持，和 PC 端和移动端的实现方式相似；
     *  缺点：浏览器端需要装相应的插件；
 *  WebSocket：是 HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。
    
     *  优点：更好的节省服务器资源和带宽并达到实时通讯；基于TCP协议之上的高层协议，无需开发者关心通讯细节

现在基本上都是采用websocket协议了

# 3、webSocket #

> 为什么需要websocket

websocket的出现，是为了弥补http的不足

*  HTTP 协议有一个缺陷：通信只能由客户端发起。 这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。

*  HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术，使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。
    
     *  浏览器向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
     *  因为 WebSocket 连接本质上就是一个 TCP 连接，所以在数据传输的稳定性和数据传输量的大小方面，和轮询以及 Comet 技术比较，具有很大的性能优势。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]

> websocket的特点

*  **服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。**
 *  建立在 TCP 协议之上，服务器端的实现比较容易。
 *  与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
 *  数据格式比较轻量，性能开销小，通信高效。
 *  可以发送文本，也可以发送二进制数据。
 *  没有同源限制，客户端可以与任意服务器通信。
 *  协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。比如`ws://example.com:80/some/path`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]

> WebSocket 协议本质上是一个基于 TCP 协议。

*  为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息 ”Upgrade: WebSocket” 表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息 switching返回给客户端， 意思允许客户端向websocket协议转换
 *  接下来， 客户端可以向服务端发起一个基于websocket协议的消息，服务端也可以主动向客户端发起websocket协议的消息，websocket协议里面通讯的单位就叫message。
 *  完成这个协商之后，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
 *  需要注意的问题是，除了安全和性能以外，服务端只管往 socket 里面写数据就可以了，WebSocket 的通信数据全部是以 ”\\x00″ 开头以 ”\\xFF” 结尾的，无论是服务端发出的数据还是客户端发送的数据都遵从这个格式，唯一不同的是客户端的 WebSocket 对象能够自动将头尾去除，获得主体数据，这就省却了在客户端处理原始数据的必要，而且 WebSocket 通信的消息总是 UTF-8 格式的。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 4]

https://blog.csdn.net/Wing\_93/article/details/81587809  
http://www.qdker.com/archives/349.html  
https://blog.csdn.net/DeepLies/article/details/77726823  
https://www.cnblogs.com/duanxz/p/5194438.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]: /images/20220326/84a8c2186c734556a8d9b06c4125cf47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]: /images/20220326/06b159fe1ba640708bbf169e7e1e17f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]: /images/20220326/2f99c77a81e941158d41f214d71781b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]: /images/20220326/a37e13b9bb404579b14ddd30aa512315.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 4]: /images/20220326/0e16e65b2731464fb260b167edf410b9.png