浅谈HTML5 WebSocket的机制

简介: <p style="margin-top:15px; margin-bottom:15px; padding:8px; font-size:14px; color:white; font-family:宋体,Calibri; background-color:rgb(128,128,128)"><span style="line-height:28.8px">回顾上一章</span></p>

回顾上一章

      在上一章《为什么我们需要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通讯了。

欢迎大家关注我的博客,关注我的微博,如有疑问,请加qq群:454796847、135430763 共同进步!

目录
相关文章
websocket封装带心跳和重连机制(vue3+ts+vite)
websocket封装带心跳和重连机制(vue3+ts+vite)
1527 0
|
8月前
|
移动开发 缓存 网络协议
html5:webSocket 基础使用
html5:webSocket 基础使用
74 0
|
12月前
|
移动开发 前端开发 网络协议
前端祖传三件套HTML的HTML5之WebSocket
当今互联网技术飞速发展,尤其是前端领域的变化更是日新月异。在这样一个快速更新的环境下,我们不得不重新审视前端祖传三件套之一的HTML技术,并学习其中的最新进展。本文将着重介绍HTML5中的WebSocket技术。
82 0
|
前端开发
WebSocket使用及优化(心跳机制与断线重连)
WebSocket使用及优化(心跳机制与断线重连)
1730 0
WebSocket使用及优化(心跳机制与断线重连)
WebSocket客户端断开连接后,服务器端的处理机制
以网页形式存在的客户端,按F5刷新后,服务器端扑捉到disconnect事件:
WebSocket客户端断开连接后,服务器端的处理机制
WebSocket客户端断开连接后,服务器端的处理机制
当WebSocket客户端和服务器断开连接后,服务器捕捉到连接中断事件,需要析构掉服务器端为这个客户端连接维护的一些数据结构,以释放资源。 其中一个待释放的资源就是oTransactionID_SiteDetailMap
WebSocket客户端断开连接后,服务器端的处理机制
WebSocket客户端断开连接后,服务器端的处理机制
以网页形式存在的客户端,按F5刷新后,服务器端扑捉到disconnect事件:
WebSocket客户端断开连接后,服务器端的处理机制
|
前端开发 HTML5 移动开发
【物联网智能网关-13】Html5:Canvas+WebSocket实现远程实时通信(上)
基于Html5的Canvas和WebSocket技术详细介绍远程实时通信的实现
1315 0
|
Web App开发 移动开发 程序员
好程序员带你认识HTML5中的WebSocket
  好程序员带你认识HTML5中的WebSocket,在HTML5 规范中,我最喜欢的Web技术就是正迅速变得流行的 WebSocket API。WebSocket 提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。
4113 0
|
Web App开发 移动开发 网络协议