Websocket使用——Vue使用websocket
逻辑实现
- 首先需要判断浏览器是否支持websocket,关于如何解决兼容性问题可以参考:https://juejin.cn/post/6844903602528469005
- 在组件加载的时候连接websocket,在组件销毁的时候断开websocket
- 后端接口需要引入socket模块,否则不能实现连接
代码实例
<script> export default { data () { return { wsUrl: 'ws://127.0.0.1:8551/websocket/yunkuangjian', upgradeSocket: null, lockReconnet: false, //避免重复连接 isReconnet: false, globalCallback: null, } }, created() { //开启socket监控 this.initUpgradeSocket(); }, destroyed: function () { //销毁socket this.socketClose(); }, methods: { //初始化websocket initUpgradeSocket() { if (typeof WebSocket === 'undefined') { alert('您的浏览器不支持socket'); } else { if ('WebSocket' in window) { this.upgradeSocket = new WebSocket(this.wsUrl); } else if ('MozWebSocket' in window) { this.upgradeSocket = new MozWebSocket(this.wsUrl); } // 监听socket连接 this.upgradeSocket.onopen = this.socketOpen; // 监听socket消息 this.upgradeSocket.onmessage = this.socketMessage; // 监听socket错误信息 this.upgradeSocket.onerror = this.socketError; //断开连接 this.upgradeSocket.onclose = this.socketClose; } }, socketOpen() { console.log('socket连接成功'); //heartCheck.reset().start() //后端说暂时不需要做心跳检测 if (this.isReconnet) { //执行全局回调函数 console.log('websocket重新连接了'); // sendMsg(sendData, globalCallback); // isReconnet = false; } }, /** * 接收数据 * @param {} ev */ socketMessage(ev) { const notifyData = ev.data; this.$message(notifyData); //heartCheck.reset().start() //后端说暂时不需要做心跳检测 }, socketError() { console.log('websocket服务出错了---onerror'); }, socketClose() { this.upgradeSocket.close(); console.log('websocket服务关闭了+++onclose'); } }, }
标签:
Vue使用websocket
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」