从 websocket 监听器发出全局事件答案

【问题标题】：Emitting global events from websocket listener从 websocket 监听器发出全局事件
【发布时间】：2018-03-22 11:42:24
【问题描述】：

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

我有两个组件 - Setup 和 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 }
});

index.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
     });

   }
 }

有了这个配置，created 钩子实际上永远不会被调用——因此我永远不会点击onmessage 监听器。我认为拥有自定义组件的原因是我可以访问emit 函数。

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

【问题讨论】：

“Vue 不知道服务”。这真的不正确。只需构建您的 API 并将其导入到您要使用它的组件中。这里不需要组件。
@Bert 也许你是对的，但问题不是 API，而是如何从 onmessage 回调并更新其他组件的属性。
这个怎么样？ codesandbox.io/s/4wp90vvr2w
@Bert 我并没有完全解决它，但你的链接让我有预感来解决它。如果您想提供它作为答案，我会接受。谢谢！

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

在这种情况下，不需要特定于套接字的组件。我过去在几个项目中所做的是实现一个 API 或存储对象来处理套接字消息，然后将该 API 导入或存储到需要它的组件中。另外in a similar answer，我展示了如何将 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>

这是working example。

【讨论】：

【解决方案2】：

嘿，这应该更适合你，更容易

这是我的 .vue 文件示例

yourVueFile.Vue

 <template>
// key in your template here
</template>

<script>
export default {
//use the created() option to execute after vue instance is created
  created() {
    let ws = new WebSocket("yourUrl");
    ws.onopen = e => {
      ws.send(
        JSON.stringify({ your json code })
      );

        ws.onmessage = e => {
        let data = JSON.parse(e.data);

// the this.$data get your data() options in your vue instance
            this.$data.dom = data;

      };
    };
  },
  data() {
    return {
       dom: core
    };
  },
  methods: {

  }
};
</script>

【讨论】：