Vue 中作为客户端使用 vue-socket.io
socket.io 简介及使用
1.安装依赖
npm install vue-socket.io
2.在main.js中引入
import Vue from 'vue';
import VueSocketIO from 'vue-socket.io';
3.与服务端建立链接
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://10.27.1.72:8088/test'
}));
4.监听和接收服务端的消息方式1
var vm = new Vue({
sockets:{ //将（socket.on）绑定事件放在sockets中
connect: function(){ //链接成功 触发此事件
//向服务端发消息
this.$socket.emit('事件名称与服务端保持一致', 参数1，参数2，...);
console.log('链接成功') },
//接收服务端传过来的值
getVal: function(val){ //getVal名字自定义 与服务端的保持一致
console.log('接收过来的服务端传递的val')
}
connect_error(err) { //这里监听 链接失败的事件 //链接失败 sccket会一直尝试去链接
有些情况下 我们不需要一直尝试
// 关闭请求
this.$socket.close();
// 开启请求
/ this.$socket.open(); }
})
5.在组件中使用
export default{
data(){
return{
id:''
}
}//与data同级目录
sockets:{
connect: function(){ //这里是监听connect事件
this.id=this.$socket.id
},
//接收服务端发来的推送
getVal: function(val){ // getVal 名字自定义 与服务端的保持一致
console.log('val')
}
},
mounted(){
//因为通过路由进当前页面sockets里的connect未被触发所以需在mounted里触发一次 即// 在这里触发connect事件
this.$socket.emit('connect', val);
}
methods: {
//自定义事件向服务端发消息
sendToservice: function(val){
this.$socket.emit('与服务端接收的名称保持一致', val);}
}
}
参考地址 vue.js socket.io的使用
浪客行1213的简书
