当前位置: 首页 > news >正文

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基础--位带操作

位带简介 位操作就是可以单独的对一个比特位读和写&#xff0c;这个在 51 单片机中非常常见。51 单片机中通过关键字 sbit 来实现位定义&#xff0c;STM32 没有这样的关键字&#xff0c;而是通过访问位带别名区来实现。 在 STM32 中&#xff0c;有两个地方实现了位带&#xff…...

C# winform 重启电脑

一、重启电脑指令 windows7系统的启动文件夹为“开始菜单”——“所有程序”里面就有“启动”文件夹&#xff0c;其位置是 “C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup” 如果没有&#xff0c;则需要将其中的"administrator…...

波奇学Linux: 信号捕捉

sigaction:修改信号对应的handler方法 act输入型参数&#xff0c;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容器代码详解

基础概念 简介&#xff1a; map中所有元素都是pair。pair中第一个元素为key&#xff08;键值&#xff09;&#xff0c;起到索引作用&#xff0c;第二个元素为value&#xff08;实值&#xff09;。所有元素都会根据元素的键值自动排序。 本质&#xff1a; map/multimap属于关…...

使用GRU进行天气变化的时间序列预测

本文基于最适合入门的100个深度学习项目的学习记录&#xff0c;同时在Google clolab上面是实现&#xff0c;文末有资源连接 天气变化的时间序列的难点 天气变化的时间序列预测涉及到了一系列复杂的挑战&#xff0c;主要是因为天气系统的高度动态性和非线性特征。以下是几个主…...

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月&#xff0c;OpenAI发表了《扩散模型超越GANs》的文章&#xff0c;标志着扩散模型&#xff08;Diffusion Models&#xff0c;DM&#xff09;在图像生成领域开始超越传统的GAN模型&#xff0c;进一步推动了DM的应用。 然而&#xff0c;早期的DM直接作用于像…...

GESP5级T1真题 [202309] 因数分解——O(sqrt(n))的时间复杂度,值得一看

描述 每个正整数都可以分解成素数的乘积&#xff0c;例如&#xff1a;62*3、2022 *5 现在&#xff0c;给定一个正整数N&#xff0c;请按要求输出它的因数分解式。 输入描述 输入第一行&#xff0c;包含一个正整数N。约定2<N<10^12 输出描述 输出一行&#xff0c;为N…...

Stable Diffusion 3报告

报告链接&#xff1a;https://stability.ai/news/stable-diffusion-3-research-paper 文章目录 要点表现架构细节通过重新加权改善整流流量Scaling Rectified Flow Transformer Models灵活的文本编码器RF相关论文 要点 发布研究论文&#xff0c;深入探讨Stable Diffuison 3的…...

一个足球粉丝该怎么建个个人博客?

做一个个人博客第一步该怎么做&#xff1f; 好多零基础的同学们不知道怎么迈出第一步。 那么&#xff0c;就找一个现成的模板学一学呗&#xff0c;毕竟我们是高贵的Ctrl c v 工程师。 但是这样也有个问题&#xff0c;那就是&#xff0c;那些模板都&#xff0c;太&#xff01;…...

缩放算法优化步骤详解

添加链接描述 背景 假设数据存放在在unsigned char* m_pData 里面&#xff0c;宽和高分别是&#xff1a;m_nDataWidth m_nDataHeight 给定缩放比例&#xff1a;fXZoom fYZoom&#xff0c;返回缩放后的unsigned char* dataZoom 这里采用最简单的缩放算法即&#xff1a; 根据比…...

[axios]使用指南

axios使用指南 Axios 是一个基于 promise 的 HTTP 库&#xff0c;可以用在浏览器和 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个步骤 设置元素为可拖放。为了使元素可拖动&#xff0c;把 draggable 属性设置为 true 。 <img draggable"true"> 拖动什么。ondragstart 和 setData() const dragestart (ev)>{ev.dataTransfer.setData(play,ev.target.id)} …...

数据结构与算法-希尔排序

引言 在计算机科学中&#xff0c;数据结构和算法是构建高效软件系统的基石。而排序算法作为算法领域的重要组成部分&#xff0c;一直在各种应用场景中发挥着关键作用。今天我们将聚焦于一种基于插入排序的改进版本——希尔排序&#xff08;Shell Sort&#xff09;&#xff0c;深…...

蓝桥杯算法错题记录

这里写目录标题 本文还在跟新&#xff0c;最新更新时间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 库中提供了诸多用来处理图片的模块&#xff0c;可以对图片做类似于 PS&#xff08;Photoshop&#xff09; 的编辑。比如&#xff1a;改变…...

使用docker datascience-notebook进行数据分析

