在网站上显示实时套接字 io 响应

Question

我正在进行一个个人项目，该项目允许我获取有关我的计算机的信息（当前电池电量、当前 CPU 使用情况等）并将其实时显示在一个简单的网站上。为了实现这一点，我开发了一个可以运行我的计算机的客户端程序，以及一个服务器（运行在 node.js 上）从客户端接收数据。为此，我实现了套接字 io 来从客户端收集和请求数据。

示例：

服务器端：

socket.emit("GET_DATA");

客户端：

socket.on("GET_DATA", function(){
    // Collect data from client machine
    // ...
    // pass data back to server
    socket.emit("PASS_DATA_TO_SERVER", collectedData);
});

服务器端：

socket.on("PASS_DATA_TO_SERVER", function(data){
    // data has been collected!! Stored in the data JSON object, 
    // however limited to the scope of this function... 
    // (thats a problem)
});

我现在面临的问题是显示服务器刚刚在我的网站上收到的数据（托管在同一服务器和同一节点 js 程序上，该程序是运行套接字 io 组件）。

这是系统工作组件的可视化显示： Diagram

我是一年级学生，还没有太多的编程实践经验。如果有人能够指出我要搜索的内容的正确方向，或者指出我逻辑中的一个主要缺陷，这将非常有帮助。

如果他们需要有关该项目的任何其他信息，我更愿意提供。

交易顺序：

用户将连接到节点 js 服务器上托管的网站示例：http://example_url.com/ ---> 将显示网站
一旦用户连接到网站，用户就可以通过客户端程序从计算机运行请求数据。
示例：
- 用户连接到站点（第 1 步 ^）
- 用户点击魔术按钮
- 服务器向机器发出事件运行使客户端应用程序获取数据
- 机器运行ning客户端应用returns数据回服务器
- 服务器向网页发送数据，显示给用户。
  
  重复步骤 1 到 2，直到用户退出网站（关闭选项卡，退出浏览器）

注意：浏览网页的客户端和提供数据的客户端是两台不同的机器。

Answer 1

你可以测试这个：

server.js

'use strict';
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const interval = 1000;

app.get('/', function(req, res){
    res.sendFile(__dirname+'/index.html');
});

setInterval( function() {
  io.emit("get data");
}, interval);

io.on('connect', function(socket){
  console.log('someone connected from: ' + socket.handshake.address);
  socket.on('pass data to server', function(info){
    io.emit('send data to anybody', info);
  });
});

http.listen(3000, function(){
    console.log('listening on *:3000');
});

client.js

'use strict';
const socket = require('socket.io-client')('http://localhost:3000');
var info = {};

socket.on('connect', function () {
  console.log('connected to server');
});

socket.on('get data', function() {
  info.battery = Math.random().toFixed(4);
  info.cpu = Math.random().toFixed(4);
  info.memory = Math.random().toFixed(4); 
  console.log('battery: ' + info.battery + ', CPU: ' + info.cpu + ', memory: ' + info.memory);
  socket.emit('pass data to server', info);
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Testing Socket.io</title>
  </head>
  <body>
    <h1 id='socket'>not connected</h1>
    <p id='battery'> </p>
    <p id='cpu'> </p>
    <p id='memory'> </p>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();

      socket.on('connect', function(){
        document.getElementById('socket').innerHTML = 'connected to the server';
      });

      socket.on('send data to anybody', function(info){
        document.getElementById('battery').innerHTML = 'Battery: ' + (info.battery*100).toFixed(2) + '%';
        document.getElementById('cpu').innerHTML = 'CPU: ' + (info.cpu*100).toFixed(2) + '%';
        document.getElementById('memory').innerHTML = 'Memory: ' + (info.memory*100).toFixed(2) + '%';
      });

      socket.on('disconnected',function(){
        document.getElementById('socket').innerHTML = 'disconnected';
      });        

    </script>
  </body>  
</html>

在网站上显示实时套接字 io 响应

Displaying realtime socket io response on website

sockets

web-deployment

node.js

socket.io