Vue项目WebSocket连接问题如何彻底解决？

本文共计1381个文字，预计阅读时间需要6分钟。

目录 + Vue使用WebSocket连接 + 前端配置 + 解决过程 + Vue2全局使用WebSocket记录 + 新建ws模块文件 + 在main.js中引入ws模块文件 + App.vue挂载时再次连接服务器并接收消息 + Vue使用WebSocket连接 + 前端配置 + 公共操作

目录

• vue使用websocket连接
• 前景
• 解决过程
• vue2全局使用websocket记录
• 新建ws模块文件
• 在main.js中引用ws模块文件
• App.vue挂载时再次连接服务器并且接收消息

vue使用websocket连接

前景

公司做一个包含websocket的项目，我用的是vue做的，开始只有一个组件的要求demo，就将websocket的配置直接放在组件方法中，组件挂载时直接初始化ws，但是后续组件增加，开始出现多个websocket链接的情况，是不允许的。

刚开始的做法是将websocket的方法配置等封装为一个js文件给各个组件调用，当离开组件页面进入新页面时会断连旧的ws新建一个ws，以为做到了独立，但是实际上确实多次的断连链接，十分不便。