5 webSocket

taciturn丶

于 2024-07-19 09:30:30 发布

阅读量213

点赞数 3

分类专栏： Vue 文章标签： websocket 网络协议网络 vue.js

本文链接：https://blog.csdn.net/ever__ever/article/details/140540217

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

握手: 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

服务端返回的数据格式

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
sec-websocket-Accept: s3pPLMBiTxaQ9kYGzzhzRbK+xo0=Sec-websocket-Protocol: chat

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

webSocket 属性

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

webSocket 方法

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

webSocket 事件

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

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

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)
})