websocket(一)封装使用
程序员文章站
2024-03-23 10:40:04
...
介绍
WebSocket
用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术。WebSocket
协议基于TCP
协议实现,包含初始的握手过程,以及后续的多次数据帧双向传输过程。其目的是在WebSocket
应用和WebSocket
服务器进行频繁双向通信时,可以使服务器避免打开多个HTTP
连接进行工作来节约资源,提高了工作效率和资源利用率。
API介绍
- 构造函数
WebSocket(url, protocols)
:构造WebSocket
对象,以及建立和服务器连接;protocols
可选字段,代表选择的子协议 - 状态变量
readyState
: 代表当前连接的状态,短整型数据,取值为CONNECTING
(值为0),OPEN
(值为1),CLOSING
(值为2),CLOSED
(值为3) - 方法变量
close(code, reason)
: 关闭此WebSocket
连接。 - 状态变量
bufferedAmount: send
函数调用后,被缓存并且未发送到网络上的数据长度 - 方法变量
send(data)
: 将数据data通过此WebSocket
发送到对端 - 回调函数
onopen/onmessage/onerror/onclose
: 当相应的事件发生时会触发此回调函数
代码
这里采用封装的思想 WBT
var WBT = function (obj) {
/*
websocket接口地址
1、http请求还是https请求 前缀不一样
2、ip地址host
3、端口号
*/
const config = obj ? obj : {}
const protocol = (window.location.protocol == 'http:') ? 'ws://' : 'wss://';
const host = window.location.host;
const port = ':8087';
//接口地址url
this.url = config.ip || protocol + host + port;
//socket对象
this.socket;
//心跳状态 为false时不能执行操作 等待重连
this.isHeartflag = false;
//重连状态 避免不间断的重连操作
this.isReconnect = false;
//自定义Ws连接函数:服务器连接成功
this.onopen = ((e) => {
this.isHeartflag = true;
console.log(e)
})
//自定义Ws消息接收函数:服务器向前端推送消息时触发
this.onmessage = ((e) => {
//处理各种推送消息
// console.log(message)
this.handleEvent(message)
})
//自定义Ws异常事件:Ws报错后触发
this.onerror = ((e) => {
console.log('error')
this.isHeartflag = false;
this.reConnect();
})
//自定义Ws关闭事件:Ws连接关闭后触发
this.onclose = ((e) => {
this.reConnect()
console.log('close')
})
//初始化websocket连接
this.initWs()
}
初始化 initWs
//初始化websocket连接
WBT.prototype.initWs = function () {
window.WebSocket = window.WebSocket || window.MozWebSocket;
if (!window.WebSocket) { // 检测浏览器支持
console.error('错误: 浏览器不支持websocket');
return;
}
var that = this;
this.socket = new WebSocket(this.url); // 创建连接并注册响应函数
this.socket.onopen = function (e) {
that.onopen(e);
};
this.socket.onmessage = function (e) {
that.onmessage(e);
};
this.socket.onclose = function (e) {
that.onclose(e);
that.socket = null; // 清理
};
this.socket.onerror = function (e) {
that.onerror(e);
}
return this;
}
断线重连 reConnect
WBT.prototype.reConnect = function () {
if (this.isReconnect) return;
this.isReconnect = true;
//没连接上会一直重连,设置延迟避免请求过多
setTimeout(function () {
this.initWs()
this.isReconnect = false;
}, 2000);
}
处理消息 handle
//处理消息
WBT.prototype.handleEvent = function (message) {
const action = message.action;
const retCode = message.params.retCode.id;
//根据action和retCode处理事件
// console.log(action,retCode)
if (this.handleAction[action][retCode]) this.handleAction[action][retCode]();
}
//事务处理 根据action
WBT.prototype.handleAction = {
//登录反馈
'loginRsp': {
'0': function () {
console.log(0)
},
'3': function () {
console.log(3)
}
}
}
发送消息-登录login
let defaultParam = {
action: "loginReq",
tsxId: "1",
params:{}
}
WBT.prototype.login = function (params) {
//ws还没建立连接(发生错误)
if (!this.isHeartflag) {
console.log('连接中……')
return;
}
let loginParam = defaultParam;
loginParam.params = params;
//组装json数据
this.socket.send(JSON.stringify(loginParam))
}
使用 index.html
var WS = new WBT()
var b = {
dc: {
id: "admin",
passwd: "21232f297a57a5a743894a0e4a801fc3",
version: "UDT-0.3.0"
}
}
//发送消息
WS.login(b)
上一篇: Python3学习笔记_app自动化测试_通用操作_20200811
下一篇: 104键盘对照表
推荐阅读
-
WebSocket 知识使用
-
websocket(一)封装使用
-
从零开始的异世界!使用<img>和<iFrame>等HTML基础标签制作一个视频播放网站
-
一篇文章带你学会 LoggerFactory.getLogger 的使用
-
EasyXRecyclerView库基于RecyclerView的终极封装(一)
-
从零开始实现ASP.NET Core MVC的插件式开发(一) - 使用ApplicationPart动态加载控制器和视图...
-
解决使用 HBase Bulk Loading 工具出现超过32个hfile的问题,针对一个region的family 博客分类: hadoop-hbase hbasehadoopLoadIncrementalHFilescompletebulkload
-
使用微软 Azure IoT 开发者套件开发一个温湿度读取器
-
HC05蓝牙模块(主从一体)简单使用
-
跟着官网学Struts2使用(一) 博客分类: javaWeb知识总结 mavenstruts2java