【JS】WebSocket:实现实时通信功能。

news2024/12/23 20:39:55

【JS】WebSocket:实现实时通信功能。

  • 一、WebSocket是什么?
  • 二、为什么需要WebSocket?
  • 三、WebSocket的优势
  • 四、WebSocket实现方式
  • 五、示例1:实时数据展示
  • 六、示例2:实现简易聊天室

如果想需要websocket实现功能,后端也要进行对应的修改配置,本内容只讲前端部分,想了解后端如何让实现的自行查阅资料。

一、WebSocket是什么?

  1. WebSocket是一种网络通信协议
  2. webSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。

二、为什么需要WebSocket?

初次接触WebSocket的人,都会问同样的问题:我们已经有了HTTP协议,为什么还需要另一个协议?它能带来什么好处?
答案很简单,因为HTTP协议有一个缺陷:通信只能由客户端发起。
举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP协议做不到服务器主动向客户端推送信息。传统的HTTP协议是无状态的,每次请求(request)都要由客户端(如浏览器)主动发起,服务端进行处理后返回response结果,而服务端很难主动向客户端发送数据,这种客户端是主动方,服务端是被动方的传统Web模式对于信息变化不频繁的Web应用来说造成的麻烦较小,而对于涉及实时信息的Web应用却带来了很大的不便,如带有即时通信、实时数据、订阅推送等功能的应用。
在这里插入图片描述

三、WebSocket的优势

在这里插入图片描述
1.支持双向通信:WebSocket 允许客户端和服务器之间进行实时双向通信,使得数据可以在两者之间实时传输。
2.减少网络拥堵:由于 WebSocket
连接是持久的,因此它只在必要时传输数据,而不是频繁地发起请求和响应,从而减少了网络拥堵,极大的节省了网络带宽资源的消耗。
3.更小的控制开销:相比于 HTTP,WebSocket 的控制开销更小。因为WebSocket 连接一旦建立,就可以直接传输数据,不需要每次通信都携带完整的头部信息。
4.支持二进制数据传输:WebSocket 支持二进制数据传输,使得它可以传输更丰富的数据类型,如图像、视频等。
5.支持扩展:WebSocket 协议定义了扩展机制,用户可以根据需要扩展协议或实现自定义的子协议。

四、WebSocket实现方式

  • WebSocket需要像TCP一样,先建立连接,需要客户端和服务端进行握手连接,连接成功后才能相互通信。

(1)WebSocket构造函数
WebSocket对象作为一个构造函数,用于新建WebSocket实例。

// ws://127.0.0.1:8090连接地址,后端提供的访问地址
let ws = new websocket("ws://127.0.0.1:8090")

执行上面的语句之后,客户端就会与服务器进行连接。

(2)websocket.readyState
readyState属性返回实例对象的当前状态,共有四种。

CONNECTING:值为0,表示正在连接。
OPEN:值为1,表示连接成功,可以通信了。
CLOSING:值为2,表示连接正在关闭。
CLOSED:值为3,表示连接已经关闭,或者打开连接失败。

(3)webSocket.onopen
实例对象的onopen属性,用于指定连接成功后的回调函数。

ws.onopen = function  {
  alert( "websocket连接成功")
}

(4)webSocket.onerror
连接发生错误的回调方法

