WebSocket 在 Vue/Node 应用程序中停止工作

Posted 2023-02-16

【中文标题】WebSocket 在 Vue/Node 应用程序中停止工作

【英文标题】：WebSocket stops working in Vue/Node application

【发布时间】：2019-08-22 23:34:05

【问题描述】：

我有一个 Node/Vue 应用程序。我正在使用来自 Binance 的 WebSocket，这是一个加密交换。当我记录它们时，我可以在服务器控制台上看到引号，我可以在客户端停止记录它们之前将它们发送到浏览器一小段时间。

浏览器只使用WebSocket API 使用ws库的节点

节点代码，我正在运行它作为它自己的服务，就像它一样。

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

)

在客户端，我使用的是 Vue，在 app.js 文件中，我在 created 挂钩上有这个。

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

现在我只听上面app.vue 文件中的控制台。

我在浏览器控制台中看到很多引号，然后它们会在一两秒后停止。有时可能有超过一千个引号。然后有时我会在app.vue 的子组件中看到console.log('created')。在许多情况下，这是控制台中数百次引用后的最后一件事。

在服务器的 console.log 中，我看到通过一页刷新创建了很多会话。如此之多，以至于它填满了我的控制台。

所以我不确定我是否正确地创建了连接，我不确定 Vue 是否以某种方式停止了 console.log 的？

我在任何地方都没有看到任何错误，并且在我的服务器控制台中，Binance API 一直在继续流式传输。

【问题讨论】：

我对 vue 不熟悉，但也许你在错误的生命周期方法中调用了前端代码，该方法我被多次调用，而不是一次视图创建

【参考方案1】：

您必须在消息处理程序的 binance 之外编写服务器事件侦听器；

然后你可以通过向服务器发送新事件来将消息从币安传递到服务器

从币安收到消息后，您可以将数据发送到服务器上的所有连接

或者试试这个代码，我认为它会起作用：

'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);
  
 );   

)

【讨论】：

对不起，请尝试这个 server.clients.forEach(function each(client) if (client.readyState === WebSocket.OPEN) client.send(data); ); npmjs.com/package/ws#server-broadcast

我也不是很熟悉，但是对socket.io有点了解，看起来很像