websocket原理图

时间: 2023-08-05 21:04:42 浏览: 135

websocket思维导图

Websocket 思维导图 WebSocket 是一种网络协议，允许服务器主动向客户端推送信息，属于服务器推送技术的一种。它建立在 TCP 协议之上，实现了真正的双向平等对话。下面是 WebSocket 的思维导图：客户端 API 构造函数 var ws = new WebSocket("ws://localhost:880"); readyState readyState 用于返回实例对象的当前状态，共四种： 1. connecting（0）：表示正在连接 2. open（1）：表示连接成功，可以通信了 3. closing（2）：表示连接正在关闭 4. closed（3）：表示连接已经关闭，或者打开连接失败 onopen onopen 用于指定链接成功后的回调函数，可以是单个回调函数： ws.onopen = function() { ws.send("hello server!"); } 也可以是多个回调函数，使用 addEventListener 方法： ws.addEventListener('open', function(event) { ws.send('Hello server!'); }); onclose onclose 用于指定连接关闭后的回调函数，可以是单个回调函数： ws.onclose = function(event) { var code = event.code; } 也可以是多个回调函数，使用 addEventListener 方法： ws.addEventListener("close", function(event) { var code = event.code; }); onmessage onmessage 用于指定收到服务器数据后的回调函数，可以是单个回调函数： ws.onmessage = function(event) { var data = event.data; // 处理数据 } 也可以是多个回调函数，使用 addEventListener 方法： ws.addEventListener("message", function(event) { var data = event.data; // 处理数据 }); 判断收到的数据类型可以使用 typeof 运算符来判断收到的数据类型： ws.onmessage = function(event) { if (typeof event.data === 'string') { // 处理文本数据 } else if (event.data instanceof ArrayBuffer) { // 处理二进制数据 } } 显示指定收到的数据类型可以使用 binaryType 属性来指定收到的数据类型： ws.binaryType = "blob"; ws.onmessage = function(e) { console.log(e.data.size); }; ws.binaryType = "arraybuffer"; ws.onmessage = function(e) { console.log(e.data.byteLength); }; onerror onerror 用于指定报错时的回调函数，可以是单个回调函数： ws.onerror = function(event) { // handle error event } 也可以是多个回调函数，使用 addEventListener 方法： ws.addEventListener("error", function(event) { // handle error event }); send send 用于向服务器发送数据，可以发送文本： ws.send('your message'); 也可以发送 ArrayBuffer 对象： var img = canvas_context.getImageData(0, 0, 400, 320); var binary = new Uint8Array(img.data.length); for (var i = 0; i < img.data.length; i++) { binary[i] = img.data[i]; } ws.send(binary.buffer); 也可以发送 Blob 对象： var file = document.querySelector('input[type="file"]').files[0]; ws.send(file); bufferedAmount bufferedAmount 用于判断发送是否结束，该属性表示还有多少字节的二进制数据没有发送出去： var data = new ArrayBuffer(10000000); ws.send(data); if (ws.bufferedAmount === 0) { // 发送完毕 } else { // 发送还没结束 } 服务端实现 WebSocket 的服务端实现有多种实现方式，例如 µWebSockets、Socket.IO、WebSocket-Node 等。为什么需要 WebSocket？因为 HTTP 协议有一个缺陷：通信只能由客户端发起，服务器不能主动向客户端推送信息，而 WebSocket 允许服务器主动向客户端推送信息，实现了真正的双向平等对话。

Websocket是一种在单个TCP连接上进行双向通信的协议。它允许在客户端和服务器之间进行实时通信，而无需通过HTTP请求来获得新数据。下面是Websocket的原理图： ![Websocket原理图](https://i.imgur.com/p3lRgNv.png) 1. 客户端发送一个HTTP请求。该请求包含一个特殊头部（Upgrade），指示客户端希望升级到Websocket协议。 2. 服务器收到请求后，如果支持Websocket协议，会向客户端发送一个HTTP响应，表示已经升级到Websocket协议。 3. 升级完成后，客户端和服务器之间的连接将转换为Websocket连接。此时，双方可以通过该连接进行实时通信。 4. 在Websocket连接上，客户端和服务器可以发送消息。消息可以是文本或二进制数据。 5. 当客户端或服务器发送消息时，其它一方将立即收到该消息。这使得双方能够实时通信，而无需使用HTTP请求来获取新数据。 6. 当双方中的任何一方希望关闭连接时，它将发送一个关闭帧。另一方在收到该帧后也会关闭连接。总之，Websocket协议允许客户端和服务器之间建立实时通信通道，从而实现实时数据传输和更新。

阅读全文

websocket原理图

相关推荐

websocket原理与实现

WebSocket图文解析

Websocket原理图

html5 http的轮询和Websocket原理

Go环境配置与WebSocket原理详解

uniapp使用websocket传递图片

websocket_websocket客户端_websocket_

websocket实例

webSocket初学

websocket demo

WebSocket案例

websocket通信

websocketdemo

websocket源码

WebSocket.zip

websocket.jar

websocket的实现

WebSocket实战：构建HTML5 WebSocket应用

WebSocket协议技术原理与实际开发案例

最新推荐

WebOffice在线编辑痕迹保留JAVA

字节跳动（抖音面试题）

HTTP完全分析-KeepAlive模式

c++游戏代码教程完本

Pytorch版代码幻灯片.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程