手摸手教你使用WebSocket其实WebSocket也不难

在本篇文章之前,很多人听说过,没见过,没用过,以为是个很高大上的技术,实际上这个技术并不神秘,可以说是个很容易就能掌握的技术,希望在看完本文之后,马上把文中的栗子拿出来自己试一试,实践出真知。

`WebSocket`解决了什么问题:

客户端(浏览器)和服务器端进行通信,只能由客户端发起请求,才能进行通信,服务器端无法主动向客户端推送信息。

当出现类似体育赛事、聊天室、实时位置之类的场景时,客户端要获取服务器端的变化,就只能通过轮询(定时请求)来了解服务器端有没有新的信息变化。

轮询效率低,非常浪费资源(需要不断发送请求,不停链接服务器)

WebSocket的出现,让服务器端可以主动向服务器端发送信息,使得浏览器具备了实时双向通信的能力,这就是解决的问题

一个超简单的栗子:

新建一个文件,将本栗子找个地方跑一下试试,即可轻松入门:

上述栗子中的接口地址出自:WebSocket 在线测试,在开发的时候也可以用于测试后端给的地址是否可用。

webSocket的class类:

当项目中很多地方使用WebSocket,把它封成一个class类,是更好的选择。

下面的栗子,做了非常详细的注释,建个html文件也可直接使用,websocket的常用都放进去了。

下方注释的代码,先不用管,涉及到心跳机制,用于保持WebSocket连接的

栗子里面我直接写在了一起,可以把放在一个js文件里面,出去,然后在需要用的地方再进来,把参数传进去就可以用了。

WebSocket不稳定

WebSocket并不稳定,在使用一段时间后,可能会断开连接,貌似至今没有一个为何会断开连接的公论,所以我们需要让WebSocket保持连接状态,这里推荐两种方法。

WebSocket设置变量,判断是否手动关闭连接:

类中就是用的这种方式:设置一个变量,在webSocket关闭/报错的回调中,判断是不是手动关闭的,如果不是的话,就重新连接,这样做的优缺点如下:

优点:请求较少(相对于心跳连接),易设置。

缺点:可能会导致丢失数据,在断开重连的这段时间中,恰好双方正在通信。

WebSocket心跳机制:

因为第一种方案的缺点,并且可能会有其他一些未知情况导致断开连接而没有触发Error或Close事件。这样就导致实际连接已经断开了,而客户端和服务端却不知道,还在傻傻的等着消息来。

然后聪明的程序猿们想出了一种叫做心跳机制的解决方法:

客户端就像心跳一样每隔固定的时间发送一次,来告诉服务器,我还活着,而服务器也会返回,来告诉客户端,服务器还活着。

具体的实现方法,在上面的注释中,将其打开,即可看到效果

关于WebSocket

怕一开始就堆太多文字性的内容,把各位吓跑了,现在大家已经会用了,我们再回头来看看WebSocket的其他知识点。

WebSocket的当前状态:`WebSocket.readyState`

下面是的四个值(四种状态):

0: 表示正在连接

1: 表示连接成功,可以通信了

2: 表示连接正在关闭

3: 表示连接已经关闭,或者打开连接失败

我们可以利用当前状态来做一些事情,比如上面栗子中当WebSocket链接成功后,才允许客户端发送。

`WebSocket`还可以发送/接收 二进制数据

这里我也没有试过,我是看阮一峰老师的WebSocket教程才知道有这么个东西,有兴趣的可以再去谷歌,大家知道一下就可以。

二进制数据包括:对象和对象,所以我们需要分开来处理。

如果你要发送的二进制数据很大的话,如何判断发送完毕:

属性,表示还有多少字节的二进制数据没有发送出去:

上述栗子出自阮一峰老师的WebSocket教程

WebSocket的优点:

最后再吹一波WebSocket:

双向通信(一开始说的,也是最重要的一点)。

数据格式比较轻量,性能开销小,通信高效

协议控制的数据包头部较小,而HTTP协议每次通信都需要携带完整的头部

更好的二进制支持

没有同源限制,客户端可以与任意服务器通信

与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器

结语

看了本文之后,如果还是有点迷糊的话,一定要把文中的两个栗子,新建个html文件跑起来,自己鼓捣鼓捣一下。不然读多少博客/教程都没有用,实践才出真知,切勿纸上谈兵。

希望看完的朋友可以点个喜欢/关注,您的支持是对我最大的鼓励。

以上2018.10.22

参考资料:

WebSocket 教程

理解WebSocket心跳及重连机制

WebSocket协议:5分钟从入门到精通

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20181024G0C6AJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券