WebSocket stops working in Vue/Node application

Question

I have a Node/Vue application. I am consuming a WebSocket from Binance, a crypto exchange. I can see the quotes on the server console as I log them, I can send them to the browser for a short period of time before the client stops logging them.

Browser just using WebSocket API Node using ws library

Node code, this I am running as it's own service as its just this.

'use strict';
const WebSocket = require('ws');
const binanceWS = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@trade')

const server = new WebSocket.Server({ port: 5002 });


//websocket connection event will return a socket you can later use

binanceWS.on("open", function() {
 console.log("connected to Binance");

});

binanceWS.on('message', function(data){
  console.log(data);
  server.on('connection', function connection(ws){
    console.log("Connected a new client");
    ws.send(data);

  });

  server.on('closed', function (id){
    console.log("connection closed");
    console.log(id);
  });

  server.on('error', function (err){
    console.log(err)
  })

})

On the Client side I am using Vue and in the app.js file I have this on the created hook.

let socket = new WebSocket("ws://localhost:5002")
    socket.addEventListener('message', function(event){
      let quotes = JSON.parse(event.data);
      console.log(quotes.p)
    });

    socket.addEventListener('error', function(event){
      console.log("closing because " + event);
    })

Right now I am only listening to the consoles in the above app.vue file.

What I see in the browser console is a lot of quotes, then they stop after a second or 2. There can be over a thousand quotes in some times. Then on occasion I see a console.log('created') that I have in a child component of app.vue. In many cases this is the last thing in the console after hundreds of quotes.

In the console.log for the server I see a lot of sessions being created with one page refresh. So much that it fills my console.

So I'm not sure I am creating the connections correcly, I am not sure if Vue is somehow stopping the console.log's?

I don't see any errors anywhere and the entire time in my server console the Binance API continues streaming.

I'm not familiar with vue but maybe You are calling front end code in wrong life cycle method, that method my be called many times not once view created — Yasser Mas, Aug 23 '19 at 00:08

Yasser Mas · Accepted Answer · 2019-08-23T01:14:05.453

you have to write server event listener outside binance on message handler;

then you can pass messages from binance to the server by emitting new event to the server

on receiving message from binance you can send data to all connection on the server

Or Try this code I think it will work :

'use strict';
const WebSocket = require('ws');
const binanceWS = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@trade')

const server = new WebSocket.Server({ port: 5002 });

server.on('connection', function connection(ws){
    console.log("Connected a new client");

  });

  server.on('closed', function (id){
    console.log("connection closed");
    console.log(id);
  });

  server.on('error', function (err){
    console.log(err)
  })

//websocket connection event will return a socket you can later use

binanceWS.on("open", function() {
 console.log("connected to Binance");

});


binanceWS.on('message', function(data){
  console.log(data);
 server.clients.forEach(function each(client) {
  if (client.readyState === WebSocket.OPEN) {
    client.send(data);
  }
 });   

})

sorry please try this server.clients.forEach(function each(client) { if (client.readyState === WebSocket.OPEN) { client.send(data); } }); https://www.npmjs.com/package/ws#server-broadcast — Yasser Mas, Aug 23 '19 at 01:12
I'am not familiar too but I have some knowledge about socket.io and it looks like it — Yasser Mas, Aug 23 '19 at 01:19

WebSocket stops working in Vue/Node application

1 Answers1