vue-socket.io，

1、npm install vue-socket.io --save

2、main.js中引入

import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
    debug: true,
    connection: 'https://ceshih5.cn:2120',
    vuex: {
        store,
        actionPrefix: 'SOCKET_', //为vuex设置的两个前缀
        mutationPrefix: 'SOCKET_'
    },
}))

3、vuex定义

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        message:''
    },
    //相当于计算属性;
    getters: {},
    //必须同步
    mutations: {
        SOCKET_message:(state, data)=>{
           state.message = data;
        }
    },
});
export default store; //main.js引入store

4、在组件中使用

data() {
    return {
        data_show: true, //有数据
    }
},
//注意sockets与data平级
sockets: {
    connect() {
        console.log("链接成功");
    },
    disconnect() {
        console.log("断开链接");
    },
    reconnect() {
        console.log("重新链接");
    },
    //接收服务端推送的信息，new_msg 是后台定义的接收消息字段名
    new_msg(e){  
        console.log(e); //接收的消息
        if(e){
            this.getOrder(); //获取新订单
            this.demo.speakMsg('您有一条新订单,请注意查收');//原生交互，语音播报
        }
    }
},
mounted() {
	//发送信息给服务端
	this.$socket.emit("login",localStorage.getItem('token'));
	//获取订单数据
	this.getOrder(); 
},
methods:{
	//获取订单
	getOrder() {
	    this.axios.post('/api/').then(res => {
	        if (res.status == 1) {
				console.log(res)
	        }
	    })
	},
}