ws.onerror = function ( {
	alert( ""websocket连接发生错误"">
}

(5)webSocket.onmessage
实例对象的onmessage属性,用于指定收到服务器数据后的回调函数

ws.onmessage = function (data) i
	alert(data)
}

(6)websocket.onclose
实例对象的onclose属性,用于指定连接关闭后的回调函数。

ws.onclose = function ( {
	alert("websocket连接关闭")
}

(7)websocket.send()
实例对象的send()方法用于向服务器发送数据。

ws.send( ' your message ' ) ;

五、示例1:实时数据展示

在这里插入图片描述
在这里插入图片描述

六、示例2:实现简易聊天室

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

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

相关文章

前端食堂技术周刊第 114 期:Interop 2024、TS 5.4 RC、2 月登陆浏览器的新功能、JSR、AI SDK 3.0

美味值:🌟🌟🌟🌟🌟 口味:凉拌鸡架 食堂技术周刊仓库地址:https://github.com/Geekhyt/weekly 大家好,我是童欧巴。欢迎来到前端食堂技术周刊,我们先来看下…

tsc : 无法加载文件 C:\Users\Administrat\AppData\Roaming\npm\tsc.ps 1,因为在此系统上禁止运行脚本

报错:tsc : 无法加载文件 C:\Users\Administrat\AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID135170 中的 about_Execution_Policies。 解决 使用命令行时出现ab…

Excel中筛选合并单元格后,只显示第一行怎么办?

Excel中筛选合并单元格后,只显示第一行怎么办? 我们日常的Excel数据在展示的时候为了数据的清晰和美观往往部分相同的单元格进行合并,但是合并之后在筛选时会发现结果会显示异常。 现在我们筛选下国籍为中国的员工信息,发现只显示了一条数据,解决这个异常只需要五Excel步:…

使用Pytorch导出自定义ONNX算子

在实际部署模型时有时可能会遇到想用的算子无法导出onnx,但实际部署的框架是支持该算子的。此时可以通过自定义onnx算子的方式导出onnx模型(注:自定义onnx算子导出onnx模型后是无法使用onnxruntime推理的)。下面给出个具体应用中的…

【Maven】Maven 基础教程(四):搭建 Maven 私服 Nexus

《Maven 基础教程》系列,包含以下 4 篇文章: Maven 基础教程(一):基础介绍、开发环境配置Maven 基础教程(二):Maven 的使用Maven 基础教程(三):b…

JVM(类加载机制)

类加载就是 .class 文件, 从文件(硬盘) 被加载到内存(元数据区)中的过程 类加载的过程 加载: 找 .class 文件的过程, 打开文件, 读文件, 把文件读到内存中 验证: 检查 .class 文件的格式是否正确 .class 是一个二进制文件, 其格式有严格的说明 准备: 给类对象分配内存空间 (先在…

c++ thread的使用 调用类里面的函数和调用类外的函数的区别

1.thread 调用类外的函数。 在使用thread之前要加上#include <thread>。 例1&#xff1a; #include <iostream> #include <thread> using namespace std; void Threadfunc1() {cout << "Threadfunc1" << endl; }void Threadfunc2(in…

sqllab 11-22

11.有回显&#xff0c;单引号 首先判断是字符型还是数字型 通过order by 来获取字段数 方便后续union联合 注意这里mime表明了内容要进行url编码&#xff0c;测试3报错&#xff0c;2正常&#xff0c;所以有2列。 还需要判断显示位&#xff0c;因为只有显示位的数据才能被爆出…

基于springboot+vue的多媒体素材库的开发与应用系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

Python处理表格数据库之Agate使用详解

概要 您是否有时觉得在处理表格数据时感到不知所措? 也许你在处理一个大型 CSV 文件,遇到了各种数据不一致的问题,或者需要验证数据,确保其准确无误才能进行下一步分析。 传统的数据分析库或许功能强大,但学习曲线陡峭,用起来有点杀鸡用牛刀的感觉。 这时,有一个更…

Redis是AP的还是CP的?

redis是一个开源的内存数据库&#xff0c;那么他到底是AP的还是CP的呢&#xff1f; 有人说&#xff1a;单机的是redis是cp的&#xff0c;而集群的redis是ap的&#xff1f; 但是我不这么认为&#xff0c;我觉得redis就是ap的&#xff0c;虽然在单机redis中&#xff0c;因为只有…

计算机网络实验 基于ENSP的协议分析

实验二 基于eNSP的协议分析 一、实验目的&#xff1a; 1&#xff09;熟悉VRP的基本操作命令 2&#xff09;掌握ARP协议的基本工作原理 3&#xff09;掌握IP协议的基本工作原理 4&#xff09;掌握ICMP协议的基本工作原理 二、实验内容&#xff1a; 1、场景1&#xff1a;两台PC机…

力扣每日一题 用队列实现栈 模拟

Problem: 225. 用队列实现栈 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 力扣官解 辅助队列存栈顶元素主队列存逆序序列 复杂度 时间复杂度: 添加时间复杂度, 示例&#xff1a; O ( n ) O(n) O(n) 空间复杂度: 添加空间复杂度, 示例&#xff1a; O ( …

Markdown的语法使用

目录 前言一、Markdown基本使用二、基本使用补充2.1 三、特殊字符四、数学公式 前言 Markdown是网页版的文本编辑器&#xff0c;Markdown 允许您使用易于阅读、易于编写的纯文本格式进行编写&#xff0c;然后将其转换为结构有效的 XHTML&#xff08;或 HTML&#xff09;。本文主…

【C语言】内存操作篇---动态内存管理----malloc,realloc,calloc和free的用法【图文详解】

欢迎来CILMY23的博客喔&#xff0c;本篇为【C语言】内存操作篇---动态内存管理----malloc&#xff0c;realloc&#xff0c;calloc和free的用法【图文详解】&#xff0c;感谢观看&#xff0c;支持的可以给个一键三连&#xff0c;点赞关注收藏。 前言 在学完结构体后&#xff08;…

《Trustzone/TEE/安全-实践版》介绍

第一章&#xff1a;课程说明和准备 课程介绍和说明 资料准备 为什么使用qemu_v8环境&#xff1f; 为什么选择香橙派开发板&#xff1f; optee qemu_v8环境展示 香橙派optee环境展示 第二章&#xff1a;Qemu环境搭建 ubuntu20.04的安装(virtualboxubuntu20.04) 搭建optee qem…

云手机的境外舆情监控应用——助力品牌公关

在当今数字化时代&#xff0c;社交媒体已成为品牌传播和互动的主要平台。随之而来的是海量的信息涌入&#xff0c;品牌需要及时了解并应对海外社交媒体上的舆情变化。本文将介绍如何通过云手机进行境外舆情监控&#xff0c;更好地帮助企业公关及时作出决策。 1. 境外舆情监控与…

BUUCTF---[BJDCTF2020]藏藏藏1

1.题目描述 2.下载附件&#xff0c;解压之后是一张图片和一个文本 3.把图片放在winhex,发现图片里面包含压缩包 4.在kali中使用binwalk查看&#xff0c;然后使用foremost分离&#xff0c;在使用tree查看分离出来的文件&#xff0c;最后将zip文件使用unzip进行解压。步骤如下 5.…

rtt的io设备框架面向对象学习-电阻屏LCD设备

目录 1.8080通信的电阻屏LCD设备1.1 构造流程1.2 使用2.i2c和spi通信的电阻屏LCD 电阻屏LCD通信接口有支持I2c、SPI和8080通信接口的。 1.8080通信的电阻屏LCD设备 rtt没有实现的设备驱动框架层&#xff0c;那么是在驱动层直接实现的&#xff0c;以stm32f407-atk-explorer为例…

NOIP 2010普及组初赛试题及解析

NOIP 2010普及组初赛试题及解析 一. 单项选择题 &#xff08;共20题&#xff0c;每题1.5分&#xff0c;共计30分。每题有且仅有一个正确答案.&#xff09;。二. 问题求解&#xff08;共2题&#xff0c;每题5分&#xff0c;共计10分&#xff09;三. 阅读程序写结果&#xff08;共…