【网络协议】WebSocket知识点梳理和总结

1. 前言

        HTML5提出了全双工通讯协议WebSocket,让客户端和服务端交换数据更加便利。本篇梳理和总结一下WebSocket的方法和属性,并给一个示例代码。

2.WebSocket原型的方法和属性

        Websocket继承于EventTarget,WebSocket原型对象的方法和属性如下:

方法和属性说明
new WebScoket(url, protocols?)

功能:创建WebSocket实例

输入:

url 要连接URL

protocols? 一个协议字符串或一个包含协议字符串的数组,用于指定子协议,不指定则为空字符串''

WebSocket.prototype.send(data)

功能:对要传输的数据进行排队

输入:string | Blob | ArrayBuffer

WebSocket.prototype.close(code?,reason?)

功能:关闭当前连接

WebSocket.prototype.onopen = handler

功能:连接建立成功后触发的open事件

WebSocket.prototype.onmessage

= function(event) { ... }

功能:客户端接收服务器数据时触发的message事件

注:event.data返回的数据类型 string | Blob | ArrayBuffer

WebSocket.prototype.onerror

= function(event) { ... }

功能:连接失败后触发的error事件

注:event有3个额外属性

wasClean 连接是否干净地关闭

code 来自服务器数据状态码

reason 字符串,包含服务器发来的消息

WebSocket.prototype.onclose = handler

功能:连接关闭后触发的close事件

WebSocket.prototype.url

功能:返回创建WebSocket实例对象时URL的绝对路径(只读)

输出:DOMString

WebSocket.prototype.protocol

功能:返回服务端选中的子协议名字,是创建WebSocket实例对时protocols指定的字符串(只读)

WebSocket.prototype.extensions

功能:返回服务器已选择的扩展值(只读)

输出:DOMString

WebSocket.prototype.binaryType

功能:返回连接所传输的二进制数据类型

输出:DOMString('blob' | 'arraybuffer')

WebSocket.prototype.bufferedAmount

功能:返回已被send()放入队列中等待传输,但还未发出UTF-8字节数(只读)

输出:number

WebSocket.prototype.readyState

功能:返回连接状态

输出:CONNECTING | OPEN | CLOSING | CLOSING

静态常量

WebSocket.prototype.CONNECTING 0 - 正在连接

WebSocket.prototype.OPEN               1 - 连接已打开

WebSocket.prototype.CLOSING         2  - 连接正关闭

WebSocket.prototype.CLOSED          3 - 连接已关闭

3. 示例代码
// 创建WebSocket连接
const ws = new WebSocket('ws://localhost:8080/echo');// 链接建立成功
ws.onopen = () => {// 向服务端发送数据ws.send('Hello World!');
}// 监听服务端发过来的数据
ws.onmessage = (event) => {console.dir(event.data);
}// 连接出错触发error事件
ws.onerror = () => {console.log('连接出错');
}// 服务端关闭WebSocket连接或ws.close()主动关闭连接触发close事件
ws.onclose = () => {console.log('链接已关闭');
}

        本篇给出的示例代码比较简单,产品化使用时,还需要考虑连接断开后的重连、心跳等等,网上已有很多封装好的库可以使用。

注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/581504.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache Jackrabbit漏洞浅析

Apache Jackrabbit是一个Java开源内容存储库&#xff0c;1.0.0 < 版本 < 2.20.11、2.21.0 < 版本 < 2.21.18存在RMI功能导致的远程代码执行漏洞。 补丁分析 对比补丁前后两个版本&#xff08;https://github.com/apache/jackrabbit/compare/jackrabbit-2.20.10..…

计算机图形学理论(5):光能传递

局部照明与全局照明 局部照明 只考虑从物体表面到眼睛的直射光。 全局照明 全局照明考虑了直接照明和间接照明&#xff08;根据应用配置可以有多次反射&#xff09;。 全局照明技术 光能传递 光能传递是一种模拟从光源开始的光漫反射传播的方法。这种方法的基础来自于“…

SElinux工作原理简介并演示chcon、semanage、restorecon的使用方法

目录 一.SElinux工作原理简介 1.system_u 2.object_r 3.httpd_sys_content_t 4.s0 二.SElinux策略的具体使用详情 1.restorecon 2.semanage 3.chcon 一.SElinux工作原理简介 通过mac方式管理进程&#xff0c;管理的目标是进程是否具有读取权限的文件&#xff08;文件…

创业公司该怎么进行季度绩效考核?

创业公司在绩效考核中面临的问题主要包括目标设定不清晰、时间安排不合理、绩效标准不明确、缺乏反馈和沟通、过分关注短期成果、资源不足以及文化差异等。这些问题可能单独或共同存在&#xff0c;导致绩效考核无法达到预期效果&#xff0c;甚至可能对员工的工作积极性和公司的…

Python-动态柱状图可视化

柱状图 1.基础柱状图1.1通过Bar构建基础柱状图1.2反转x轴&#xff0c;y轴1.3数值标签在右侧1.4总结 2.基础时间柱状图2.1掌握基础的时间线配置动态图表2.2创建时间线2.3自动播放2.4时间线设置主题2.5总结 3.GDP动态柱状图绘制3.1掌握列表的sort方法并配合配合lambda匿名函数完成…

【数据库系统概论】第5章-数据库完整性

文章目录 引言5.1 实体完整性5.2 参照完整性5.3 用户定义的完整性5.4 完整性约束命名子句5.6 触发器 引言 数据库的完整性是指数据的正确性和相容性。 正确性&#xff1a;符合现实语义、反映当前实际情况。性别必须为男或女。 相容性&#xff1a;数据库同一对象在不同关系表中…

