当前位置:   article > 正文

5 webSocket

5 webSocket

webSockets 简介


什么是 websocket

webSockets 是一种先进的技术;它可以在用户的浏览器和服务器之间打开交互式通信会话;使用此 API,您可以向服务器发送消息并接收事件驱动的响应,而无需通过轮询服务器的方式以获得响应
websocket 是一种网络通信协议,是HTML5开始提供的一种在单个TCP连接上进行全双工通信的协议,这个对比着HTTP协议来说,HTTP协议是一种无状态的、无连接的、单向的应用层协议,通信请求只能由客户端发起,服务端对请求做出应答处理;HTTP协议无法实现服务器主动向客户端发起消息, websocket 连接允许客户端和服务器之间进行全双工通信, 以便任一方都可以通过建立的连接将数据推送到另一端;websocket只需要建立一次连接,就可以一直保持连接状态

webSockets 特点

  • 全双工: 通信允许数据在两个方向上同时传输,它在能力上相当于两个单工通信方式的结合例如指A→B的同时B→A,是瞬时同步的
  • 二进制帧: 采用了二进制帧结构,语法、语义与HTTP完全不兼容,相比http/2, WebSocket更侧重于"实时通信",而HTTP/2更侧重于提高传输效率,所以两者的顿结构也有很大的区别;不像HTTP/2 那样定义流,也就不存在多路复用、优先级等特性;自身就是全双工,也不需要服务器推送
  • 协议名: 引入ws和wss分别代表明文和密文的websocket协议,且默认端口使用80或443,几乎与http一致
ws://www.chrono. com
ws://www.chrono. com:8080/srv
wss://www.chrono. com:445/im?user_id=xxx
  • 1
  • 2
  • 3
  • 握手: websocket也要有一个握手过程,然后才能正式收发数据客户端发送数据格式如下
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-websocket-Key: dGh1IHNhbxBsZSBub25jzQ==
Origin: http://example.com
Sec-webSocket-Protocol: chat, superchat
Sec-websocket-Version: 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

服务端返回的数据格式

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
sec-websocket-Accept: s3pPLMBiTxaQ9kYGzzhzRbK+xo0=Sec-websocket-Protocol: chat
  • 1
  • 2
  • 3
  • 4
  • Connection:必须设置Upgrade,表示客户端希望连接升级
  • Upgrade:必须设置Websocket,表示希望升级到Websocket协议
  • Sec-WebSocket-Key:客户端发送的一个base64编码的密文,用于简单的认证秘钥。要求服务端必须返回一个对应加密的"Sec-WebSocket-Accept应答,否则客户端会抛出错误,并关闭连接
  • Sec-WebSocket-Version :表示支持的Websocket版本
  • HTTP/1.1 101 Switching Protocols:表示服务端接受WebSocket协议的客户端连接
  • Sec-WebSocket-Accep:验证客户端请求报文,同样也是为了防止误连接。具体做法是把请求头里"Sec-WebSocket-Key"的值,加上一个专用的UUID,再计算摘要

webSockets 优点

  • 较少的控制开销: 数据包头部协议较小,不同于http每次请求需要携带完整的头部
  • 更强的实时性: 相对于HTTP请求需要等待客户端发起请求服务端才能响应,延迟明显更少
  • 保持创连接状态: 创建通信后,可省略状态信息,不同于HTTP每次请求需要携带身份验证
  • 更好的二进制支持: 定义了二进制帧,更好处理二进制内容
  • 支持扩展: 用户可以扩展 WebSocket 办议、实现部分自定义的子协议
  • 更好的压缩效果: WebSocket 在适当的扩展支持下,可以沿用之前内容的上下文,在传递类似的数据时,可以显著地提高压缩率

webSockets 应用场景

  • 弹幕
  • 媒体聊天
  • 协同编辑
  • 基于位置的应用
  • 体育实况更新
  • 股票基金报价实时更新

webSocket 常量


WebSocket.CONNECTING	0
WebSocket.OPEN	1
WebSocket.CLOSING	2
WebSocket.CLOSED	3
  • 1
  • 2
  • 3
  • 4

webSocket 属性


WebSocket.binaryType // 使用二进制的数据类型连接。
WebSocket.bufferedAmount 只读 // 未发送至服务器的字节数。
WebSocket.extensions 只读 // 服务器选择的扩展。
WebSocket.onclose // 用于指定连接关闭后的回调函数。
WebSocket.onerror // 用于指定连接失败后的回调函数。
WebSocket.onmessage // 用于指定当从服务器接受到信息时的回调函数。
WebSocket.onopen // 用于指定连接成功后的回调函数。
WebSocket.protocol 只读 // 服务器选择的下属协议。
WebSocket.readyState 只读 // 当前的链接状态。(常量)
WebSocket.url 只读 // WebSocket 的绝对路径。
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

webSocket 方法


WebSocket.close([code[, reason]]) // 关闭当前链接。
WebSocket.send(data) // 对要传输的数据进行排队。
  • 1
  • 2

webSocket 事件


使用 addEventListener() 或将一个事件监听器赋值给本接口的 oneventname 属性,来监听下面的事件。

close // 当一个 WebSocket 连接被关闭时触发。 也可以通过 onclose 属性来设置。
error // 当一个 WebSocket 连接因错误而关闭时触发,例如无法发送数据时。 也可以通过 onerror 属性来设置。
message // 当通过 WebSocket 收到数据时触发。 也可以通过 onmessage 属性来设置。
open // 当一个 WebSocket 连接成功时触发。 也可以通过 onopen 属性来设置。
  • 1
  • 2
  • 3
  • 4

webSocket 实现


// 创建 webSocket 连接
const socket = new WebSocket('ws://localhost:8080')

// 连接成功触发
socket.addEventListener('open', function (event) {
  socket.send('Hello Server!') // 传输数据进行排队
})

// 收到数据触发
socket.addEventListener('message', function (event) {
  console.log('Message from server ', event.data)
})

// 连接发生错误触发
socket.addEventListener('error', function (event) {
  console.log('webSocket error', event)
})

// 连接关闭时触发
socket.addEventListener('close', function (event) {
  console.log('webSocket close', event)
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

webSocket 实现库


  • μWebSockets
  • Socket.IO
  • WebSocket-Node
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小惠珠哦/article/detail/863487
推荐阅读
相关标签
  

闽ICP备14008679号