Emitting global events from websocket listener

Question

I want to contribute to a project - it's written in Vue, and I am a beginner in Vue.

I have two components - Setup and MainApp

Both will need to update some state based on different messages from the websocket. Some websocket messages will affect the former, some the latter.

Vue doesn't know services, so I thought I'd just create a custom component, with empty <template>. instantiate the websocket there and then issue an this.emit() every time a new message occurs in the listener.

Both other components would listen to the emits and would be able to react.

Unfortunately, I can't get the websocket component to work.

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>

the websocket "service":

<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>

Send for example from main app (this seems to work):

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

Listening to emit:

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

   }
 }

Wit this configuration, the created hook actually never gets called - and thus I'll never hit the onmessage listener. The reason to have a custom component I thought was that I would have access to the emit function.

It feels I am making it more complicated than it should be but I haven't managed yet to get it right. The solution doesn't need to follow this approach.

"Vue doesn't know services". This isn't really correct. Just build your API and import it into the component where you want to use it. There is no need for a component here. — Bert, Oct 11 '17 at 00:43
@Bert maybe you're right, the issue though is less the API than how to callback from the `onmessage` and update the other components' properties. — transient_loop, Oct 11 '17 at 01:32
@Bert I didn't exactly solve it that way but your link gave me the hunch to solve it. If you want to provide it as an answer, I will accept it. Thanks! — transient_loop, Oct 12 '17 at 00:24

score 13 · Accepted Answer · answered Oct 12 '17 at 01:28

There's no need for a socket specific component in this case. What I have done in the past on a couple projects is implement an API or store object that handles the socket messages and then import that API or store into the components that need it. Also in a similar answer, I show how to integrate a WebSocket with Vuex.

Here is an example that combines the concept of using Vue as an event emitter with a web socket that can be imported into any component. The component can subscribe and listen to the messages it wants to listen to. Wrapping the socket in this way abstracts the raw socket interface away and allows users to work with $on/$off subscriptions in a more typically Vue fashion.

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

Here is an example of that code being used in a component.

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>

And here is a working example.

score 0 · Answer 2 · answered Jan 04 '18 at 23:27

Hey this should work for you better and easy

This my example with .vue file

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>

Emitting global events from websocket listener

2 Answers2

Linked