vue-socket.io的基本使用

第一步 安装vue-socket.io

npm install vue-socket.io --save

第二步 在main.js引入

// vue-socket.IO
import VueSocketIO from 'vue-socket.io'
// socket 连接参数
Vue.use(new VueSocketIO({
    debug: true,   //false可以关闭打印
    connection: config.socketUrl,    //链接地址动态
    connection: http://192.168.101.49:8090,    //填写自己的固定地址
}))

第三步 在要使用的页面进行使用

 computed: {
            isWideView() {
                return this.$store.state.isWideView;
            },
            isMakeEventDialogVisible() {
                return this.$store.state.isMakeEventDialogVisible;
            },
        },
 computed: {
            isWideView() {
                return this.$store.state.isWideView;
            },
            isMakeEventDialogVisible() {
                return this.$store.state.isMakeEventDialogVisible;
            },
        },
        sockets: {
            connect(dataStr) {    //开始链接
                console.log('链接中')
               
            },
            clientEvent(data){   //和后端约定好事件名称，后端发来的
                console.log(data)
               this.tableData.records.map((v,i,arr)=>{
                    if(v.ip===data.roomId){
                        if(data.msg==='CALLED'){
                            v.called=true;
                        }else{
                             v.called=false;
                        }  
                    }
                })
                console.log(this.tableData.records=JSON.parse(JSON.stringify(this.tableData.records)))
            }
        },
        created() {
            this.getTaskList();
            this.userList = [];
        },
//推消息给后端
 methods: {
        clickButton: function (data) {
            // $socket is socket.io-client instance
            this.$socket.emit('emit_method', data) 
        }
    }

以上就是最最最最基本的使用。

如果在不止一处需要使用的话可以用vuex

// vue-socket.IO
import VueSocketIO from 'vue-socket.io'
// socket 连接参数
Vue.use(new VueSocketIO({
    debug: true,
    connection: config.socketUrl,
    // connection: SocketIO(`${config.socketUrl}`, options),
    vuex:{
        store,
        mutationPrefix: "SOCKET_",    //前缀名再sotre里直接前缀接后端定义的事件名即可
        actionPrefix: "SOCKET_"
    },
}))

直接放在store里的mutation里面使用

mutations: {
        //  直接监听socket的clientEvent事件
        SOCKET_clientEvent(state,data){    
            state.clientEvent=data;
        },
        // 本地加入
        SOCKET_joined(state,val){
            console.log('本地已加入会话')
            state.socket.joined=true;
        },
        // 别人加入
        SOCKET_otherjoin(state,val){
            state.socket.otherjoin=true;
        },
        // 自己离开
        SOCKET_leaved(state){
            console.log('离开房间')
            state.socket.leaved=true;
        },
        // message   
        SOCKET_message(state,data){
            console.log(JSON.parse(JSON.stringify(data)))
            if(data.length){
                state.socket.message=data[1];
                console.log(data)
            } 
        },

        // 别人离开
        SOCKET_bye(state){
            state.socket.socketStatus=true;
            console.log('离开房间',9999999)
        },