这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战
认清需求是第一步!实战中需求是这样的:
web 前端 A1 与后端 C1 建立 websocket,等后端 C2 推送给 C1 一个 callBack 消息后,C1 再将这个消息推回给 A1,最后 A1 拿到这个回执后渲染界面;
额外说明:这个回执是由内嵌在 A1 iframe 里的 web 前端 A2 的用户输入的。
脑图如下:
弄清需求后,就开始刷刷刷写代码了✍(这里实现 web 前端 A1 的逻辑)
此处通过wss://echo.websocket.org 来模拟连接地址:
重点说明:
var limitConnect = 20 // 断线重连次数
var timeConnect = 0
const service = 'wss://echo.websocket.org'
// socket初始化
const webSocketInit = function() {
var ws = new WebSocket(service)
let ws_close_correctly = false
ws.onopen = function() {
console.log('已连接TCP服务器')
}
ws.onmessage = function(msg) {
if (msg.data === 'callBack') { //
ws.close()
ws_close_correctly = true
console.log("拿到回执,渲染界面")
}
}
ws.onclose = function() {
console.log(ws_close_correctly ? 'ws 正常断开' : 'ws 异常断开')
reconnect(service)
}
// 重连
function reconnect(service) {
if (ws_close_correctly) return
if (limitConnect > 0) {
limitConnect--
timeConnect++
console.log('第' + timeConnect + '次重连')
setTimeout(function() {
webSocketInit()
}, 2000)
} else {
console.log('TCP连接已超时')
}
}
// 心跳 * 发送
var timer = setInterval(function() {
if (!isOpen(ws)) {
console.log('ws 已断开,不用发 ping')
clearInterval(timer)
return false
}
if (ws.readyState === 3) {
console.log('发送 send 失败,重连')
clearInterval(timer)
reconnect(service)
}
ws.send('ping')
}, 1000 * 10)
function isOpen(ws) { return ws.readyState === ws.OPEN }
}
调用:
webSocketInit()
功能确实是实现了,但是还有些疑问:
哭了,基本需求是解决了,但是这些开放性的问题一个接着一个,等待去回答!!
在逐层理解的过程中,就会对 websocket 有新的认识~
通过这次实战,也梳理了些概念点:
还有很多点可以去探究,可以把代码拷在控制台上玩一玩儿~
看到这里,喜欢就点个赞吧~👍👍👍后续会有更多关于实战的分享!
实践是检验真理的唯一标准!
我是掘进安东尼,输出暴露输入,技术洞见生活,下次再会~