python后端主动向vue前端发送socket数据

        常见的前后端交互协议都是前端发送请求，后端响应请求。但是想让后端直接推送内容到前端很难，而socket就能帮助我们解决这个问题，使得后端可以主动向前端推送数据

1.python后端发送数据

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



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.emit(event, *args, **kwargs)


socketModel = SocketModel()


socketModel.emit('webPhoneUpdate', body)
socketModel.emit('webPhoneUpdateData', resultPhone)

 

2.vue前端接收数据并存入vuex中

main.js

Vue.use(new VueSocketIO({

  debug: false,

  connection: 'http://localhost:5000',

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

    store,

    actionPrefix: 'SOCKET_',

    mutationPrefix: 'SOCKET_'

  }

}))

state.js

const state = {
  phone_info : [],
  evidence_info : [],
  phone_imsi_info : [],
}
const mutations = {
  SOCKET_webPhoneUpdate: (state, data) => {
    state.phone_info.push(data);
    // state.phone_info.sort(state.phone_info.timestr)
    console.log('vuex get phone_info')
  },
  SOCKET_webEvidenceUpdate(state, data) {
    console.log('vuex get webEvidenceUpdate')
    state.evidence_info.push(data);
  },
  SOCKET_webPhoneUpdateData(state, data) {
    console.log('vuex get webPhoneUpdate')
    state.phone_imsi_info = data;
    console.log(state.phone_imsi_info)
  },
}