vue-socket.io踩坑总结（跨域问题，数据接收问题，koa无法connection问题，部分细节问题）

最近项目上要用到socket服务，捣鼓了一天，踩了很多坑，记录一下。

项目架构

• koa2 + vue/cli3

先看一下网上有没有现成的库，搜索一下：vue socket，发现有一个vue-socket.io库，还蛮多人用的，跟着网上的写法走。

socket.io搭建使用

koa2增加socket.io

• npm i socket.io -S
• koa2使用的中间件模式，将socket和http共用一个端口

// app.js
const Koa = require('koa')
const app = new Koa()

module.exports = app

// www
var app = require('../app')
var http = require('http')
var server = http.createServer(app.callback())

const SocketIO = require('socket.io')
const io = SocketIO(server)

• 发送，接收消息

io.on('connection', socket => {
   
    console.log('连接成功')
    // 发送
    socket.emit('test1', {
   'test': 1})
    // 接收
    socket.on('test2', data => {
   
      console.log('收到', data)
    })
  })

vue/cli3增加socket

• npm i vue-socket.io -S
• 按照网上的方法在main.js引入

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

• 在组件中使用

export default {
   
 mounted () {
   
   this.$socket