记录一个vue-socket.io碰到的坑

第一步，先安装相关的socket包

npm install vue-socket.io --save

npm install socket.io-client --save

第二步，创建和服务器之间的连接，先建立一个socket.js文件，代码如下：

import io from 'socket.io-client'

let socket = io.connect('http://localhost:8000')
socket.on('connect',function(){
  console.log("链接成功")
})
export default socket

这里有个坑就是，socket.io-client的比较新的版本会导致这个写法不生效，笔者当前socket.io-client的版本是"socket.io-client": "^4.3.2", 建议安装"socket.io-client": "^2.3.0", 经过多次尝试，才发现版本问题。

2021/11/5补充，后台node下的socket.io版本是4.0，建议安装成2.x版本，不会报跨域的错误

第三步，向服务端发送事件

methods: {
      sendMsg() {
        socket.emit('login',{words:'hello'});
        console.log('已经发送了登录事件')
      }
    },

第四步，通过在服务端写好的socket.on监听事件，向前台传值

io.on('connection',function(socket){
  // 发送消息事件
  socket.emit('login',{news:'hello'});
  // 客户端监听事件
  socket.on('login',function(data){
    console.log(data)
  });

})

第五步，前台再通过socket.on监听事件，将数据绘制或打印

socket.on('login',function(data){
        console.log(data)
      });