MySQL 中的 ibdata1 文件过大如何处理?

ibdata1 是什么文件&#xff1f; ibdata1 是InnoDB的共有表空间&#xff0c;默认情况下会把表空间存放在一个名叫 ibdata1的文件中&#xff0c;日积月累会使该文件越来越大。 ibdata1 文件过大的解决办法 使用独享表空间&#xff0c;将表空间分别单独存放。MySQL开启独享表空…

刷新账号密码过期时间——脚本案例

OS账号默认30天密码过期&#xff0c;执行下面脚本刷新密码过期时间。 脚本先是从密码文件中读取用户和密码&#xff0c;再使用passwd命令行修改密码。然后过滤chage -l的关键信息判断密码是否修改成功。最后使用expect脚本对每个用户进行ssh登录并测试&#xff0c;确保…

Flutter 官方状态管理 Provider基本使用

当App的复杂性发展到一定程度,就会出现一个页面中不同深度的子Widget需要共享访问同一个数据状态,甚至不同页面需要共享同一个状态的情况,这时我们可能会想到InheritedWidget。InheritedWidget是 Flutter 中非常重要的一个功能型组件,它提供了一种在 Widget 树中从上到下共…

115基于matlab的用于铣削动力学建模的稳定性叶瓣图分析(stablity lobe)

基于matlab的用于铣削动力学建模的稳定性叶瓣图分析(stablity lobe)&#xff0c;程序已调通&#xff0c;可直接运行。 115matlab铣削动力学 (xiaohongshu.com)

生活常识-如何开社保证明(四川)

下载并打开天府市民云APP 注册后登陆 点击社保服务 点击社保证明 点击【四川省社会保险个人社保证明名(近24个月)】 点击下载 下载后点击【QQ发送给好友&#xff0c;然后发送给自己的电脑设备(我的电脑)】

Pthon Request库源码解读之__init__.py

首先我们需要了解下这个文件的功能&#xff1a; init.py 文件在 Python 中有多种用途&#xff0c;但当我们讨论通过 pip 安装的插件或包时&#xff0c;其主要用途是为了确保&#xff1a; 包的结构完整性&#xff1a; 当你尝试导入一个包&#xff08;文件夹&#xff09;时&#…

数据类型-变量-内存四区-指针

1、内存四区 1.1、数据类型的本质 1&#xff09;数据类型基本概念 类型是对数据的抽象类型相同的数据具有相同的表示形式、存储格式、相关的操作程序中使用的数据必定属于某种数据类型数据类型和内存 有关系C/C 引入数据类型&#xff0c;可以更方便地管理数据 2&#xff09…

laravel5.8中实现验证码组件的安装和验证

本篇文章主要讲解使用laravel5.8自带的验证码库实现验证码验证的效果教程。通过本教程你可以快速接入到自己的项目中开发相应的验证功能。 作者&#xff1a;任聪聪 (rccblogs.com) 日期&#xff1a;2023年12月17日 实际效果 安装步骤 步骤一、输入命令 composer require mews…

beego使用布局文件和模板文件进行页面渲染

在 Beego 框架中的控制器基类 Controller 中自定义一个方法&#xff0c;用于渲染模板文件并设置模板数据。 func (this *IndexController) display(tplname string) {this.Layout this.moduleName "/layout.html"this.TplName tplnamethis.LayoutSections make(…

小程序开发与移动应用开发有哪些区别?

小程序开发与移动应用开发&#xff1a;差异何在&#xff1f; 在数字化浪潮下&#xff0c;小程序和移动应用已成为人们日常生活中不可或缺的一部分。但你是否真正了解小程序开发与移动应用开发之间的区别&#xff1f;这篇文章将为你揭开两者之间的神秘面纱。 一、运行环境不同…

不限带宽是否意味着无限带宽

当今互联网发展迅速的时代&#xff0c;带宽成为了网络连接速度的重要指标之一。而对于许多用户来说&#xff0c;无限带宽似乎是一个理想的选择。不限带宽并不等于无限带宽。我将解释不限带宽的含义&#xff0c;并探讨其与无限带宽之间的区别。 不限带宽是指网络服务提供商&…

夸克 自动脚本 每次挖到自动输代码

一个bash脚本,功能是持续运行一个名为`mint-dft`的Yarn CLI命令,并在出现错误时自动重试。 代码解释: 1. `#!/bin/bash`: 这是shebang行,告诉系统使用/bin/bash来解析和执行这个脚本。 2. `export NODE_OPTIONS=--max_old_space_size=49152`: 这一行设置了环境变…

Navicat 年度报告 (2023) | 不忘初心,砥砺前行

#SUMMARY#年度报告 时光荏苒&#xff0c;转眼时间来到 2023 年与 2024 年交汇处。回顾 2023&#xff0c;数据库行业跌宕起伏&#xff0c;暗流涌动。作为数据库工具提供商 Navicat&#xff0c;我们也面临着诸多挑战与压力。一直以来&#xff0c;我们以用户体验为先、技术为本&a…

代理模式:中间者的故事

代理模式&#xff1a;中间者的故事 介绍需求分析代理模式代码实现代理模式整理和用途第一种用途第二种用途第三种用途第四种用途 总结 介绍 本文引用《大话设计模式》第七章节的内容进行学习分析&#xff0c;仅供学习使用 需求&#xff1a;小明拜托自己好朋友小王给他朋友小美…