从 websocket 监听器发出全局事件

2023-11-21

我想为一个项目做出贡献 - 它是用 Vue 编写的,而我是 Vue 的初学者。

我有两个组件 -Setup and MainApp

两者都需要根据来自 websocket 的不同消息来更新某些状态。有些 websocket 消息会影响前者,有些则影响后者。

Vue 不知道服务,所以我想我只是创建一个自定义组件,其中包含空<template>。在那里实例化 websocket 然后发出this.emit()每当侦听器中出现新消息时。

其他两个组件都会监​​听发射并能够做出反应。

不幸的是,我无法让 websocket 组件工作。

main.js:

import Ws from './WsService.vue';
//other imports

const routes = [
  //routes
]


const router = new VueRouter({
  routes // short for `routes: routes`
})   

const app = new Vue({
  router
}).$mount('#app')
//I thought this to be the way to instantiate my webSocket service:
const WsService = new Vue({
  el: '#WsService',
  components: { Ws }
});

索引.html

  <body>
    <div id="app">
      <div id="WsService"></div>
      <router-link to="/setup">Setup</router-link>
      <router-link to="/main-app">Main App</router-link>
      <router-view></router-view>
    </div>
    <script src="/dist/demo-app.js"></script>
  </body>

websocket“服务”:

<template>
</template>

<script>
const PORT_LOCAL = 9988; 
var ws = new WebSocket("ws://localhost:" + PORT_LOCAL);
ws.onopen = function() {
     ws.send('{"jsonrpc":"2.0","id":"reg","method":"reg","params":null}');
};

ws.onerror =  function(e) {
      console.log("error in WebSocket connection!");
      console.log(e);
};

export default {

  data() {
    return {
    }
  },

  created() {
    var self = this;
    ws.onmessage =  function(m) {
          var msg = JSON.parse(m.data);
          switch(msg.id) {
            // result for address request
            case "reg": 
              self.$emit("reg_received", msg.result);
              break;
            case "send":
              self.$emit("send_received", msg.result);
              break;
            case "subscribe":
              self.$emit("subscribe_received", msg.result);
              break;
            default:
              console.log(msg);
              break;
          }
    }
  },

  methods: {
  },

  send(id, method, params) {
     ws.send('{"jsonrpc":"2.0","id":"' + id + '","method":"' + method + '","params":null}');

    }
  }

}
</script>

例如从主应用程序发送(这似乎有效):

 import WsSvc from './WsService.vue';
 export default {
   data() {
     //
   },
   subscribe() {
     let jsonrpc = "the jsonrpc string";
     WsSvc.send(jsonrpc);
   }
 }

正在听emit:

 export default {
   data() {
     //
   },
   created() {
     this.$on("reg_received", function(result){
       //do smth with the result
     });

   }
 }

有了这个配置,createdhook 实际上永远不会被调用 - 因此我永远不会点击onmessage听众。我认为拥有自定义组件的原因是我可以访问emit功能。

感觉我让它变得比应有的更复杂,但我还没有设法把它做好。该解决方案不需要遵循这种方法。


不需要特定的套接字成分在这种情况下。我过去在几个项目中所做的就是实现一个处理套接字消息的 API 或存储对象,然后将该 API 或存储导入到需要它的组件中。还在类似的答案中,我展示了如何将 WebSocket 与 Vuex 集成。

下面是一个示例,它将使用 Vue 作为事件发射器的概念与可以导入到任何组件中的 Web 套接字相结合。组件可以订阅并监听它想监听的消息。以这种方式包装套接字会抽象出原始套接字接口,并允许用户以更典型的 Vue 方式使用 $on/$off 订阅。

Socket.js

import Vue from "vue"

const socket = new WebSocket("wss://echo.websocket.org")

const emitter = new Vue({
  methods:{
    send(message){
      if (1 === socket.readyState)
        socket.send(message)
    }
  }
})

socket.onmessage = function(msg){
  emitter.$emit("message", msg.data)
}
socket.onerror = function(err){
  emitter.$emit("error", err)
}


export default emitter

以下是在组件中使用该代码的示例。

App.vue

<template>
  <ul>
    <li v-for="message in messages">
      {{message}}
        </li>
    </ul>
</template>

<script>
    import Socket from "./socket"

    export default {
        name: 'app',
        data(){
            return {
                messages: []
            }
        },
        methods:{
          handleMessage(msg){
             this.messages.push(msg) 
          }
        },
        created(){
            Socket.$on("message", this.handleMessage)
        },
        beforeDestroy(){
            Socket.$off("message", this.handleMessage)
        }
  }
</script>

这是一个工作示例.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 websocket 监听器发出全局事件 的相关文章

