前端实现WebSocket即时通讯
要实现客户端与服务器端的通信，最常接触的是http（https）协议，http通信只能是客户端发起请求，服务器响应。服务器不能主动向客户端传递消息。
HTTP 协议⽆法做到服务器主动向客户端推送信息，2008年诞⽣的WebSocket 协议可以实现客户端与服务器端的双向对话，即：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。
WebSocket 协议的底层协议也是TCP协议
WebSocket 协议的标识符为ws，加密后为wss
WebSocket 协议没有同源限制，即WebSocket 协议可以跨域通信
WebSocket 协议是有状态的，是前后端交互的长连接，即建⽴连接后可以保持连接状态，通信时可以省略部分状态信息
WebSocket 协议可以发送⽂本，也可以发送⼆进制数据
客户端实现
属性
说明
readyState
当前 WebSocket 的链接状态 ， 0：正在链接中 1：已经链接并且可以通讯 2：连接正在关闭 3；连接已关闭或者没有链接成功
onopen
连接成功后的回调
onerror
连接失败后的回调
onmessage
从服务器接受到信息时的回调
onclose
连接关闭后的回调
const webSocket = new WebSocket('ws://localhost:5001')
timeout on t2 timerconsole.log('连接成功...')
webSocket.send('Hello!')
}
console.log('连接失败...')
}
console.log('接收到消息...' + event.data)
}
console.log('连接已关闭...')
}
WebSocket重连
由于⽹络的不确定性和websocket⾃⾝的问题，页⾯长时间打开的情况下有时会发⽣websocket连接的断开，为了避免这类情况引起的程序问题，可以让WebSocket对象每间隔⼀段时间和服务器通信⼀次，⼀旦发⽣异常，则重新建⽴连接，称为⼼跳检测机制，形象的说就是客户端和服务端通过发送⼼跳向对⽅证明⾃⼰还活着。
var lockReconnect = false // 是否允许重新连接
var timeout = 1000 * 20 // ⼼跳间隔
var reTimeout = 1000 * 10 // 重连间隔
var timeoutTimer = null // ⼼跳定时器
var reTimeoutTimer = null // 重连定时器
var webSocket = null
function heartCheckStart () {
timeoutTimer = setTimeout(function () {
webSocket.send('HeartBeat')
}, timeout)
}
function heartCheckReset () {
clearTimeout(timeoutTimer)
heartCheckStart()
}
function createWebSocket () {
webSocket = new WebSocket('ws://localhost:5001')
console.log('连接成功...')
heartCheckStart()
}
console.log('连接失败...')
reConnect()
}
console.log(event.data)
heartCheckReset()
}
console.log('连接已关闭...')
console.log('websocket 断开: ' + de + ' ' + ason + ' ' + event.wasClean)
reConnect()
}
}
/
/ 重连
function reConnect () {
if (lockReconnect) {
return
}
lockReconnect = true
// 没连接上会⼀直重连，设置延迟避免请求过多
reTimeoutTimer && clearTimeout(reTimeoutTimer)
reTimeoutTimer = setTimeout(function () {
createWebSocket()
lockReconnect = false
}, reTimeout)
}
createWebSocket()
服务器端实现
真实的项⽬中服务器端是由专⼈负责的，为了模拟真实的通信过程，这⾥简单⽤node搭建⼀个服务来实现WebSocket通信。
node搭建WebSocket服务器
要确保安装node，安装node运⾏环境，请下载node 安装包进⾏安装
⼀、新建⽂件夹demo，然后⽤npm init命令新建⼀个项⽬ws-demo
mkdir demo
cd demo
npm init
⼆、安装依赖ws
npm install ws
三、修改⼊⼝⽂件index.js
const WebSocket = require('ws')
const ws = new WebSocket.Server({ port: 5001 })
<('connection', ws => {
console.log('server connection')
<('message', msg => {
console.log('服务端接收的消息：', msg)
ws.send('HeartBeat')
})
ws.send('连接已建⽴')
})
四、运⾏index.js
node index.js

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。