登录免费注册



WebSocket 基础以及原理

首页  思维导图  详情



WebSocket 基础以及原理

2020-04-17 16:25:45   0  举报





AI智能生成

WebSocket配置及其原理

websocket

前端

javascript

模版推荐

作者其他创作

大纲/内容

使用

成功建立websocket返回分析

服务器返回

101是Switching Protocols

表示服务器已经理解了客户端的请求

Upgrade和Connection

<br><br><br><br>告诉服务端，发起的是webSocket协议

Sec-WebSocket-Accept 

这个则是经过<font color="#c41230">服务器</font>确认，并且加密过后的 Sec-WebSocket-Key

Sec-WebSocket-Key

<font color="#c41230">是浏览器</font>经过Base64加密后的密钥，用来和response<br>里面的Sec-WebSocket-Accept进行比对验证

Sec-WebSocket-Version

是当前的协议版本

简单事例分析

创建 WebSocket 对象

var ws = new WebSocket('ws://echo.websocket.org')

WebSocket 属性

ws.readyState

CONNECTING：

0

表示正在连接

OPEN：

1

表示连接成功，可以通信了

CLOSING：

2

表示连接正在关闭

CLOSED：

3

表示连接已经关闭

或者打开连接失败

ws.bufferedAmount

open

ws.onopen 

连接建立时触发

message

ws.onmessage 

客户端接收服务端数据时触发

error

ws.onerror 

通信发生错误时触发

close

ws.onclose 

连接关闭时触发

WebSocket 方法

ws.send() 

使用连接发送数据

ws.close() 

关闭链接

如果要指定多个回调函数，可以使用addEventListener方法

是什么？

Websocket是一个持久化的协议

Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分握手

只需要经过一次HTTP请求，就可以做到源源不断的信息传送了

总结：HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议

它基于TCP传输协议，并复用HTTP的握手通道

优点

支持双向通信，实时性更强

更好的二进制支持

较少的控制开销

连接创建后

在不包含头部的情况下，服务端到客户端的包头只有2~10字节（取决于数据包长度）

客户端到服务端的的话，需要加上额外的4字节的掩码

而HTTP协议每次通信都需要携带完整的头部

支持扩展

ws协议定义了扩展，用户可以扩展协议

实现自定义的子协议

提高了工作效率和资源利用率

对比

ajax轮询

原理

让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息

事例

long poll

原理

采取的是阻塞模型，客户端发起连接后，如果没消息，就一直不返回Response给客户端

（一直打电话，没收到就不挂电话）

事例

总结

上面事例，不断建立连接，等待服务端处理，体现HTTP协议的一个特点：被动性

服务端不能主动联系客户端，只能有客户端发起

 Collect

Get Started

标记器原理

WebSocket Flow Chart

 Collect

Get Started

WebSocket Flow Chart

 Collect

Get Started

websocket连接时序图

 Collect

Get Started

原理













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document