websocket 发送给前端一个对象_前端WebSocket封装
场景1: 只有单个长链接,不要求保活
class WebSocketClass {
constructor() {
this.instance = null;
this.connect();
}
static getInstance() {
if (!this.instance) {
this.instance = new WebSocketClass();
}
return this.instance;
}
connect() {
this.ws = new WebSocket('ws://xxxxxx');
this.ws.onopen = e => {
this.status = 'open';
console.log(`${name}连接成功`, e);
};
}
getMessage() {
this.ws.onmessage = e => {
console.log(e.data);
return e.data;
};
}
close() {
this.ws.send('close');
this.ws.close();
console.log('close');
}
}
export default new WebSocketClass();
复制代码
调用方法:
import WebSocketClass from '@/services/webSocket';
var ws = WebSocketClass;
console.log(ws.getMessage());
复制代码
关闭方法:
import WebSocketClass from '@/services/webSocket';
var ws = WebSocketClass;
ws.close();
复制代码
场景2: 多个长链接共存
如果还是需要单例调用的话,直接用上面单个模式创建,有几个创建几个,如果不需要保证单例的话:
class WebSocketClass {
constructor(name) {
this.connect(name);
}
connect(name) {
this.ws = new WebSocket(name);
this.ws.onopen = e => {
this.status = 'open';
console.log(`${name}连接成功`, e);
};
}
getMessage() {
this.ws.onmessage = e => {
console.log(e.data);
return e.data;
};
}
close() {
this.ws.send('close');
this.ws.close();
console.log('close');
}
}
export default WebSocketClass;
复制代码
调用方式:
import WebSocketClass from '@/services/webSocket';
var ws = new WebSocketClass('ws://xxxxx');
console.log(ws.getMessage());
复制代码
关闭:这种情况就无法跨域关闭了,只能在哪里开的在哪里关,不然是关不了的,拿不到创建的时候的ws长链接对象。
保活
保活的原理-->心跳,前端每隔一段时间发送一段约定好的message给后端,后端收到后返回一段约定好的message给前端,如果多久没收到前端就调用重连方法进行重连。
import { message } from 'antd';
class WebSocketClass {
constructor() {
this.instance = null;
this.connect();
}
static getInstance() {
if (!this.instance) {
this.instance = new WebSocketClass();
}
return this.instance;
}
connect() {
this.ws = new WebSocket('ws:xxxxx');
this.ws.onopen = e => {
this.status = 'open';
message.info('连接成功');
console.log(`连接成功`, e);
this.heartCheck();
this.getMessage();
};
}
heartCheck() {
// 心跳机制的时间可以自己与后端约定
this.pingPong = 'ping'; // ws的心跳机制状态值
this.pingInterval = setInterval(() => {
if (this.ws.readyState === 1) {
// 检查ws为链接状态 才可发送
this.ws.send('ping'); // 客户端发送ping
}
}, 10000);
this.pongInterval = setInterval(() => {
if (this.pingPong === 'ping') {
this.closeHandle('pingPong没有改变为pong'); // 没有返回pong 重启webSocket
}
// 重置为ping 若下一次 ping 发送失败 或者pong返回失败(pingPong不会改成pong),将重启
console.log('返回pong');
this.pingPong = 'ping';
}, 20000);
}
closeHandle(e = 'err') {
// 因为webSocket并不稳定,规定只能手动关闭(调closeMyself方法),否则就重连
if (this.status !== 'close') {
console.log(`断开,重连websocket`, e);
if (this.pingInterval !== undefined && this.pongInterval !== undefined) {
// 清除定时器
clearInterval(this.pingInterval);
clearInterval(this.pongInterval);
}
this.connect(); // 重连
} else {
console.log(`websocket手动关闭,或者正在连接`);
}
}
getMessage() {
this.ws.onmessage = e => {
if (e.data === 'pong') {
this.pingPong = 'pong'; // 服务器端返回pong,修改pingPong的状态
} else {
message.info(e.data);
}
console.log(e.data);
return e.data;
};
}
close() {
clearInterval(this.pingInterval);
clearInterval(this.pongInterval);
this.status = 'close';
this.ws.send('close');
this.ws.close();
message.info('已断开连接');
console.log('close');
}
}
export default new WebSocketClass();
复制代码
websocket 发送给前端一个对象_前端WebSocket封装相关推荐
- add.attribute向前端传_前端知识-概念篇
1.一次完整的HTTP事务是怎样的一个过程? 基本流程: a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务器端响应http请求,浏览器得到html代码 e ...
- mysql 前端后端_前端开发者学习后端(一) —— mysql 命令
一.我想说 作为一名web前端工程师,也要尝试学习后端知识,从数据库基础开始.下面是一些常用的mysql数据库命令,会持续更新,而且后期会推出koa+mysql的简单实践,在这篇文章之后~_~ 二.创 ...
- web后端开发需要会前端吗_前端和后端Web开发之间的区别
web后端开发需要会前端吗 In this post I want to help you conceptually make the move from frontend to backend, i ...
- 【文件上传绕过】——前端检测_前端js验证漏洞
文章目录 一.实验目的: 二.工具: 三.实验环境: 四.实验目的: 五.漏洞说明: 1. 漏洞原理: 2. `js前端验证`过程代码: 六.实验过程: 1. 判断是否存在前端`js绕过漏洞`: 1. ...
- java怎么接收前端请求_前端json post 请求 后端怎么接收
前端提交 POST /api/test HTTP/1.1 Host: 192.168.135.69:81 Connection: keep-alive Content-Length: 18 Origi ...
- 知识图谱前端插件_前端学习曲线原来越陡,说说我的学习经历
初学前端时,基本就是三大件:HTML+CSS+JavaScript,结合万能的jQuery就可以搭建出功能丰富.易于维护(自己感觉)的前端网站.进阶一下就是自己基于jQuery写一写插件,看着自己写的 ...
- layui 传递前端请求_前端请求后端,后端查询完毕传到前端 ,用layui 将 数据分页...
前端:我用的是layui框架的分页 js 文件 layui.config({ base : "script/" }).use(['form','layer','jquery','l ...
- 后端返回list前端如何处理_前端、后端、全栈是什么?薪资前景如何?
随着信息产业的迅猛发展,IT行业人才需求量也在逐年扩大. 据国内权威数据统计,未来五年,我国信息化人才总需求量高达1500万-2000万人.其中"软件开发"."网络工程& ...
- java 前端模板_前端模板引擎入门
模板引擎 模板引擎 起到 数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍, java后台的 ...
最新文章
- Mysql创建数据库用户
- date javascript 时区_js Date 时间戳 时区等问题总结
- Java的新项目学成在线笔记-day13(九)
- 简单剖析智能指针的思想
- BMP图片格式。1,4,8,16,24位与windows分辨率没关系
- css之文本两端对齐的两种解决方法
- Android --- 使用纯java代码实现相对布局(通俗易懂)
- 填补商用安全产品空白 山石云安全升级版本亮相OpenStack Days
- 使用SQL Server 2005 Report Builder
- Python3的bytes/str之别
- 计算机是如何启动的?从未上电到操作系统启动
- 策略→需求→建模→规划→执行
- Linux 进程间通讯(IPC)方式 ------- 共享内存
- 风口猪炒股指标_使用说明文档20210101
- 对接微信支付服务商后商户能得到哪些服务?
- FPGA基础之HLS
- 中国国家地理高清晰的PDF书籍系列经典珍藏版
- QFP、PQFP、LQFP、TQFP封装形式及PCB详解(转载)
- 计算机待机时间长黑屏怎么办,电脑黑屏?如何解决?
- re管理器修改音量_教你巧用RE管理器修改手机各种系统声音锁屏声音
热门文章
- eclipse配置PHP自动提示代码
- 同批号不同批次同一单据中出现数量不限制
- MYSQL的全表扫描,主键索引(聚集索引、第一索引),非主键索引(非聚集索引、第二索引),覆盖索引四种不同查询的分析...
- 在RHEL5下实现RAID5磁盘阵列
- 李连杰年度巨作霍元甲主题曲:周杰伦唱
- cartographer学习笔记--如何保存cartagrapher_ros建好的地图
- 720x576P时序参数图
- 极详细的ECC讲解 -OOB与ECC
- matlab simulink笔记04——switch模块
- 现代制造工程课堂笔记06-集成电路制造工程