zoukankan      html  css  js  c++  java
  • # 十八(二) 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);
    
            }
    

    效果:在这里插入图片描述

    在这里插入图片描述

    总结:

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

    咫尺远近却无法靠近的那个你,才敢让你发觉你并不孤寂
  • 相关阅读:
    idea 中使用 svn
    [剑指offer] 40. 数组中只出现一次的数字
    [剑指offer] 39. 平衡二叉树
    [剑指offer] 38. 二叉树的深度
    [剑指offer] 37. 数字在排序数组中出现的次数
    [剑指offer] 36. 两个链表的第一个公共结点
    [剑指offer] 35. 数组中的逆序对
    vscode在win10 / linux下的.vscode文件夹的配置 (c++/c)
    [剑指offer] 34. 第一个只出现一次的字符
    [剑指offer] 33. 丑数
  • 原文地址:https://www.cnblogs.com/tcz1018/p/14633184.html
Copyright © 2011-2022 走看看