您的位置:首页> HTML5教程> WebSocket

WebSocket 用法

2019-8-6 14:31| 作者: admin| 查看: 496| 评论: 0|来自: 蚂蚁部落

下面首先以实际需求来引出本文主角WebSocket,然后再分步介绍它的特点。

比如在页面指定区域会显示一天的气温变化,如果当前气温发生变化,服务器能够实时推送。

使用HTTP(s)协议也可以实现此效果,但是未免有些笨拙,或者说性能欠佳,下面分步进行分析。

一.HTTP(s)协议请求特点:

此协议想必大家都非常熟悉,几乎每天都会频繁使用,应该对其有较深的使用体会。

当需要了解页面最新更新内容,需要主动刷新页面获取,而不是服务器主动向页面推送。

原因分析如下:

(1).首先客户端发起请求,服务器端会给出一个响应,也就是说客户端是主动方。

(2).服务器端在HTTP(s)协议下很难有优秀的手段向客户端实时推送信息。

(3).并且HTTP(s)协议头部数据量很大,但需要的数据通常较小,非常浪费带宽。

二.HTTP(s)协议下的解决方案:

HTTP(s)协议下,实时获取服务器数据比较困难,且性能不佳。

下面分别介绍几个模拟实现服务器实时推送效果:

(1).轮询:

所谓的轮询,就是每隔指定时间,从客户端向服务器发送一次get请求。

如果服务器有新数据,自然会被发送到客户端,如果没有只能空手而回。

也就是说,无论服务器是否有新数据产生,都会按照指定频率向服务器发送请求。

大致可以模拟一下如下场景:

客户端:请问老板有货吗

服务器端:没有货

客户端:请问老板有货吗

服务器端:没有货

客户端:请问老板有货吗

服务器端:有货,给你

客户端:请问老板有货吗

服务器端:没有货

....

如此不断的重复下去,无穷尽也,看着都感觉累。

很明显上述方式性能不够好,因为无论服务器是否有数据产生,都会向服务器发送请求。

这完全是浪费性能,当然有一种比较完美的情况,那就是客户端明确知道服务器产生新数据的时间。

(2).长轮询:

从名称看,此方法与轮询带有很大的相似性,事实也是如此。

通常客户端会发送一个get请求,如果服务器端的确有新的数据,那么将数据发送回客户端。

如果服务器没有新的数据,此时服务器不会立马给客户端一个响应,而是保持此请求状态,在一定时间段内,如果服务器产生新的数据,那么就将此新数据发送回客户端,如果超过指定时间,那么此get请求状态会超时,然后客户端再发送一次新的请求,如此往复。

大致可以模拟一下如下场景:

客户端:请问老板有货吗,没货的话我先等一会,但是不能超过10分钟。

服务器端:没有货,你等等吧

客户端:等待状态中...

服务器端:久等了,终于来货了,请拿好(在10分钟之内)。

长轮询与轮询相比可以省却一些不必要的请求,所以性能更佳优良,但是HTTP自身的缺点是无法避免的。

三.WebSocket实现期待效果:

本文不会对WebSocket具体用法做介绍,文章底部会给出对应的文章。

下面介绍一下WebSocket的特点进行一下介绍:

(1).可以实现全双工通信,客户端可以主动发起请求,服务器也可以主动发送数据。

(2).采用的ws协议,如果进行加密则是wss协议,可以类比http与https。

(3).头部数据非常精简,采用轻量级数据格式,所以与HTTP协议头部相比,数据传输效率很高。

(4).ws协议传送数据的格式可以是字符串,也可以是二进制数据。

(5).与http协议不同,ws协议不受同源策略的限制。

(6).ws建立在TCP协议之上。

简单代码演示如下:

[JavaScript] 纯文本查看 复制代码
wss://echo.websocket.org

关于WebSocket更多内容可以参阅如下几篇文章:

(1).WebSocket握手一章节。

(2).WebSocket API一章节。

(3).WebSocket代码演示一章节。

1

鲜花

握手

雷人

路过
1

鸡蛋

刚表态过的朋友 (2 人)

上一篇:WebSocket 代码演示下一篇:WebSocket API

最新评论

返回顶部