Jupyter/datascience-notebook 简介 jupyter/datascience-notebook 是 Docker Hub 上可用的 Docker 镜像&#xff1a;https://hub.docker.com/。该镜像提供了一个开箱即用的环境&#xff0c;用于数据科学任务&#xff0c;包括&#xff1a; Jupyter Notebook: 一个基于 Web 的…...

Spring源码速成笔记,普通Java程序员进阶必备!

大多数Java程序员Spring框架还没有一个清楚的认知。拿Spring来说&#xff0c;现在面试面试官一般会直接问&#xff1a;谈一下你对Spring的理解&#xff1f;不会像以前的面试一样直接给你具象出某一个具体的点&#xff0c;而是给你抛出一个很大的范围&#xff0c;然后根据你回答…...

为什么顶尖实验室已停用传统文献综述?SITS2026案例直击AGI辅助科研的8个不可逆拐点,

第一章&#xff1a;SITS2026案例&#xff1a;AGI辅助科学研究 2026奇点智能技术大会(https://ml-summit.org) 在SITS2026前沿科学实验平台中&#xff0c;研究团队部署了具备多模态推理与自主实验规划能力的AGI系统“Helix-7”&#xff0c;用于加速材料基因组学中的新型高温超…...

告别龟速:最新版cnpm淘宝镜像配置全攻略(单次/永久/场景化指南)

1. 为什么你需要淘宝镜像&#xff1f; 如果你经常使用npm安装前端依赖&#xff0c;大概率遇到过这样的场景&#xff1a;盯着命令行界面&#xff0c;看着进度条像蜗牛一样缓慢前进&#xff0c;甚至时不时卡住报错。这种情况在国内开发者中非常普遍&#xff0c;因为npm默认的仓库…...

头歌(educoder)机器学习实战:Apriori算法解析与超市购物篮智能挖掘

1. 从购物小票到商业洞察&#xff1a;Apriori算法入门 每次逛超市结账时&#xff0c;收银台打印的那张长长的小票背后&#xff0c;藏着无数有趣的消费秘密。你可能听说过那个经典的"啤酒与尿布"故事——超市发现年轻爸爸们经常同时购买这两样商品&#xff0c;于是调整…...

Windows Cleaner终极指南:三步彻底解决C盘爆红问题

Windows Cleaner终极指南&#xff1a;三步彻底解决C盘爆红问题 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner Windows Cleaner是一款专为Windows系统设计的开源清…...

【AGI时代招聘生存指南】:错过2026奇点大会这4个信号,你的技术团队将在6个月内掉队2个代际

第一章&#xff1a;2026奇点智能技术大会&#xff1a;AGI与人才招聘 2026奇点智能技术大会(https://ml-summit.org) AGI招聘范式的结构性转变 传统技术岗位JD正被AGI原生能力模型重构。企业不再仅评估编程语言熟练度&#xff0c;而是聚焦于候选人在多模态推理、自主目标分解、…...

2048游戏AI通关秘籍:手把手教你用Minimax算法实现自动游戏(Python版)

2048游戏AI通关秘籍&#xff1a;用Minimax算法打造智能玩家&#xff08;Python实战&#xff09; 每次打开2048游戏&#xff0c;看着那些数字方块在棋盘上滑动合并&#xff0c;你是否好奇过——如果让程序自己玩这个游戏&#xff0c;它能达到什么水平&#xff1f;今天我们就用P…...

【进阶专栏】AI时代从好奇心到产品力(进阶):实战落地指南

专栏定位 基础篇:从好奇心到产品力:AI时代的产品构建方法论 进阶篇:AI时代从好奇心到产品力(进阶):实战落地指南 基础篇帮你"看懂",进阶篇帮你"做到"。 基础篇(第1-6篇)建立了GAP模型的理论框架,让你能分析和理解任何产品的行为设计。 进阶篇(第…...

告别转译 拥抱丝滑:M1/M2 Mac原生安装MATLAB 2022b实战指南

1. 为什么你需要原生版MATLAB 2022b&#xff1f; 如果你正在使用M1/M2芯片的MacBook&#xff0c;却还在忍受转译版MATLAB的卡顿&#xff0c;那这篇文章就是为你准备的。我亲身经历过从Intel转译版切换到原生版的整个过程&#xff0c;那种从"幻灯片"到"德芙般丝…...

别再只学协议了!从AVB到TSN:梳理车载以太网确定性演进的完整脉络与核心挑战

从AVB到TSN&#xff1a;车载以太网确定性技术的演进逻辑与工程实践 当一辆自动驾驶汽车在高速公路上以120km/h行驶时&#xff0c;制动指令的10毫秒延迟意味着车辆会多行进33厘米——这个距离可能决定一次避障的成败。正是这种严苛的实时性要求&#xff0c;推动着车载网络从&quo…...