WebSocket真实项目总结

websocket

使用websocket达成的效果:

websocket实时图表

websocket是什么?

websocket是一种网络通讯协议。 websocket 是HTML5开始提供的一种在单个TCP链接上进行全双工通讯的协议。

为什么需要websocket?

初次接触websocket,都会带着疑惑去学习,既然已经有了HTTP协议,为什么还需要另一个协议?它能带来什么好处呢?很简单,因为HTTP协议的通讯只能由客户端发起。
举列来说,我想了解今天的天气,只能是客户端向服务端发出请求,服务器返回查询结果,HTTP协议做不到服务器主动向客户端推送信息。

为什么需要websocket

传统的HTTP协议是无状态的,每次请求request都要由客户端浏览器主动发起,服务端进行处理后返回response结果,而服务端很难主动向客户端发送数据了这种客户端是主动方,服务端是被动方的传统web模式,对于信息变化不频繁的web应用来说造成的麻烦较小,而对于涉及实时信息的web应用却带来了很大的不方便,如带有即时通信,实时数据,订阅推送等功能的应用。

为什么需要websocket

websocket的优势

相对于传统HTTP每次请求-应答都需要客户端与服务端简历连接的模式,websocket是类似socket的TCP长连接通讯模式,一旦websocket连接建立后,后继数据都已帧序列的形式传输,在客户端断开websocket连接活Server端终端连接前,不需要客户端和服务端重新发起连接请求,在海量并发及客户端与服务器交互负载流量大的情况下,极大的节省了网络带宽资源的消耗,有明显的性能优势,且客户端发送和接受消息实在同一个持久连接上发起,实时性优势明显。

websocket实现方式

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

websocket构造函数

websocket对象作为一个构造函数,用于新建websocket实例

var ws = new webSocket("ws://127.0.0.1:8090")

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

webSocket.readyState

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

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

webSocket.onerror

连接发生错误的回调方法

