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

【问题标题】：Displaying realtime socket io response on website在网站上显示实时套接字 io 响应
【发布时间】：2017-03-26 17:29:15
【问题描述】：

我正在从事一个个人项目，该项目将允许我获取有关我的计算机的信息（当前电池电量、当前 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)
});

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

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

我是一年级学生，还没有很多编程实践。如果有人能够给我指出要寻找什么的正确方向，或者指出我的逻辑中的一个主要缺陷，这将非常有帮助。

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

交易顺序：

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

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

【问题讨论】：

您希望如何显示数据的描述不清楚。您必须描述用户为了查看此数据而采取的确切步骤。通常，用户会转到您服务器上的特定 URL 并获取网页并查看该网页中的数据。那是你想要做的吗？如果是这样，那么您要么必须将电池/CPU 数据存储在服务器上，以便将其放入该用户的未来网页中，要么您必须使用浏览器中的 Javascript 将数据直接插入网页中（因为数据还是来自用户）。
我按事务顺序添加了描述系统应该工作的过程。正如我上面所说，我没有做类似事情的背景，所以如果我这样做的方式完全是垃圾，请告诉我:) @jfriend00
另外，连接到服务器网站组件的客户端没有连接到socket io组件。我曾考虑过这样做，但不确定是否是个好主意，因为套接字的主要目的是仅从运行桌面应用程序的客户端收集数据。
我建议web客户端也连接到socket.io。这会让事情变得更容易。套接字的主要目的是实时通信，这是您的情况。您不想监控数据并将它们推送到您的 Web 客户端，而无需任何魔术按钮操作吗？只是想...
real-time 在计算中有特定的含义，不是这样的。不要滥用标准术语。

标签： node.js sockets socket.io web-deployment

【解决方案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>

【讨论】：