// 初始化 let socketUrl = "ws://127.0.0.1/notification/1920102920123232"; // 也有加密的协议 let socketUrl = "wss://127.0.0.1/notification/1920102920123232"; let ws = new WebSocket(socketUrl);
WebSocket连接状态:要获取连接状态,可以通过带有值的 socket.readyState
属性
0
—— “CONNECTING”:连接还未建立,1
—— “OPEN”:通信中,2
—— “CLOSING”:连接关闭中,3
—— “CLOSED”:连接已关闭。
WebSocket四个事件:开发中监听这四个事件处理业务
open —— 建立连接
message —— 接收到数据
close —— 连接关闭
error —— 连接错误
ws.addEventListener("open",this.openHandle); ws.addEventListener("close",this.closeHandle); ws.addEventListener("message",this.messageHandle); ws.addEventListener("error",this.errorHandle);
WebSocket发送数据:
ws.send("ping");
WebSocket保持连接的两种方式
方法一:断开重连
在 socket的close方法中,监听到连接已关闭,就让重新连接
let ws = null; let timer = null; createSocket() { let socketUrl = `ws://127.0.0.1/notification/${userId}`; ws = new WebSocket(socketUrl); ws.addEventListener("open",this.openHandle); ws.addEventListener("close",this.closeHandle); ws.addEventListener("message",this.messageHandle); ws.addEventListener("error",this.errorHandle); }, openHandle() { console.log("socket连接成功") }, closeHandle() { console.log("socket已关闭") // 断开重连 this.restartWs(); }, messageHandle(e) { console.log("socket接收消息") console.log(e) this.unReaderNum = parseInt(e.data); }, errorHandle() { console.log("socket错误!!!") }, // 断开重连 restartWs() { console.log("socket连接失败,准备重连...") timer = setInterval(() => { this.createSocket(); if (ws && ws.readyState === 0) { clearInterval(timer); timer = null; } },2000) },
方法二:socket的心跳机制
open连接之后,写个定时器,每隔一段时间send数据,看连接是否活着
分类:
Vue 杂记
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性