资讯专栏INFORMATION COLUMN

WebSocket协议 8 问

jaysun / 3186人阅读

摘要:是个不太干净协议。目前此协议的受众的也不仅仅是开发者。借助协议进行握手,握手成功后,就会变身为通道,从此与不再相见。如此操作,可以尽量避免普通请求被误认为协议。它包含四个事件和两个动作发送和关闭。有类似协议的帧格式,在此不做过多解释。

WebSocket是一种比较新的协议,它是伴随着html5规范而生的,虽然还比较年轻,但大多主流浏览器都已经支持。它使用方面、应用广泛,已经渗透到前后端开发的各种场景中。

对http一问一答中二式流程的不满,催生了支持双向通信的WebSocket诞生。WebSocket是个不太干净协议。

一、WebSocket协议只能浏览器发起么?

不是。目前此协议的受众的也不仅仅是web开发者。

WebSocket只是一种协议,它和http协议一样,使用类似okhttp的组件,可以在任何地方进行调用,甚至可以借助WebSocket实现RPC框架。

二、WebSocket和HTTP什么关系?

WebSocket和http一样,都是处于OSI模型中的最高层:应用层
WebSocket借助http协议进行握手,握手成功后,就会变身为TCP通道,从此与http不再相见。

使用netstat或者ss,能够看到对应的连接,它与处于抽象层的socket,在外观上没有区别。

三、WebSocket和长轮询有什么区别?

长轮询,就是客户端发送一个请求,服务端将一直在这个连接上等待(当然有一个超长的超时时间),直到有数据才返回,它依然是一个一问一答的模式。比如著名的comted。

WebSocket在握手成功后,就是全双工的TCP通道,数据可以主动从服务端发送到客户端,处于链接两端的应用没有任何区别。

WebSocket创建的连接和Http的长连接是不一样的。由于Http长连接底层依然是Http协议,所以它还是一问一答,只是Hold住了一条命长点的连接而已。

长轮询和Http长连接是阻塞的I/O,但WebSocket可以是非阻塞的(具体是多路复用)。

四、如何创建一个连接?

WebSocket的连接创建是借助Http协议进行的。这样设计主要是考虑兼容性,在浏览器中就可以很方便的发起请求,看起来比较具有迷惑性。

下图是一个典型的由浏览器发起的ws请求,可以看到和http请求长的是非常相似的。但是,它只是请求阶段长得像而已:

请求的地址,一般是:ws://***,或者是使用了SSL/TLS加密的安全协议wss:,用来标识是WebSocket请求。

1、 首先,通过Http头里面的Upgrade域,请求进行协议转换。如果服务端支持的话,就可以切换到WebSocket协议。简单点讲:连接已经在那了,通过握手切换成ws协议,就是切换了连接的一个状态而已。

1、Connection域可以认为是与Upgrade域配对的头信息。像nginx等代理服务器,是要先处理Connection,然后再发起协议转换的。

Sec-WebSocket-Key 是随机的字符串,服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。如此操作,可以尽量避免普通 HTTP 请求被误认为 WebSocket 协议。

其他的,像Sec-WebSocket*字样的头信息,表明了客户端支持的子协议以及其他信息。像loT中很流行的mqtt,就可以作为WebSocket的子协议。

使用javascript,可以很容易连接一个WebSocket服务端。

五、如何处理数据?

WebSocket是通过事件通知的方式运行的。它包含四个事件和两个动作(发送和关闭)。

WebSocket的事件

事件 钩子 备注
open onopen 连接建立时触发
message onmessage 客户端接收服务端数据时触发
error onerror 通信发生错误时触发
close onclose 连接关闭时触发

数据可直接通过Socket.send()方法进行传输。

通过chrome的Inspect->Network->WS,可以看到页面上的WebSocket连接。如图Opcode为2,表明它是一个二进制帧。

WebSocket有类似tcp协议的帧格式,在此不做过多解释。

