WebSocket (4)

88 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第23天,点击查看活动详情

前面基本上把 WebSocket 的概念、与 Http 的相同、不同之处以及 Socket 都做了简单的梳理,今天突然想到虽然目前是出现并采用了 WebSocket 这种技术,在 WebSocket 技术还没有的时候,Web 端实现即时通讯的方法是什么呢......

定期轮询

客户端按照某个时间间隔不断地向服务端发送请求,请求服务端的最新数据然后更新客户端显示。这种方式实际上浪费了大量流量并且对服务端造成了很大压力。

SSE (Server-Sent Event,服务端推送事件)

SSE (Server-Sent Event,服务端推送事件) 是一种允许服务端向客户端推送新数据的 HTML5 技术。与由客户端每隔几秒从服务端轮询拉取新数据相比,这是一种更优的解决方案。

相较于 WebSocket,它也能从服务端向客户端推送数据。WebSocket 能做的,SSE 也能做,反之亦然,但在完成某些任务方面,它们各有千秋。

Comet 技术

Comet 并不是一种新的通信技术,它是在客户端请求服务端这个模式上的一种 hack 技术,通常来讲,它主要分为以下两种做法:

  1. 基于长轮询的服务端推送技术

具体来讲,就是客户端首先给服务端发送一个请求,服务端收到该请求之后如果数据没有更新则并不立即返回,服务端阻塞请求的返回,直到数据发生了更新或者发生了连接超时,服务端返回数据之后客户端再次发送同样的请求。

  1. 基于流式数据传输的长连接

通常的做法是在页面中嵌入一个隐藏的 iframe,然后让这个 iframe 的 src 属性指向我们请求的一个服务端地址,并且为了数据更新,我们将页面上数据更新操作封装为一个 js 函数,将函数名当做参数传递到这个地址当中。

服务端收到请求后解析地址取出参数 (客户端 js 函数调用名),每当有数据更新的时候,返回对客户端函数的调用,并且将要跟新的数据以 js 函数的参数填入到返回内容当中,例如返回“”这样一个字符串,意味着以 data 为参数调用客户端 update 函数进行客户端 view 更新。

Comet 技术是针对客户端请求服务器响应模型而模拟出的一个服务端推送数据实时更新技术。而且由于浏览器兼容性不能够广泛应用。

并不是说这些技术没有用,就算 WebSocket 已经作为规范被提出并实现,但是对于老式浏览器,我们依然需要将它降级为以上方式来实现实时交互和服务端数据推送。

简单整理了一些 WebSocket 技术出现之前 Web 端实现即时通讯的方法,还是那句话,理解......
希望本文能够帮到你,如有错误,望指正!
我向你敬礼啊,Salute!