vue2外部引入socket并使用

最近一直在做3d图表和中后台，学习点什么元宇宙和前端的关系和可实现什么啊看看react源码之类的。

结果最近项目需求开的socket做的一个前端及时展示架，好些年不用vue了所以vue-socket属性/操作方法之类的忘了😂，就采用了外部引入原socket并操作

给同类人当做一个使用文档

出现问题

1：最开始用的vue-socket版本和后端的版本和前端的不一致，后端版本是5+，前端最高是4+ 
最开始的报错解决了之后，为了怕隐患所以才采用的外部引入

代码

1: 外部引入：https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js
2: 在页面 created内 赋值socket---this.socket = io.connect('http://xxxx', {'xxx': ''})
3: 我之后是把socket的(已连接/断开连接/消息/结果)封装成了methods的方法---是因为我要通过点击切换
4: 在方法内
    that.socket.on('connect', function () { // 已连接 })
    that.socket.on('disconnect', function () { // 已断开连接 })
    that.socket.on('message', function () { // 返回消息 })
    that.socket.on('result', function () { // 结果并操作 })
5: 当切换时先断开（ this.socket.disconnect() ）再重新连接对应的socket和调用（4）方法就好

结语：好久不做socket和vue了，其实从一开始出了很多问题。

比如版本不对啊，链接不上啊，还有开始把带socket连接的数据map渲染了结果导致sid不统一，跨域，订阅问题，好像还出现过服务端问题等等等等。基本上是重新踩了

希望这篇文章能给同类当参考吧，也是给自己做个记录