Vue实时通讯插件(vue-socket.io)
Vue实时通讯插件(vue-socket.io)文章目录Vue实时通讯插件(vue-socket.io)一、下载vue-socket.io三、在mounted中执行connect四、推送消息给后台,连接socket五、连接成功后台定义的事件vue-socket.io中自带的几个事件一、下载vue-socket.ionpm install vue-socket.io --sava####二、引入到V
·
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事件
更多推荐
已为社区贡献1条内容
所有评论(0)