python websocket 心跳_前端webSocket实现聊天消息&心跳检测&断线重连

封装socket.jsclass Socket {

/**

* @description: 初始化实例属性,保存参数

*

*/

constructor(options) {

this.url = options.url;

this.callback = options.received;

this.name = options.name || 'default';

this.ws = null;

this.status = null;

this.pingInterval = null;

// 心跳检测频率

this._timeout = 3000;

this.isHeart = options.isHeart;

this.isReconnection = options.isReconnection;

}

connect(data) {

this.ws = new WebSocket(this.url);

// 建立连接

this.ws.onopen = (e) => {

this.status = 'open';

console.log("连接成功",e)

if(this.isHeart) {

// 心跳

this._heartCheck()

}

// 给后台发送数据

if(data !== undefined) {

return this.ws.send(JSON.stringify({type: 'init'}))

}

}

// 接受服务器返回的信息

this.ws.onmessage = (e) => {

if(typeof this.callback === 'function'){

return this.callback(e.data)

}else{

console.log('参数的类型必须为函数')

}

}

// 关闭连接

this.ws.onclose = (e) => {

console.log('onclose',e)

this._closeSocket(e)

}

// 报错

this.onerror = (e) => {

console.log('onerror',e)

this._closeSocket(e)

}

}

sendMsg(data) {

let msg = JSON.stringify(data)

return this.ws.send(msg)

}

_resetHeart() {

clearInterval(this.pingInterval)

return this

}

_heartCheck() {

this.pingInterval = setInterval(() => {

if(this.ws.readyState === 1) {

this.ws.send(JSON.stringify({type: 'ping'}))

}

},this._timeout)

}

_closeSocket(e) {

this._resetHeart()

if(this.status !== 'close') {

console.log('断开,重连',e)

if(this.isReconnection){

// 重连

this.connect()

}

}else{

// 手动关闭了

console.log('手动关闭',e)

}

}

close() {

this.status = 'close'

this._resetHeart()

return this.ws.close();

}

}复制代码

使用// 引入文件

const ws = new Socket({

url: 'ws://',// 地址

name: '',// name

isHeart:true,// 是否心跳

isReconnection:false,//是否断开重连

received: function(data){

// 监听服务器返回信息

console.log("received",data)

}

});

// 建立连接

let data = {

type: 'init'

}

ws.connect(data);

// 发送消息

let sendData = {

type: 'sendMsg'

}

ws.sendMsg(sendData)

// 手动关闭

ws.close()

复制代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值