7 changed files with 1261 additions and 816 deletions
Binary file not shown.
@ -0,0 +1,184 @@ |
|||||
|
class WebSocketClass { |
||||
|
constructor(url) { |
||||
|
this.lockReconnect = false; // 是否开始重连
|
||||
|
this.wsUrl = ""; // ws 地址
|
||||
|
this.globalCallback = null; // 回调方法
|
||||
|
this.userClose = false; // 是否主动关闭
|
||||
|
this.createWebSocket(url); |
||||
|
} |
||||
|
|
||||
|
createWebSocket(url) { |
||||
|
// #ifdef H5
|
||||
|
if (typeof(WebSocket) === 'undefined') { |
||||
|
this.writeToScreen("您的浏览器不支持WebSocket，无法获取数据"); |
||||
|
return false |
||||
|
} |
||||
|
// #endif
|
||||
|
|
||||
|
// #ifdef APP-PLUS
|
||||
|
if (typeof(uni.connectSocket) === 'undefined') { |
||||
|
this.writeToScreen("您的浏览器不支持WebSocket，无法获取数据"); |
||||
|
return false |
||||
|
} |
||||
|
// #endif
|
||||
|
|
||||
|
this.wsUrl = url; |
||||
|
try { |
||||
|
// 创建一个this.ws对象【发送、接收、关闭socket都由这个对象操作】
|
||||
|
|
||||
|
// #ifdef H5
|
||||
|
this.ws = new WebSocket(this.wsUrl); |
||||
|
this.initEventHandle(); |
||||
|
// #endif
|
||||
|
|
||||
|
// #ifdef APP-PLUS
|
||||
|
let that = this |
||||
|
this.ws = uni.connectSocket({ |
||||
|
url: this.wsUrl, |
||||
|
success(data) { |
||||
|
console.log("websocket连接成功"); |
||||
|
|
||||
|
that.initEventHandle(); |
||||
|
}, |
||||
|
}); |
||||
|
// #endif
|
||||
|
} catch (e) { |
||||
|
this.reconnect(url); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 初始化
|
||||
|
initEventHandle() { |
||||
|
/** |
||||
|
* 监听WebSocket连接打开成功 |
||||
|
*/ |
||||
|
|
||||
|
// #ifdef H5
|
||||
|
this.ws.onopen = (event) => { |
||||
|
console.log("WebSocket连接打开"); |
||||
|
}; |
||||
|
// #endif
|
||||
|
|
||||
|
// #ifdef APP-PLUS
|
||||
|
this.ws.onOpen(res => { |
||||
|
console.log('WebSocket连接打开'); |
||||
|
}); |
||||
|
// #endif
|
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 连接关闭后的回调函数 |
||||
|
*/ |
||||
|
|
||||
|
// #ifdef H5
|
||||
|
this.ws.onclose = (event) => { |
||||
|
if (!this.userClose) { |
||||
|
this.reconnect(this.wsUrl); //重连
|
||||
|
} |
||||
|
}; |
||||
|
// #endif
|
||||
|
|
||||
|
// #ifdef APP-PLUS
|
||||
|
this.ws.onClose(() => { |
||||
|
if (!this.userClose) { |
||||
|
this.reconnect(this.wsUrl); //重连
|
||||
|
} |
||||
|
}); |
||||
|
// #endif
|
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 报错时的回调函数 |
||||
|
*/ |
||||
|
|
||||
|
// #ifdef H5
|
||||
|
this.ws.onerror = (event) => { |
||||
|
if (!this.userClose) { |
||||
|
this.reconnect(this.wsUrl); //重连
|
||||
|
} |
||||
|
}; |
||||
|
// #endif
|
||||
|
|
||||
|
// #ifdef APP-PLUS
|
||||
|
this.ws.onError(() => { |
||||
|
if (!this.userClose) { |
||||
|
this.reconnect(this.wsUrl); //重连
|
||||
|
} |
||||
|
}); |
||||
|
// #endif
|
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 收到服务器数据后的回调函数 |
||||
|
*/ |
||||
|
|
||||
|
// #ifdef H5
|
||||
|
this.ws.onmessage = (event) => { |
||||
|
|
||||
|
this.globalCallback(JSON.parse(event.data)) |
||||
|
}; |
||||
|
// #endif
|
||||
|
|
||||
|
// #ifdef APP-PLUS
|
||||
|
this.ws.onMessage(event => { |
||||
|
this.globalCallback(JSON.parse(event.data)) |
||||
|
}); |
||||
|
// #endif
|
||||
|
} |
||||
|
|
||||
|
// 关闭ws连接回调
|
||||
|
reconnect(url) { |
||||
|
if (this.lockReconnect) return; |
||||
|
this.ws.close(); |
||||
|
this.lockReconnect = true; // 关闭重连，没连接上会一直重连，设置延迟避免请求过多
|
||||
|
setTimeout(() => { |
||||
|
this.createWebSocket(url); |
||||
|
this.lockReconnect = false; |
||||
|
}, 1000); |
||||
|
} |
||||
|
|
||||
|
// 发送信息方法
|
||||
|
webSocketSendMsg(msg) { |
||||
|
// #ifdef H5
|
||||
|
this.ws && this.ws.send(JSON.stringify(msg)); |
||||
|
// #endif
|
||||
|
|
||||
|
// #ifdef APP-PLUS
|
||||
|
this.ws && this.ws.send({ |
||||
|
data: JSON.stringify(msg), |
||||
|
success() { |
||||
|
console.log("消息发送成功"); |
||||
|
}, |
||||
|
fail(err) { |
||||
|
console.log("关闭失败", err) |
||||
|
} |
||||
|
}); |
||||
|
// #endif
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
// 获取ws返回的数据方法
|
||||
|
getWebSocketMsg(callback) { |
||||
|
this.globalCallback = callback |
||||
|
} |
||||
|
|
||||
|
// 关闭ws方法
|
||||
|
closeSocket() { |
||||
|
if (this.ws) { |
||||
|
this.userClose = true; |
||||
|
this.ws.close({ |
||||
|
success(res) { |
||||
|
console.log("关闭成功", res) |
||||
|
}, |
||||
|
fail(err) { |
||||
|
console.log("关闭失败", err) |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeToScreen(massage) { |
||||
|
console.log(massage); |
||||
|
} |
||||
|
} |
||||
|
export default WebSocketClass; |
||||
Loading…
Reference in new issue