账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue-cli 我websocket封装了,我要怎么在组件监听获取到的数据
    60
    0

    问题描述

    封装了websocket,发送数据直接就 this.socketApi.controlsendSock(controlData),
    我收到的数据也在封装的js中,我怎么把数据应用到模板中。
    还有如果监听话,websocket接收到的2次数据一样,是不是就没有监听的效果了
    

    问题出现的环境背景及自己尝试过哪些方法

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)
    websocket.js

    function websocket(){
        var url = 'wss://'+getPostUrl()+':9567/deviceop';
        ws =new WebSocket(url);
        ws.binaryType = 'arraybuffer';
        ws.onmessage = function(event){
            console.log("data === " + event.data);
            if(event.data instanceof ArrayBuffer){
                var buffer = event.data;
                var data = parse(buffer)
                var newdata = JSON.parse(data)
            }
        }
        ws.onopen = function (event) {
            console.log("链接成功")
        }
        ws.onclose = function(event){
            console.log("链接关闭")
        }
        ws.onerror = function () {
            // wsData="qweqweuqeg iqwge iqgwiug"
            console.log("WebSocket连接发生错误");
        }
    
    }
    
    function controlsendSock(controlData){
        ws.send(controlData)
    }
    
    websocket();
    export{ws,controlsendSock}
    

    你期待的结果是什么?实际看到的错误信息又是什么?

    封装中的 newdata 这个接收到的值 我怎么应用到模板中去
    
    
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 机智的小聪 普通会员 1楼

      在 Vue.js 中,你可以使用 WebSockets 来实现实时的数据传递。以下是一个简单的示例,展示如何在组件中监听并处理 WebSockets 数据:

      首先,确保已经安装了 WebSocket 的库。如果你使用的是 npm,你可以使用以下命令安装:

      npm install ws

      然后,创建一个 Vue.js 组件,并在其中添加以下代码:

      ```html

      ```

      在这个示例中,我们首先创建了一个名为 isConnected 的数据属性,用于检查 WebSockets 是否已经连接。我们还定义了一个名为 data 的变量,用于存储 WebSocket 数据。

      然后,我们在 data 变量中添加了一个 sendMessage 方法,用于将数据发送到 WebSocket。我们还设置了数据的初始值为 null。

      在 watch 配置中,我们指定了 isConnected 数据属性的值改变时的处理函数。在这个函数中,我们首先将 isConnected 设置为 true,然后将 data 设置为 true,表示 WebSockets 已经连接。

      在 methods 配置中,我们指定了 sendMessage 方法的处理函数。在这个函数中,我们将 data 设置为 data 的值,然后将 isConnected 设置为 true,表示 WebSockets 已经连接。

      最后,我们在组件的模板中使用了 v-if 命令,来检查 isConnected 是否为 true。如果是,我们就会显示一个包含 WebSocket 数据的页面。

      注意,这只是一个基本示例,实际使用时,你可能需要根据你的具体需求进行调整。例如,你可能需要处理错误,或者使用更复杂的WebSocket协议。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部