随机推荐

  • Boost.Log:支持文件名和行号

    我正在努力让我的团队远离log4cxx并尝试使用Boost Log v2反而 我们目前的log4cxx 模式相当简单 log4cxx helpers Properties prop prop setProperty log4j rootLo
  • 不使用 MVVM 开发 WPF 软件

    我们想开始开发一个中间桌面软件 我们决定使用 WPF 我们不想使用 MVVM 模式 因为我们对MVVM不熟悉 而且也有时间限制 是否真的可以不使用MVVM模式来开发WPF应用程序 使用3层架构但不使用MVVM 虽然它的性能比 win 形式更
  • 如何在scrapy蜘蛛的start_urls中发送post数据

    我想抓取一个仅支持发布数据的网站 我想发送查询参数 在所有请求的发布数据中 如何实现这一目标 可以使用 scrapy 发出 POST 请求Request or 表单请求类 另外 考虑使用start requests 方法而不是start u
  • 升级 Flutter 3.3.0 RaisingButton 后显示错误:未为“CartScreen”类型定义方法“FlatButton”。 (未定义的方法

    FlatButton child Text ORDER NOW onPressed Provider of
  • 如何通过终端获取最新文件的名称?

    我正在尝试创建一个宏键盘大师对于 OS X 执行以下操作 根据创建日期获取磁盘上目录中最新文件的名称 粘贴文本 最新文件 加上最新文件的名称 它的选项之一是 执行 shell 脚本 所以我认为这可以完成 1 在谷歌搜索了一下之后 我想出了这
  • 如何使用 Json.Net 将 JSON 数组反序列化为对象?

    我有一个有效的 JSON 对象 其中包含一个 JSON 数组 JSON 数组没有花括号 并且包含一个以逗号分隔的混合类型列表 它看起来像这样 ID 17 Days 979 Start Date 10 13 2012 End Date 11
  • 如何在真实设备上测试 Braintree + Apple Pay?

    我正在为美国境外的美国客户开发一款使用 Apple Pay 的应用程序 我正在使用 Braintree Apple Pay 我们支持真实信用卡到 Passbook 但我们无法验证它们 我成功生成了客户端令牌 self braintree并尝
  • 在 Razor VB.net MVC 中使用无法按预期工作

    我不知道为什么这个语法会抱怨错误 Enter 未声明 由于保护级别可能无法访问 并且必须输入 html 来消除该错误 该块抱怨错误 Using Html BeginForm GetUser UserProfile FormMethod Po
  • 无论设置是否正确,PHP 连接都会在大文件上传时重置

    我遇到了一个非常常见的问题 似乎找到的所有可用解决方案都不起作用 我们有一个接收大量流量的 LAMP 服务器 使用此服务器 我们执行定期文件提交上传 在小文件上传时 它工作得很好 对于大约 4 5MB 的文件 此提交上传会间歇性失败 有时有
  • 带有 PhoneGap 的 Google+ 登录按钮

    我们如何将 JS Google 登录按钮与 Phonegap 一起使用 专门针对iOS 我已经发现本文关于使用phonegap和childbrowser插件进行oauth 但是我不确定该方法是否适用于Google 登录按钮 有任何想法吗 G
  • 在 SQLAlchemy 中映射大量相似的表

    我有许多 2000 个位置的时间序列数据 每个时间序列都有数百万行 我想将它们存储在 Postgres 数据库中 我当前的方法是为每个位置时间序列建立一个表 以及一个存储每个位置信息 坐标 海拔等 的元表 我正在使用 Python SQLA
  • 使用什么转换属性进行变换?

    我不确定这是否是正确的方法 但我想旋转一个元素 而且我知道transform rotate 90deg transition property all会起作用 但我不想过渡all的转变 What transition property我应该
  • 我的应用程序的 Facebook 故事:无法生成故事

    在我的 Facebook 应用程序的 Open Graph 仪表板中 在使用标准对象创建自定义或故事后 我的故事出现错误 显示 无法生成故事 因此 在 facebookdeveloper apps myapp story openGraph
  • 当解决方案具有多个 Web 应用程序时,TFS 2010 + MSDeploy

    我有两个解决方案 SolutionA sln WebApplication1 csproj SolutionB sln WebApplication1 csproj WebApplication2 csproj 我还有两个 TFS 2010
  • 以编程方式在表变量中设置身份种子

    我需要创建一个带有标识种子的表变量 该标识种子以另一个表中字段的最大值开头 我试过这个 DECLARE IdentitySeed int SET IdentitySeed SELECT MAX HHRecId 1 FROM xxx DECL
  • 推送通知代码执行(强制退出应用程序)

    我想知道像 Whatsapp 这样的应用程序如何能够向消息的发件人提供送达收据 双绿色支票 我发现 即使您强制退出 Whatsapp 使用应用程序任务切换器并将应用程序滑开 发件人仍然会在手机收到推送通知时收到送达收据 双绿色勾号 显然 他
  • 是否可以从 JavaDoc 创建 Java 类?

    问题是 目前我的团队为一家供应商工作 该供应商为我们提供了他们库中的大量 JavaDoc 规范 但没有提供带有存根或实现的 jar 文件 我们已经与他们交谈过 但他们只会在 2 到 3 周内提供 jar 文件 我不想等到这个时候才开始我们的
  • SQL:从全名字段中解析名字、中间名和姓氏

    如何使用 SQL 从全名字段中解析名字 中间名和姓氏 我需要尝试匹配与全名不直接匹配的名称 我希望能够将全名字段分解为名字 中间名和姓氏 数据不包含任何前缀或后缀 中间名是可选的 数据格式为 First Middle Last 我对一些实用
  • 如何在项目中导入Angular Material?

    我已经安装了 Angular Material Design 现在我尝试将其添加到app module ts file import MaterialModule from angular material 我应该在部分中确定什么 impo
  • 从 websocket 监听器发出全局事件

    我想为一个项目做出贡献 它是用 Vue 编写的 而我是 Vue 的初学者 我有两个组件 Setup and MainApp 两者都需要根据来自 websocket 的不同消息来更新某些状态 有些 websocket 消息会影响前者 有些则影