Vue中作为客户端使用vue-socket.io

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的   

---

xhh