WebSocket使用方法

 

/*****************websocket用法start*******************/
// 判断页面有没有存在websocket连接
if (window.WebSocket) {
　　let ws = new WebSocket("ws://xx.xxxx.xx") // 与后端配置ip端口一致（连接websocket）
 　　ws.onopen = function() {
 　　　　console.log("服务器连接成功")
 　　}
　　ws.onclose = function() {
　　　　console.log("服务器连接关闭")
　　　　reconnect()
   }
　　ws.onerror = function(e) {
　　　　console.log("服务器连接出错", e)
　　　　reconnect()
　　}
　　ws.onmessage = function(e) { // 接收服务器返回的数据
　　　　console.log(e.data)
　　}
} else {
　　console.log('抱歉，您的浏览器不支持Websocket协议！')
}
/*****************websocket用法end*******************/
let ws = null
let time = null
let date = null
let lockReconnect = false
let url = ws://xxx.xxxxxx.xxx
// 重连webscoket
function reconnect(){
　　if (lockReconnect) return;
　　lockReconnect = true
　　time && clearTimeout(time)
　　time = setTimeout(function(){
　　　　createWebSocket()
　　　　lockReconnect = false
　　}, 4000)
}
// 创建websocket连接
function creatWebSocket() {
　　if (window.WebSocket) {
　　　　try { // 尝试连接websocket
　　　　　　ws = new WebSocket(url)
　　　　　　init()
　　　　} catch { // 连接失败，重新连接
　　　　　　reconnect()
　　　　}
　　} else {
　　　　console.log('抱歉，您的浏览器不支持webscoket协议')
　　}
}
// websocket初始化
function init() {
　　ws.onopen = function() {
　　　　ws.send(JSON串) // 向后端发送数据
　　　　start() // 一段时间后关闭连接
　　}
　　ws.onclose = function() { // 关闭服务后重新连接
　　　　reconnect()
　　}
　　ws.onerror = function(e) { // 报错重连
　　　　reconnect()
　　}
　　ws.onmessage = function(e){ // 接收成功，心跳检测
　　　　start()
　　}
}
// 心跳检测，即间隔一段时间后关闭连接，再次尝试连接
function start() {
　　date && clearTimeout(date)
　　date = setTimeout(function() {
　　　　ws.close()
　　}, 600000)
}