从 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 监听器发出全局事件 的相关文章

  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于
  • Javascript:混合构造函数模式和揭示模块模式

    有什么方法可以让 Javascript 类扩展通过揭示模块模式创建的对象吗 我尝试了下面的代码 但是有没有办法实现同样的事情 sv MergeQuestionViewModel function this sv QuestionDetail
  • 如何创建一个多重过滤函数来过滤掉多个属性?

    我有一个要过滤的对象数组 name Apple age 24 model Android status Under development name Roboto age 24 model Apple status Running 我需要使
  • 在 Javascript 中动态添加事件处理程序

    我在使用 Javascript 时遇到了一个奇怪的问题 我得到的是一个特定格式的字符串 我将尝试用它创建一个表 该表每行只有一个单元格 字符串的格式为 每个单元格 行 需要显示内容 将传递给的参数onmouseover当用户将鼠标移动到显示
  • Child_process 处理带有回车符 (\r) 的 STDOUT 流

    我正在编写一个简单的应用程序 它允许工作中的内部系统请求从远程服务器到使用 REST 调用发起的另一个远程服务器的复制过程 使用 rsync 我已经对express框架足够熟悉 并且刚刚开始尝试child process库 并偶然发现了一个
  • 如何获取传单标记簇中点击事件的图块?

    这是我的代码 function onMapClick e e originalEvent defaultPrevented true var orig e originalEvent console log orig target map
  • 使用 jquery 通配符检查 cookie 名称

    我有一个生成动态 cookie 的表单 例如 webform 62 1234356 62 1234356 可以是任意数字 我需要使用一些通配符检查来检查名称以 webform 开头的 cookie 是否存在 下面不起作用 if cookie
  • 覆盖函数(例如“警报”)并调用原始函数?

    我想用调用原始版本的新版本覆盖 Javascript 内置函数 类似于用调用的版本覆盖类上的方法 super有多种语言版本 我怎样才能做到这一点 例如 window alert function str do something addit
  • nodejs mocha suite 未定义错误

    我正在尝试使用摩卡运行一些测试 但似乎无法克服这个错误 E tdd nodejs cart gt mocha cart test js node js 201 throw e process nextTick error or err Re
  • Backbone 中的加载栏

    我想显示加载消息 图标 直到列表中的所有项目都已呈现 这是我的示例中的 jsfiddle http jsfiddle net 9R9zU 58 http jsfiddle net 9R9zU 58 我尝试在 Feed 部分添加一个带有加载栏
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过
  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ
  • 在overlayImage中应用滤镜的方法在哪里?

    我想在overlayImage中应用一个过滤器 唯一的方法是在渲染后在整个画布上应用过滤器 对此没有内置支持 但很容易 破解 var overlayImageUrl load overlay image first fabric Image
  • Sequelize.js - “不关联到”

    我在从数据库获取完整数据时遇到一些问题 那是我的模型 User module exports function sequelize DataTypes return sequelize define user id type DataTyp
  • 当条件评估为 true 时获取元素(扩展 ElementArrayFinder)

    我们有一个菜单 表示为ul gt li列表 简化 ul class dropdown menu li class ng scope a href class ng binding Menu Item 1 a li li li ul
  • 如何检查 Map 或 Set 是否为空?

    对于 JavaScript 中的传统对象 使用以下命令很容易检查它是否为空 Object keys method const emptyObj console log Object keys emptyObj length 0 true i
  • React + Semantic-UI:在 UI MODAL 中使用表单

    在没有 React 的普通旧 Semantic UI 中 我已经能够毫无问题地将表单放入 Modal 中 使用 Semantic UI React 版本 我能够在模态中显示表单 但它并没有按照我期望的方式工作 例如 模态框显示后 模态框内的
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简

随机推荐

  • 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 消息会影响前者 有些则影