Vue实时通讯插件(vue-socket.io)

Vue实时通讯插件(vue-socket.io)

一、下载vue-socket.io

npm install vue-socket.io --sava

二、引入到Vue-cli项目中

引入的方式有两种情形，具体根据项目需求来做

• 第一种情景：webSocket连接的地址是固定的
  在main.js中直接这样写

import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({

    debug: true,

    connection: 'http://metinseylan.com:1992',  // 连接后端地址

}))

• 第二种情形：webSocket连接地址是动态的，是通过后台接口传给我们的

import {getCode} from '@/api/api.js';
import VueSocketIO from 'vue-socket.io'; //引入插件
impirt Vue from 'vue';
getCode().then(res->{
Vue.use(new VueSocketIO({
    debug:true,
    connection:res.url
   }))
})

import App from './App'
import router from './router'

三、在mounted中执行connect

• 当socket地址是静态的写法

mounted(){
this.$socket.emit('connect',1)
}

• 当socket地址是动态的
  因为此时的socket连接地址是动态的，就会存在请求响应然后渲染的时间，这个时候就会出现socket还没渲染成功就执行App.veu，这时候connect连接事件就不会触发，所以采用定时器的方法来执行connect

mounted() {
    var timerOne = window.setInterval(() => {
      if (this.$socket) {
        this.$socket.emit('connect', 1)
        window.clearInterval(timerOne)
        return;
      }
    }, 500)
  },

四、推送消息给后台，连接socket

sockets:{
connect(data){
if(data){
    console.log("连接connect",data)
    getSocketServiceList().then(res=>{
      if(res.code){
        this.$socket.emit("authentication",{authCode:res.code}) //推送消息给后台，实现socket登录，这里推送的名称authentication是后台定义的
        }
      })
    },
    //监听连接数量 socket心跳，检测socket连接情况，这个是可有可无的，主要是直观
    users(data){ 
    console.log("在线人数",data)
    },
    //后台推送数据
    recceive_message(data){ 
      conosle.log("接受数据",data)
     },
     //断开连接，在这里会自动多次执行connect连接，直到连接成功
     reconnect(data){
     console.log("重新连接",data)
     this.$socket.emit("connect",1)
     },
     //检测断开，并重新连接
     disconnect(){
     console.log("socket已断开连接")
     console.log("是否连接重新连接",this.$socket.connected)
     this.$socket.emit("reconnect",this)
     },
     //接受后台传过来的消息进行相应的处理
     transferMessage(data){
     
     }
   }
 }

五、连接成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yDoUSJ9w-1602831293021)(./1602830922217.png)]
因为我们在 new VueSocketIO中开启debug:true就会在控制台中出现那些蓝色字体，来帮助我们调试socket，注意，如果蓝色的字中，没有包含我们就在socket中定义的事件connect、users、reconnect...那就可能是我们在main.js中创建的new VueSocketIO渲染时间有问题，这时候connect事件也不会执行

后台定义的事件

如图上所示user、transferMessage这些名词，都是后台自定义的，每个项目中可能都会有所不同，我们接受消息的事件就是靠后台来告诉我们的

vue-socket.io中自带的几个事件

connect：查看socket是否渲染成功
disconnect：检测socket断开连接
reconnect：重新连接socket事件