最近学妹刚好学node，向我请教做个练手小项目，秉持着为前端输出高质量妹纸的伟大事业理念，于是准备教她用vue + node + socket.io做个烂大街的聊天室

• 服务端app.js最简单的代码

const express = require('express')
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

io.on('connection', socket => {
    console.log('ws连接成功', socket);
});
 
server.listen(3335,function () {
    console.log('3335服务启动');
})

vue随手找到了vue-socket.io这个插件，用法很简单：

• 先安装一下

npm install vue-socket.io

• 然后在main.js中注册

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO({
  debug: true,
  connection: SocketIO('http://localhost:3335')
}))

• npm run dev运行起来，然后直接两个大错呼我脸上，而且还在重复不停的跳出来

嗯？在我学妹面前打我脸？这我能忍？仔细一看，不对啊！websocket会跨域！？随手查一下，发现原来vue-socket.io其实是socket.io的封装，而socket.io会先通过polling方式看客户端能不能用websocket，那vue跨域怎么办？老鸟肯定第一时间想到用代理啊，又简单的查一下，因为每次请求都自带’/socket.io’，在vue.config.js里敲个简单的代理

module.exports = {
    devServer: {
        proxy: {
            '/socket.io': {
                target: 'http://localhost:3335',
                ws: true,
                changeOrigin: true
            },
            'sockjs-node': {
                target: 'http://localhost:3335',
                ws: false,
                changeOrigin: true
            },
        }
    }
}

运行一下，嗯？怎么还报一样的跨域啊？代理没错啊，服务端代码有问题？这也还没到服务端啊，看看网上的代码，都一样啊，都是写代理，要么就是下面服务端代码修改

• 给 socket.io 赋值一个新的端口？ 没解决！

const io = require('socket.io')(server)
io.listen(3333)

• 给 socket.io 各种配置跨域？ 没解决！

// 这种
const io = require("socket.io")(server, { cors: true })
// 或者这种
const io = require("socket.io")(server, {origins: '*:*'}})
// 或者这种
const io = require("socket.io")(server, {
    cors: {
        origin: '*'
    }
})

弄了小半天，学妹都开始有点质疑我的时候，突然灵机一动，既然服务端、代理出问题的地方不大的话，是不是注册的时候url有问题，既然它会自动加上 ‘/socket.io’ ,那么我应该给 ‘/’ 而不是完整的url啊，于是将main.js里的代码改成

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO({
  debug: true,
  connection: SocketIO('/')
}))

果然，服务端监听到连接了，也不报错了

> node-dev server/app.js

3335服务启动
ws连接成功

• 给home.vue加上客户端的连接api

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  sockets: {
    connect: function(){
      console.log('vue 链接成功');
    },
  }
}

最终成功连上打印

补充： 后续还看到一种方法，根据上方所说，socket.io会先通过polling方式看客户端能不能用websocket，我们如果确定能用websocket的话，直接给配置成websocket模式，就不用走代理了，直接添加一个{ transports: [‘websocket’] }

// 服务端：
const io = require('socket.io')(server, {
    transports: ['websocket']
}) 

// 客户端：
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO({
  debug: true,
  connection: SocketIO('http://localhost:3335', {
    transports: ['websocket']
  })
}))

当然，最后的最后，学妹把怀着我满满心意的代码，负责人一栏直接写上了某个帅学弟的名字。