ws.onerror = function(){alert("webSocket连接发生错误“)
}

webSocket.onclose

实例对象的onclose 属性,用于指定关闭连接后的回调函数

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

webSocket.send()

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

ws.send("your message")

总结完webSocket如何握手及其所有的方法,下面进入实战

使用websocket实现图表数据动态实时更新

websocket 封装的websocket.js代码
/* WebSocket封装* @param url: WebSocket接口地址与携带参数必填* @param onOpenFunc: WebSocket的onopen回调函数,如果不需要可传null* @param onMessageFunc: WebSocket的onmessage回调函数,如果不需要可传null* @param onCloseFunc: WebSocket的onclose回调函数,如果不需要可传null* @param onErrorFunc: WebSocket的onerror回调函数,如果不需要可传null* @param heartMessage: 发送后台的心跳包参数,必填 (给服务端的心跳包就是定期给服务端发送消息)* @param timer: 给后台传送心跳包的间隔时间,不传时使用默认值3000毫秒* @param isReconnect: 是否断掉立即重连,不传true时不重连*/
function useWebSocket(url,onOpenFunc,onMessageFunc,onCloseFunc,onErrorFunc,heartMessage,timer,isReconnect) {let isConnected = false; // 设定已链接webSocket标记// websocket对象let ws = null;// 创建并链接webSocketlet connect = () => {// 如果未链接webSocket,则创建一个新的webSocketif (!isConnected) {ws = new WebSocket(url);isConnected = true;}};// 向后台发送心跳消息let heartCheck = () => {// for (let i = 0; i < heartMessage.length; i++) {//   ws.send(JSON.stringify(heartMessage[i]))// }};// 初始化事件回调函数let initEventHandle = () => {ws.addEventListener('open', (e) => {console.log('onopen', e);// 给后台发心跳请求,在onmessage中取得消息则说明链接正常//heartCheck()// 如果传入了函数,执行onOpenFuncif (!onOpenFunc) {return false;} else {onOpenFunc(e, ws);}});ws.addEventListener('message', (e) => {// 接收到任何后台消息都说明当前连接是正常的if (!e) {console.log('get nothing from service');return false;} else {// 如果获取到后台消息,则timer毫秒后再次发起心跳请求给后台,检测是否断连setTimeout(() => {if (isConnected) {heartCheck();}},!timer ? 3000 : timer);}// 如果传入了函数,执行onMessageFuncif (!onMessageFunc) {return false;} else {onMessageFunc(e);}});ws.addEventListener('close', (e) => {console.log('onclose', e);// 如果传入了函数,执行onCloseFuncif (!onCloseFunc) {return false;} else {onCloseFunc(e);}// if (isReconnect) { // 如果断开立即重连标志为true//   // 重新链接webSocket//   connect()// }});ws.addEventListener('error', (e) => {console.log('onerror', e);// 如果传入了函数,执行onErrorFuncif (!onErrorFunc) {return false;} else {onErrorFunc(e);}if (isReconnect) {// 如果断开立即重连标志为true// 重新链接webSocketconnect();}});};// 初始化webSocket// (() => {// 1.创建并链接webSocketconnect();// 2.初始化事件回调函数initEventHandle();// 3.返回是否已连接return ws;// })()}export default {useWebSocket,};

调用方法并建立连接使用:(当连接失败后,进行websocket重连)

initWebSocket() {if(!this.ws) {// urllet url = 'ws://XXX.XXX.XXX.XXX:4002/websocket/11111'this.ws = websocket.useWebSocket(url,	// urlthis.wsOnOpen, // 链接回调this.wsOnMessage,	// 连接成功后处理接口返回信息this.wsOnClose, // 关闭回调this.wsOnError, // 消息通知错误回调[], // 发送后台的心跳包参数null, // 给后台传送心跳包的间隔时间true, // 是否断掉立即重连);}},wsOnOpen() {console.log('开始连接')},wsOnError(e) {console.log(e,'消息通知错误回调,重新连接')this.ws.close();this.ws = null;this.initWebSocket();},wsOnMessage(e) {if(e.data != '连接成功') {console.log(JSON.parse(e.data),'接口返回信息')}},wsOnClose() {console.log('关闭')// 意外关闭之后重新连接if(!this.disConnectTimer) {this.disConnectTimer = setTimeout(() => {this.initWebSocket()this.disConnectTimer = null}, 10000)}},

实现效果:
websocket实时图表
重连效果
websocket关闭重连效果
完结~

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

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

相关文章

CSS样式穿透

当我们在vue项目中使用第三方组件时&#xff0c;有时候需要去修改某些元素的样式&#xff0c;但有时写的css样式不会覆盖组件的样式&#xff0c;所以要用到样式穿透。 常用的方法有这几种&#xff1a;&#xff08;1&#xff09;>>> &#xff08;2&#xff09;/deep/ …

OpenHarmony Promise详解

一&#xff0c;定义 作为一个android开发人员&#xff0c;刚接触Promise可能不好理解&#xff0c;因为android中的异步操作都是开启线程操作或者kotlin的协程&#xff0c;但是Promise并不是单独去开启一个线程来处理异步任务&#xff0c;它是在同一个线程中去处理异步任务。异…

实际使用Elasticdump工具对Elasticsearch集群进行数据备份和数据还原

文/朱季谦 目录一、Elasticdump工具介绍二、Elasticdump工具安装三、Elasticdump工具使用 最近在开发当中做了一些涉及到Elasticsearch映射结构及数据导出导入的工作&#xff0c;怕以后会把这过程忘记&#xff0c;可谓好记性不如烂笔头&#xff0c;故而记录成一篇博文。 玩El…

Unity Text文本首行缩进两个字符的方法

Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。 参考如下代码&#xff1a; TMPtext1.text "\u3000\u3000" "这是一段有首行缩进的文本内容。\n这是第二行"; 运行效果如下图所示&#xff1a; 虽…

【代码随想录】算法训练计划21、22

day 21 1、530. 二叉搜索树的最小绝对差 题目&#xff1a; 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 思路&#xff1a; 利用了二叉搜索树的中序遍历特性用了双指…

非原始值的响应式方案

实际上&#xff0c;实现响应式数据要比想象中难很多&#xff0c;并不是单纯地拦截get/set 操作即可。举例来说&#xff0c;如何拦截 for…in 循环&#xff1f;track 函数如何追踪拦截到的 for…in 循环&#xff1f;类似的问题还有很多。除此之外&#xff0c;我们还应该考虑如何…

Java网页版即时通讯聊天系统(附源码)

疫情期间,整天闷在家里又不能聚会,大把的空余时间差点让我发霉,后来有个客户发来新年祝贺,情不自禁想起了一件事情,就是他曾经提起过,要是在后台管理系统里面整合个聊天功能该多好啊,有了这个念头,马上行动起来!!! 一.系统演示 1.1 聊天窗体主界面演示 1.2 模拟两…

基于ssm+vue的程序设计课程可视化教学系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

Unity 预制体放在场景中可见,通过代码复制出来不可见的处理

首先我制作了一个预制体&#xff0c;在场景中是可见的&#xff0c;如下图 无论是Scene视图&#xff0c;还是Game视图都正常。 我把预制体放到Resources里面&#xff0c;然后我通过如下代码复制到同个父物体下。 GameObject obj1 Instantiate(Resources.Load("Butcon&quo…

使用Python轻松实现科研绘图

当撰写在学术期刊上发表的文章时&#xff0c;图表的布局和风格应符合预定义的格式要求。这样可以确保该出版物的所有文章都具有一致的风格&#xff0c;并且任何包含的图表在打印时都是高质量的。 Python在科学界广泛使用&#xff0c;并提供了创建科学绘图的好方法。然而&#…

mysql中的各种日志文件redo log、undo log和binlog

mysql中的各种日志文件redo log、undo log和binlog mysql中的各种日志文件redo log、undo log和binlog1.MySQL日志文件类型2.redo log日志2.1 作用2.2工作原理&#xff1a;2.3详解 3.undo log日志4.binlog日志5.总结 mysql中的各种日志文件redo log、undo log和binlog 1.MySQL…

keras转onnx,TensorFlow转tf.keras.models.load_model,onnx精度转换

参考&#xff1a; https://blog.csdn.net/Deaohst/article/details/126864267 转onnx 别直接转onnx。 先转PB&#xff1a; import tensorflow as tfmodel_path ./models/model.h5 # 模型文件 model tf.keras.models.load_model(model_path) model.sa…

jbase虚拟M层的设计

对于只是自己产品内部使用的打印程序来说&#xff08;比如打印收费单&#xff0c;打印结算单等&#xff09;&#xff0c;打印逻辑写在js&#xff0c;获取其他层都是没毛病的。但是对于类型检验报告这种打印来说&#xff0c;打印格式控制逻辑写在js层是百分百不行的。因为检验报…

合众汽车选用风河Wind River Linux系统

导读合众新能源汽车股份有限公司近日选择了Wind River Linux 用于开发合众智能安全汽车平台。 合众智能安全汽车平台(Hozon Automo-tive Intelligent Security Vehicle Plat-form)是一个面向高性能服务网关及车辆控制调度的硬件与软件框架&#xff0c;将于2024年中开始投入量产…

线性表的概念

目录 1.什么叫线性表2.区分线性表的题 1.什么叫线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串… 线性表在逻辑上是…

【面试】测试/测开(未完成版)

1. 黑盒测试方法 黑盒测试&#xff1a;关注的是软件功能的实现&#xff0c;关注功能实现是否满足需求&#xff0c;测试对象是基于需求规格说明书。 1&#xff09;等价类&#xff1a;有效等价类、无效等价类 2&#xff09;边界值 3&#xff09;因果图&#xff1a;不同的原因对应…

《硅基物语.AI写作高手:从零开始用ChatGPT学会写作》《从零开始读懂相对论》

文章目录 《硅基物语.AI写作高手&#xff1a;从零开始用ChatGPT学会写作》内容简介核心精华使用ChatGPT可以高效搞定写作的好处如下 《从零开始读懂相对论》内容简介关键点书摘最后 《硅基物语.AI写作高手&#xff1a;从零开始用ChatGPT学会写作》 内容简介 本书从写作与ChatG…

如何在Docker部署Draw.io绘图工具并远程访问

文章目录 前言1. 使用Docker本地部署Drawio2. 安装cpolar内网穿透工具3. 配置Draw.io公网访问地址4. 公网远程访问Draw.io 前言 提到流程图&#xff0c;大家第一时间可能会想到Visio&#xff0c;不可否认&#xff0c;VIsio确实是功能强大&#xff0c;但是软件为收费&#xff0…

matlab二维曲面散点图插值方法

在 MATLAB 中&#xff0c;你可以使用以下函数进行二维曲面散点插值&#xff1a; griddata: 该函数可以在散点数据上进行二维插值&#xff0c;生成平滑的曲面。它支持多种插值方法&#xff0c;包括三次样条插值、最近邻插值、线性插值和自然邻近法插值。 scatteredInterpolant:…

大数据基础设施搭建 - Hadoop

文章目录 一、下载安装包二、上传压缩包三、解压压缩包四、配置环境变量五、测试Hadoop5.1 测试hadoop命令5.2 测试wordcount案例5.2.1 创建wordcount输入文本信息5.2.2 执行程序5.2.3 查看结果 六、分发压缩包到集群中其他机器6.1 分发压缩包6.2 解压压缩包6.3 配置环境变量 七…