flask_socketio向前端页面发送socket包，vue前端使用vuex接收socket包

flask_socketio向前端发送socket包

1.初始化

#app.py
from flask_socketio import SocketIO

socketio = SocketIO(app,async_mode ='eventlet',cors_allowed_origins='*')
socketModel.init_socket(socketio)

2.创建model

#socketModel.py
class SocketModel:

    def __init__(self):
        self.socketIO = None
    def init_socket(self,socketio):
        self.socketIO = socketio

    def send(self, data, json=False, namespace=None, room=None,
             callback=None, include_self=True, skip_sid=None, **kwargs):
        if self.socketIO:
            self.socketIO.send(data, json=json, namespace=namespace, room=room,
                 callback=callback, include_self=include_self, skip_sid=skip_sid, **kwargs)

    def task(self,event, *args, **kwargs):
        self.socketIO.emit(event, *args, **kwargs)
    def emit(self, event, *args, **kwargs):
        if self.socketIO:
            # self.socketIO.start_background_task(self.task,event,*args,**kwargs)
            self.socketIO.emit(event, *args, **kwargs)


socketModel = SocketModel()

3.接口调用

socketModel.emit('websocket', data)

vue前端使用vuex处理socket

1.VueSocketIO初始化配置

import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({

  debug: false,

  connection: 'http://127.0.0.1:5000',

  // cors_allowed_origins:'*',
  vuex: {       // 不需要用到vuex这个可以不加

    store,

    actionPrefix: 'SOCKET_',

    mutationPrefix: 'SOCKET_'

  }

}))

2.vuex接收socket

const state = {
  socket_info : [],
}
const mutations = {
  SOCKET_websocket: (state, data) => {
    state.socket_info.push(data);
    console.log('vuex get socket')
  },