参考:(https://tools.ietf.org/html/r...

心跳

心跳对应的ping、pong操作,opcode分别是0x9、0xA。收到心跳的一方需要自行更新心跳的更新时间。同使用Netty,我们到底在开发些什么?介绍的类似,在一些移动环境中,需要更加智能的控制心跳。

六、如何使用Nginx做负载均衡?

nginx官网已经给出了例子。主要是Upgrade和Connection头的设置。

map $http_upgrade $connection_upgrade {
    default upgrade;
    "" close;
}

location /chat/ {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}

需要注意的是,nginx做负载均衡,不需要配置ip_hash等参数,nginx天然支持。由于ip_hash仅使用ip地址的前三个数字做hash,还有可能造成服务端的不均衡。

七、java服务端怎么实现?

可以实现javax.WebSocket下的包,简单的实现ws服务端。目前基本可以通过注解的方式去编写代码,比如ServerEndpoint

推荐使用基于netty的netty-socketio进行服务端的编写。由于使用的是netty,所以能够在多个层面进行切入,获取一些统计数据,执行一些控制指令。socketio是一套解决方案,它有多个语言的客户端,并处理了市面上大多数的兼容问题。

八、WebSocket能干些啥? 通知功能

保持一个长连接,当服务端游新的消息,能够实时的推送到使用方。像知乎的点赞通知、评论等,都可以使用WebSocket通信。

某些使用H5的客户端,为了简化开发,也会使用WebSocket进行消息的通知,由于它是实时推送的,会有更好的用户体验。

数据收集

一些次优级别的数据,比如行为日志、trace、异常执栈收集等,都可以开辟专门的WebSocket通道进行传输。这能够增加信息的集中度,并能及时的针对用户的行为进行合适的配置推送。由于大多数浏览器内核都支持,它将使客户端APM编程模型变得简单。

加密 && 认证

虽然使用Fiddler、Charles等能够抓到很多WebSocket包。但如果同时开启SSL,传输加密后的二进制数据,会大幅增加破解的成本,会安全的多。

反向控制钩子

这个...由于是双工长连接,服务端完全可以推送一些钩子命令,甚至直接是代码,在客户端进行执行。比如截个屏,录个音,种个小马。用户只要通过了授权申请,剩下的就随你发挥了。

支付宝偷偷调用你的相机给你拍照的梗,我是相信的。

End

想当年,cometd的出现,惊为天人,振奋了很久。但技术日新月异,cometd已经衰老,而Socket.io得到了快速发展。WebSocket经过一段时间的混沌期,规范已经越来越完善,使用也越来越方便,不需要再处理那么多的兼容。

但它的本质,还是新瓶装旧酒,换汤不换药。WebSocket的发展得益于HTML5规范的制定。规范的意义,就是约束厂商们天马行空的实现,以及指明发展的方向。

这当然有典型的反例,那就是ie。现在,只有一群公认的**,还坚持在用。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/74020.html

相关文章

  • nodejs + websocket (socket.io)

    摘要:协议做不到服务器主动向客户端推送信息。这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。双向通信,服务器可以向客户端主动发送数据。数据格式比较轻量,性能开销小,通信高效。 为什么需要 WebSocket? 因为个人对概念理解不是很深,文字表达能力不强,如果有关HTTP等方面描述不准确,欢迎纠正,谢谢大家 初次接触 WebSocket 的人,都会问同样的问题:...

    awkj 评论0 收藏0
  • socket.io原理和实战

    摘要:就是为了解决这一问题产生的,现在已经写入标准,主流浏览器基本支持。 由于最近写项目要使用socekt.io技术,于是研究了一段时间,把自己早期学习阶段写的小游戏改造了一下,变成了一个比较完整的小程序。点击这里可以体验游戏,建议使用手机模式查看,也可以下载打包好的webapp,安卓版已上架酷安市场,扫码可下载体验: showImg(https://segmentfault.com/img...

    ivyzhang 评论0 收藏0
  • 前端面试之websocket

    摘要:服务器将资源复本写到套接字,由客户端读取。释放连接连接服务器主动关闭套接字,释放连接客户端被动关闭套接字,释放连接。使用约定好的计算握手消息,并使用生成的随机数对消息进行加密,最后将之前生成的所有信息发送给网站。 还是同以往一样,面试会考到的地方,我都会做出标记,websocket如何在前端如何用的,这个得用,别这个都不知道,那这个教程就没用了。如果你想对其原理进行深入了解,那么本教程...

    codeGoogle 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<