websocket前端应用
基本了解
首先要对websocket有一个基本了解:WebSocket是一种在Web浏览器和Web服务器之间创建持久连接的技术。它允许在客户端和服务器之间进行全双工通信,而不需要在每次通信时都发起新的HTTP请求。主要作用包括实时通信、减少延迟、减少宽带消耗、服务器推送、支持双向通信等。
与HTTPAPI的区别
然后就是要了解websocket和普通HTTP API之间的区别:
1.通信模式:
HTTP API:HTTP API基于请求-响应模式,客户端发送请求,服务器返回响应,然后连接关闭。每个请求都需要建立新的连接。
WebSocket:WebSocket时全双工通信协议,允许客户端和服务器之间建立持久连接,双方可以同时发送和接收数据,不需要每次请求都建立新的连接。
2.延迟和性能:
HTTP API:因为每个HTTP请求都需要建立新的连接,并且请求都需要携带HTTP头部信息,因此HTTP API有较高的延迟和较低的性能。
WebSocket:WebSocket建立了持久连接,使用头部信息较少,因此可以大幅度降低延迟并提高性能。
3.服务器推送
HTTP API:HTTP API服务器不能主动向客户端推送数据,只能在客户端发起请求时才能发送响应。
WebSocket:WebSocket允许服务器主动向客户端推送数据,而不需要客户端发起请求。这使得WebSocket非常适合实现服务器推送功能。
4.协议和支持
HTTP API:HTTP API使用HTTP协议进行通信,因此能够与各种类型的客户端和服务器兼容,并且受到广泛支持。
WebSocket:WebSocket是一种独立的协议,需要客户端和服务器都支持WebSocket协议才能进行通信。虽然现代浏览器和大多数服务器都支持WebSocket,但是某些环境中会受到限制。
WebSocket适用于需要实时通信和服务器推送功能的场景,而HTTP API则更适用于传统的请求-相应模式的通信。
API与基本使用
最后就是了解WebSocket的连接方法和基本API:
1.连接方法(创建WebSocket对象):
let ws=new WebSocket("连接路径"); //其中ws为自己定义的变量名。
经过连接之后客户端与服务器就已经开始连接。
2.ws.onopen=()=>{
console.log(`连接状态${ws.readyState}`) //通常在第一行打印连接状态
}
本API在WebSocket对象创建之后被调用,可以展示WebSocket对象被创建之后的连接状态:
0:连接正在进行,WebSocket对象被创建,但是连接还没有建立;
1:连接已经建立成功并且可以通信;(这个状态是最常见的,也是大家最希望看到的)
2:连接正在关闭;
3:连接已经关闭。
3.ws.onmessage=e=>{
console.log("返回的数据",e.data)
}
该API在每次服务器向客户端发送信息时被调用,并通过第一行的打印代码打印出得到的信息。也可在其中写上判断代码,根据服务器返回的数据id或者type进行相应的操作。
4.ws.onclose=()=>{
console.log(“连接已关闭”)
}
该API在WebSocket由于断网或者主动调用ws.close()方法关闭连接之后调用,一般在这里面用来关闭心跳检测。
5.ws.οnerrοr=error=>{
console.log("发生错误",error)
}
该API在发生错误时调用,第一行打印错误原因,一般用不到。
6.ws.send(数据)
本API可以向服务器发送信息,可以穿插在onmessage和onopen中使用,在相应的时候向服务器发送相应的数据。
关于心跳检测:
至于心跳检测,其实就是一个定时函数,在服务器规定时间内向服务器发送一段指定数据。
//向服务器发送指定数据的方法
function sendPING() {ws.send("PING"); //具体发送内容由后端决定,不一定都是字符串PING。
}
let timer = setInterval(sendPING, 5000); //每五秒调用一次发送方法,具体时间由项目决定
相关文章:
websocket前端应用
基本了解 首先要对websocket有一个基本了解:WebSocket是一种在Web浏览器和Web服务器之间创建持久连接的技术。它允许在客户端和服务器之间进行全双工通信,而不需要在每次通信时都发起新的HTTP请求。主要作用包括实时通信、减少延迟、减少宽带消…...
SpringMVC05、结果跳转方式
5、结果跳转方式 5.1、ModelAndView 设置ModelAndView对象 , 根据view的名称 , 和视图解析器跳到指定的页面 . 页面 : {视图解析器前缀} viewName {视图解析器后缀} <!-- 视图解析器 --> <bean class"org.springframework.web.servlet.view.InternalResourc…...
STM32基础--位带操作
位带简介 位操作就是可以单独的对一个比特位读和写,这个在 51 单片机中非常常见。51 单片机中通过关键字 sbit 来实现位定义,STM32 没有这样的关键字,而是通过访问位带别名区来实现。 在 STM32 中,有两个地方实现了位带ÿ…...
C# winform 重启电脑
一、重启电脑指令 windows7系统的启动文件夹为“开始菜单”——“所有程序”里面就有“启动”文件夹,其位置是 “C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup” 如果没有,则需要将其中的"administrator…...
波奇学Linux: 信号捕捉
sigaction:修改信号对应的handler方法 act输入型参数,oldact输出型参数 void (*sa_handler) (int) //修改的自定义函数 sigset_t sa_mask // void handler(int signo) {cout<<"catch a signal, signal number: "<<signo<<endl; } int …...
Flink hello world
下载并且解压Flink Downloads | Apache Flink 启动Flink. $ ./bin/start-cluster.sh Starting cluster. Starting standalonesession daemon on host harrydeMacBook-Pro.local. Starting taskexecutor daemon on host harrydeMacBook-Pro.local. 访问localhost:8081 Flin…...
STL之map容器代码详解
基础概念 简介: map中所有元素都是pair。pair中第一个元素为key(键值),起到索引作用,第二个元素为value(实值)。所有元素都会根据元素的键值自动排序。 本质: map/multimap属于关…...
使用GRU进行天气变化的时间序列预测
本文基于最适合入门的100个深度学习项目的学习记录,同时在Google clolab上面是实现,文末有资源连接 天气变化的时间序列的难点 天气变化的时间序列预测涉及到了一系列复杂的挑战,主要是因为天气系统的高度动态性和非线性特征。以下是几个主…...
uniapp 小程序AP配网
一、TCPSocket.js 封装TCP协议 class socket {constructor() {this.connection {};}// 创建一个TCP实例establish(monitor) {this.connection wx.createTCPSocket();this.connection.connect({ address: "000.000.0.0", port: 6800 });}// 发送消息connect(messag…...
Stable Diffusion ———LDM、SD 1.0, 1.5, 2.0、SDXL、SDXL-Turbo等版本之间关系现原理详解
一、简介 2021年5月,OpenAI发表了《扩散模型超越GANs》的文章,标志着扩散模型(Diffusion Models,DM)在图像生成领域开始超越传统的GAN模型,进一步推动了DM的应用。 然而,早期的DM直接作用于像…...
GESP5级T1真题 [202309] 因数分解——O(sqrt(n))的时间复杂度,值得一看
描述 每个正整数都可以分解成素数的乘积,例如:62*3、2022 *5 现在,给定一个正整数N,请按要求输出它的因数分解式。 输入描述 输入第一行,包含一个正整数N。约定2<N<10^12 输出描述 输出一行,为N…...
Stable Diffusion 3报告
报告链接:https://stability.ai/news/stable-diffusion-3-research-paper 文章目录 要点表现架构细节通过重新加权改善整流流量Scaling Rectified Flow Transformer Models灵活的文本编码器RF相关论文 要点 发布研究论文,深入探讨Stable Diffuison 3的…...
一个足球粉丝该怎么建个个人博客?
做一个个人博客第一步该怎么做? 好多零基础的同学们不知道怎么迈出第一步。 那么,就找一个现成的模板学一学呗,毕竟我们是高贵的Ctrl c v 工程师。 但是这样也有个问题,那就是,那些模板都,太!…...
缩放算法优化步骤详解
添加链接描述 背景 假设数据存放在在unsigned char* m_pData 里面,宽和高分别是:m_nDataWidth m_nDataHeight 给定缩放比例:fXZoom fYZoom,返回缩放后的unsigned char* dataZoom 这里采用最简单的缩放算法即: 根据比…...
[axios]使用指南
axios使用指南 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 axios 安装 npm安装 $ npm install axios 使用cdn <script src"https://unpkg.com/axios/dist/axios.min.js"></script> axios API axios(config)…...
HTML5基础2
drag 可以把拖放事件拆分成4个步骤 设置元素为可拖放。为了使元素可拖动,把 draggable 属性设置为 true 。 <img draggable"true"> 拖动什么。ondragstart 和 setData() const dragestart (ev)>{ev.dataTransfer.setData(play,ev.target.id)} …...
数据结构与算法-希尔排序
引言 在计算机科学中,数据结构和算法是构建高效软件系统的基石。而排序算法作为算法领域的重要组成部分,一直在各种应用场景中发挥着关键作用。今天我们将聚焦于一种基于插入排序的改进版本——希尔排序(Shell Sort),深…...
蓝桥杯算法错题记录
这里写目录标题 本文还在跟新,最新更新时间24/3/91. nextInt () next() nextLine() 的注意事项2 . 转换数据类型int ,string,charint -> string , charstring -> int ,charchar -> int , string 进制转换十六进制转化为10 进制 最大公约数 本文还在跟新&am…...
【Python 图像处理 PIL 系列 13 -- PIL 及 Image.convert 函数介绍】
文章目录 Python PIL 介绍PIL 使用介绍PIL convert 介绍PIL convert 使用示例 Python PIL 介绍 PIL 是 Python Image Library 的简称。PIL 库中提供了诸多用来处理图片的模块,可以对图片做类似于 PS(Photoshop) 的编辑。比如:改变…...
使用docker datascience-notebook进行数据分析
Jupyter/datascience-notebook 简介 jupyter/datascience-notebook 是 Docker Hub 上可用的 Docker 镜像:https://hub.docker.com/。该镜像提供了一个开箱即用的环境,用于数据科学任务,包括: Jupyter Notebook: 一个基于 Web 的…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录,不允许匿名访问,kefu只能访问/data/kefu目录,不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...
