前端原生socket封装

直接上代码

var _this = '';function socket(url) {this.url = url;this.websocket = '';this.msg = '';this.lockReconnect = false;
}
// 初始化
socket.prototype.initWebsocket = function() {if ('WebSocket' in window) {_this = this;this.websocket = new WebSocket(this.url);this.websocket.onerror = this.onError;this.websocket.onmessage = this.onMessage;this.websocket.onopen = this.onOpen;this.websocket.onclose = this.onClose;} else {console.log('错误:浏览器不支持websocket,请更换新版浏览器');}}// 连接异常处理
socket.prototype.onError = function() {_this.msg = "websocket错误," + new Date().toTimeString() + " 状态码:" + _this.websocket.readyState;console.warn(_this.msg);// 重新连接_this.reconnect();}// 接收到消息处理
socket.prototype.onMessage = function(event) {if (event.data == 'ok') {heartCheck.start();return;}window.dispatchEvent(new CustomEvent('onmessageWS', {detail: {data: event.data}}))// 通过下面接受消息 下面这个在其他js里// window.addEventListener("onmessageWS", function(e) {//     console.log(e.detail)// })}// 关闭连接处理
socket.prototype.onClose = function(e) {_this.msg = "websocket断开连接:" + new Date().toTimeString();console.log(_this.msg);console.log('日志:' + e.code + ' ' + e.reason + ' ' + e.wasClean);if (e.code != 1000 && e.code != 1006) {// 重新连接_this.reconnect();}}// 打开连接处理
socket.prototype.onOpen = function() {_this.msg = "websocket连接成功," + new Date().toTimeString() + " 状态码:" + _this.websocket.readyState;console.log(_this.msg);_this.websocket.send('加入websocket连接');// 心跳检测重置heartCheck.start();}// 主动关闭连接
socket.prototype.close = function() {// 关闭socket连接_this.websocket.close();_this.lockReconnect = true;}// socket 重连
socket.prototype.reconnect = function() {// 已经重连则取消后续操作if (_this.lockReconnect) return;_this.lockReconnect = true;// 没连接上会一直重连,设置延迟避免请求过多tt && clearTimeout(tt);_this.msg = '正在进行重连:' + new Date().toTimeString();console.log(_this.msg);var tt = setTimeout(function() {_this.initWebsocket();_this.lockReconnect = false;}, 5000);
}let heartCheck = {timeout: 5000,timeoutObj: null,serverTimeoutObj: null,start: function() {let self = this;this.timeoutObj && clearTimeout(this.timeoutObj);this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);this.timeoutObj = setTimeout(function() {console.log('check socket heart beat……');//发送测试信息,后端收到后,返回一个消息,_this.websocket.send("ping");self.serverTimeoutObj = setTimeout(function() {_this.websocket.onerror();}, self.timeout)}, this.timeout);}
}export { socket }

调用

 sk = new socket(`ws://255,255,255,255:8080/socket/xxxx`);sk.initWebsocket();

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

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

相关文章

Facebook最全进阶使用攻略

全球最大的社媒平台Facebook用户人数已经突破30亿,是外贸人不可错过的平台,今天就总结一下Facebook的相关问题,文章略长,建议收藏慢慢看。 本文目录: 1.Facebook账号注册 2.Facebook养号技巧 3.Facebook推广营销技…

mysql 插入更新数据

insert into insert into 语句进行插入时,如果插入的字段包含 主键或者唯一索引字段,那么, 1)主键或唯一索引 已存在,则插入失败 1062 - Duplicate entry 1 for key PRIMARY 2)只有主键或者唯一索 引不存…

java使用itext生成pdf

效果&#xff1a; maven依赖 <!--PDF处理--><!-- https://mvnrepository.com/artifact/com.itextpdf/itextpdf --><dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.13.3</vers…

【Unity3D赛车游戏优化篇】【十】汽车粒子特效和引擎咆哮打造极速漂移

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

jdk 中的 keytool 的使用,以及提取 jks 文件中的公钥和私钥

这里暂时只需要知道如何使用就可以了。 首先是生成一个密钥&#xff0c; keytool -genkeypair -alias fanyfull -keypass ffkp123456 -validity 365 -storepass ffsp123456 -keystore fanyfull.jks -keyalg RSA解释一下这里的选项&#xff0c; -alias 密钥对的名称-keypass …

前端测试——端对端测试框架 Playwright 总结

在进行前端测试前&#xff0c;我们需要明确我们需要怎样的前端测试。 前端测试类型总结 前端应用测试分为几种常见类型: 端到端&#xff08;e2e&#xff09; &#xff1a;一个辅助机器人&#xff0c;表现得像一个用户&#xff0c;在应用程序周围点击&#xff0c;并验证其功能…

记录一次运行vue项目一直不成功的经历

参考&#xff1a;https://blog.csdn.net/qq_17162169/article/details/115718002 小伙伴昨天给我个项目&#xff0c;后端跑起来了&#xff0c;前端从今天早上到下午三点半都一直在尝试跑起来&#xff0c;终于刚刚搞好了&#xff0c;遇到的坑很多&#xff0c;简单记录一下 具体…

第十届IEEE电气工程与自动化国际学术论坛(IFEEA 2023)

第十届IEEE电气工程与自动化国际学术论坛&#xff08;IFEEA 2023&#xff09; 2023 10th International Forum on Electrical Engineering and Automation IFEEA论坛属一年一度的国际学术盛会。因其影响力及重要性&#xff0c;IFEEA论坛自创建筹办以来&#xff0c;便受到国内…

新版原型和原型链详解,看完整个人都通透

了解原型、原型链前需要先了解构造函数&#xff0c;new操作符 构造函数 构造函数是一种特殊的函数&#xff0c;主要用来初始化对象&#xff0c;即为对象成员变量赋初始值&#xff0c;它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来&#xff0c;然后封装到…

手机提词器有哪些?简单介绍这一款

手机提词器有哪些&#xff1f;手机提词器在现代社会中越来越受欢迎&#xff0c;原因是它可以帮助人们提高演讲和朗读的效果。使用手机提词器可以让人们更加自信地面对演讲和朗读&#xff0c;不至于出现口误或读错字的情况。此外&#xff0c;手机提词器还可以帮助人们节省时间和…

淘客商品字符动态商品id转数字id

{ "code": 200, "data": { "itemId": "700407841432", "itemName": "安踏花苞短裤女五分裤夏季新款速干冰丝高腰宽松裤子透气工装短裤", "itemVideo": { "itemVideoThum…

vue3中实现监听dom

在vue3遇到业务需要监听窗口大小然后改变dom大小&#xff0c;下面是实现思路 1.dom <div class"dom"></div> 2.组件初始化获取dom //获取dom const dom ref()const updateDomWidth () > {dom.value document.querySelector(dom)//可以根据dom的值…

认识Git的工作区、暂存区与版本库

使用 git init 命令在 gitcode 文件夹下创建如下图所示的Git仓库。现在思考这样一个问题&#xff1a;gitcode目录下创建的README文件可以直接被git管理和追踪吗&#xff1f; 答案是否定的&#xff0c;因为只有 Git 本地仓库中的文件才可以被版本控制。什么&#xff1f;难道当前…

TableConvert-免费在线表格转工具 让表格转换变得更容易

在线表格转工具TableConvert TableConvert 是一个基于web的免费且强大在线表格转换工具&#xff0c;它可以在 Excel、CSV、LaTeX 表格、HTML、JSON 数组、insert SQL、Markdown 表格 和 MediaWiki 表格等之间进行互相转换&#xff0c;也可以通过在线表格编辑器轻松的创建和生成…

【Spring使用三级缓存解决循环依赖的过程】

testService1和testService2相互依赖 当Spring创建testService1对象时&#xff0c;它会先从一级缓存中查找是否存在testService1的实例。如果缓存中不存在testService1实例&#xff0c;它将继续查找二级缓存中是否存在testService1。如果二级缓存中也不存在testService1实例&…

【SpringCloud微服务--Eureka服务注册中心】

SpringCloud微服务全家桶学习笔记【持续更新】 gitee仓库 内容&#xff1a;SpringCloud SpringCloud alibaba 技术栈&#xff1a;Java8mavengit&#xff0c;githubNginxRabbitMQSpringBoot2.0 微服务架构概述 微服务架构是一种架构模式&#xff0c;它提倡将单一应用程序划…

分布式多级缓存

例子&#xff08;测试环境&#xff09; 项目结构图 运行反向代理服务器也就是负责反向代理到三个nginx的nginx&#xff0c;该nignx也负责前端页面的跳转。 该nginx的conf为下: 突出位置就是该nginx需要反向代理的其他nginx的IP和端口。 Lua语法 linux安装Lua #安装lua环境 …

Uniapp中使用uQRCode二维码跳转小程序页面

下载插件 uQRCode官网地址 引入插件 文件如下 //--------------------------------------------------------------------- // github https://github.com/Sansnn/uQRCode //---------------------------------------------------------------------let uQRCode = {};(functio…

Python--用户输入与While循环

1、input() 函数的工作原理 input() 函数让程序暂停运⾏&#xff0c;等待⽤户输⼊⼀些⽂本。获取⽤户输⼊ 后&#xff0c;Python 将其赋给⼀个变量&#xff0c;以便使⽤。 message input("Tell me something, and I will repeat it back to you: ") print(message…

fabic如何将绘图原点移到画布中心

情况说明&#xff1a; fabic默认绘图原点为left&#xff1a;0&#xff0c;top&#xff1a;0 后端给我的内容是按照x&#xff0c;y返回的&#xff0c;需要将坐标系移到fabic画布的中心位置&#xff0c;找了下网上合适的砖&#xff0c;想一句命令直接设置&#xff0c;结果没有。…