# 十八(二) vue使用WebSocket IO

十八(二) vue使用WebSocket IO

解释:

这个其实个websocket的差不多，只不过这个是用的事件来进行区分监听的，本质上web自带的webSocket的是可以直接使用的，但是socketIo 需要安装依赖库，
连接的方式基本上差不多，建立连接后，直接进行事件监听，根据事件就可以相互传输数据

安装依赖：

    npm install vue-socket.io --save

进行初始化：

webSocket连接的地址是固定的：
在进行相应的连接过程，都是放在main.js中，直接通过插件的方式直接放进去。

//main.js
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
    debug: true,
    connection: 'http://127.0.0.1:9993', //连接的静态地址
}))

事件监听进行连接

//直接进行展示书写的
methods:{
   // 连接socket 实时获取大屏数据
   getRealTimeData(){
        //进行事件的连接监听 根据约束的值 进行连接   
        this.$socket.emit('userMessage', ''); //参数:('连接的事件','传给后台的值')
   },
},
sockets:{
    	//连接成功
      connect: function () {
        console.log('socket connected')
      },
      customEmit: function (data) {
        console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')},
        //断开重连 在此位置会进行多次的重新连接 直到连接成功
        reconnect(data){
			this.$socket.emit('connect',1)
		}
        //连接断开 在此位置会进行多次的重新连接 直到连接成功
        reconnect(data){
			this.$socket.emit('reconnect','')
		}
      //后台定义的事件监听 打印返回数据
      userMessage(data){
        console.log(data)
      },
      //后台定义的事件监听 打印返回数据
      senUserMessage(data){
        console.log(data)
      },
},

注意: 发送消息也是根据事件进行指定发送

            clickButton: function(val){                       //添加按钮事件向服务端发送数据

                this.$socket.emit('emit_method', val);

        }

效果:

总结:

其实用起来没啥区别,就是根据事件进行操作,更加的实例化了吧.