专栏首页业余草浅谈HTML5 WebSocket的机制

浅谈HTML5 WebSocket的机制

回顾上一章

      在上一章《为什么我们需要HTML5 WebSocket》中,我简单的介绍了下WebSocket的前世今生。相信大家已对WebSocket有了初步的了解。那么今天我们继续深入学习WebSocket的机制。

WebSocket机制

我们知道WebSocket是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(不知道的可以看下全双工通信RS-422标准),能更好的节省服务器资源和带宽并达到实时通讯,它建立在TCP之上,同HTTP一样通过TCP来传输数据,但是它和HTTP最大不同是:

WebSocket是一种双向通信协议,在建立连接后,WebSocket服务器和Browser/Client Agent都能主动的向对方发送或接收数据,就像Socket一样;

WebSocket需要类似TCP的客户端和服务器端通过握手连接,连接成功后才能相互通信。

非WebSocket模式传统 HTTP 客户端与服务器的交互如下:

传统 HTTP 请求响应客户端服务器交互图

使用 WebSocket 模式客户端与服务器的交互如下:

WebSocket 请求响应客户端服务器交互图

根据上面两张图对比可以看出,相对于传统的HTTP每次请求-应答都需要客户端与服务端建立连接的模式,WebSocket是类似Socket的TCP长连接的通讯模式,一旦WebSocket连接建立后,后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端断掉连接前,不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下,极大的节省了网络带宽资源的消耗,有明显的性能优势,且客户端发送和接受消息是在同一个持久连接上发起,实时性优势明显。

WebSocket和HTTP的报文

我们再来看看WebSocket通讯与传统HTTP的不同交互的报文:

在客户端(浏览器端js),创建WebSocket 实例化一个新的 WebSocket 客户端对象,连接类似 ws://yourdomain:port/path 的服务端 WebSocket URL,WebSocket 客户端对象会自动解析并识别为 WebSocket 请求,从而连接服务端端口,执行双方握手过程,客户端发送数据格式类似:

WebSocket 客户端连接报文

可以看到,客户端发起的 WebSocket 连接报文类似传统 HTTP 报文,”Upgrade:websocket”参数值表明这是WebSocket类型请求,“Sec-WebSocket-Key”是WebSocket客户端发送的一个base64编码的密文,要求服务端必须返回一个对应加密的“Sec-WebSocket-Accept”应答,否则客户端会抛出“Error during WebSocket handshake”错误,并关闭连接。

服务端收到报文后返回的数据格式类似:

WebSocket 服务端响应报文

“Sec-WebSocket-Accept”的值是服务端采用与客户端一致的密钥计算出来后返回客户端的,“HTTP/1.1 101 Switching Protocols”表示服务端接受WebSocket协议的客户端连接,经过这样的请求-响应处理后,客户端服务端的WebSocket连接握手成功, 后续就可以进行TCP通讯了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • BAT 面试 Elasticsearch 必会知识点总结

    Elasticsearch 是上市公司 Elastic 开源的一个产品。而 Elasticsearch 支撑了整个 Elastic 公司的大约 50 亿美元的市...

    业余草
  • 为什么我们需要HTML5 WebSocket

        HTML5作为下一代的 Web 标准,它拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket等等。这其中有“Web ...

    业余草
  • 从根上理解 Docker 是个啥

    早都想写 Docker 了,只是一直太忙!直到最近越来越多的网友再咨询我,Docker 为什么有优势?Docker 和虚拟机有什么本质上的区别?。。。所以,整体...

    业余草
  • WebSocket系列之基础知识入门篇

    本文是WebSocket系列的第一篇,主要介绍WebSocket相关的基础协议知识和API。由于WebSocket的相关介绍在MDN中分布较乱,初学者不太容易入...

    黄Java
  • Nginx支持WebSocket反向代理-学习小结

    WebSocket是目前比较成熟的技术了,WebSocket协议为创建客户端和服务器端需要实时双向通讯的webapp提供了一个选择。其为HTML5的一部分,We...

    洗尽了浮华
  • 一文读懂WebSocket

    WebSocket是一种网络协议,在OSI模型中,WebSocket协议与HTTP协议一样,都属于最顶层的应用层协议。有些朋友可能会有疑问,既然已经有了HTTP...

    黄泽杰
  • 一文读懂WebSocket

    WebSocket是一种网络协议,在OSI模型中,WebSocket协议与HTTP协议一样,都属于最顶层的应用层协议。有些朋友可能会有疑问,既然已经有了HTTP...

    Java技术江湖
  • 通俗易懂讲解WebSocket

    什么是WebSocket WebSocket是一种网络协议,在OSI模型中,WebSocket协议与HTTP协议一样,都属于最顶层的应用层协议。有些朋友可能会有...

    黄泽杰
  • WebSocket协议入门介绍

    WebSocket是基于TCP的应用层协议,用于在C/S架构的应用中实现双向通信,关于WebSocket协议的详细规范和定义参见rfc6455。 需要特别注意...

    2Simple
  • Jmeter对基于websocket协议的压力测试

    WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。

    流柯

扫码关注云+社区

领取腾讯云代金券