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 的…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
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 的密码…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
Bean 作用域有哪些?如何答出技术深度?
导语: Spring 面试绕不开 Bean 的作用域问题,这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开,结合典型面试题及实战场景,帮你厘清重点,打破模板式回答,…...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...
