flask + vue 的socket.io的应用

flask后端的代码我就不贴出来了，网上有很多，只是如果vue与flask分开运行的话，需要flask的跨域处理，添加这样一行代码

socketio = SocketIO(app,cors_allowed_origins='*')

vue前端，知道很多人用vue-socket.io，但是我用了之后，可以发送消息给flask（flask也收到了），但就是触发不了sockets里面的接收函数，但是用原始接收函数成功接收到了flask发送的消息。再加上后端要求有namespace的处理（即可能存在多个命名空间），我也不需要服务端，所以下载了一个socket.io-client用以处理
在src下新建plugins文件夹，在plugins在新建socket-client.js，添加如下代码

import io from 'socket.io-client'

export function getSocketIO(namespace) {
  // namespace:命名空间或path
  const url = `ws://127.0.0.1:5600/${namespace}`
  const options = {
    path: '',
    transports: ['websocket'],
    reconnectionAttempts: 3,
    reconnectionDelay: 3000,
    timestampRequests: true,
    autoConnect: false
  }
  const socket = io(url, options)
  return socket
}

更多socket.io的options参数的解释请参考https://socket.io/docs/client-api/#new-Manager-url-options

在自己的vue文件下的socket处理为

import { getSocketIO } from '@/plugins/socket-client.js'
export default {
  name: 'Test',
  data() {
    return {
      socket: null,
      showMsgs: []
    }
  },
  mounted() {
    this.socket = getSocketIO('test')
    this.doAddListener()
  },
  beforeDestroy() {
    this.doRemoveListener()
  },
  methods: {
    doAddListener() {
      if (this.socket) {
        this.socket.open()
        this.socket.on('error', (error) => {
          this.addMsg(`error: ${error}`)
        })
        this.socket.on('message', (data) => {
          this.addMsg(`message: ${data}`)
        })
      }
    },
    doRemoveListener() {
      if (this.socket) {
        this.socket.close()
      }
    },
    eventMessage() {
      this.addMsg('开始测试message')
      this.socket.emit('message', 'message for something')
    },
    addMsg(data) {
      const id = this.showMsgs.length + 1
      this.showMsgs.push({
        id, data
      })
    }
  }
}

更多具体socket.io-client的操作请参考https://github.com/socketio/socket.io-client/blob/master/docs/API.md