Отображение в реальном времени сокета io-ответа на сайте

-1

Я работаю над личным проектом, который позволит мне получить информацию о моем компьютере (текущий уровень заряда батареи, текущее использование ЦП и т. Д.) И отобразить его на простом веб-сайте в режиме реального времени. Для этого я разработал клиентскую программу, которая будет запускать мой компьютер, и сервер (работающий на node.js) для получения данных от клиента. Для этого я внедрил socket io для сбора и запроса данных от клиента.Отображение в реальном времени сокета 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) 
});

Проблема теперь я лицо отображает данные о сер ver, только что полученный на моем веб-сайте (размещен на том же сервере и той же самой узловой js-программе, которая запускает компонент сокета io).

Вот визуальное отображение рабочих компонентов системы: Diagram

Я первый год студент, и не имеют много практики программирования под моим поясом еще. Если кто-то может дать мне точку в правильном направлении, что искать, или указать на главный недостаток в моей логике, это было бы очень полезно.

Если у них есть какая-либо дополнительная информация о проекте, который необходим, я более чем готов предоставить его.

Порядок сделки:

Пользователь подключается к веб-сайт, размещенный на узла сервера расслоение плотной Например: http://example_url.com/ ---> сайт будет отображаться
После того как пользователь установил соединение с веб-сайтом, пользователь сможет запросить данные с компьютера, на котором запущена клиентская программа.
пример:
- пользователь подключается к сайту (шаг 1 ^)
- пользователь нажимает кнопку магическая
- сервер выдает событие машине работает клиентское приложение для получения данных
- машина работает клиентское приложение возвращает данные обратно на сервер
- сервер отправляет данные на веб-страницу, отображая их пользователю.
  
  Повторите шаг 1 до 2, до тех пор, пока пользователь не выйдет из сайта (закрывает вкладку, выходит из браузера)

Примечание: Клиент, который просматривает веб-страницу и клиент, который предоставляет данные два различных машины.

источник

2016-11-12 rellor

описание того, как вы хотите отобразить данные не ясны. Вам нужно будет описать точные шаги, которые пользователь предпринимает для просмотра этих данных. Обычно пользователь переходит к определенному URL-адресу на вашем сервере и возвращает веб-страницу и видит данные на этой веб-странице. Это то, что вы пытаетесь сделать? Если это так, то вам либо нужно хранить данные о батарее/ЦПУ на сервере, чтобы вы могли поместить его на будущую веб-страницу для этого пользователя, либо вам нужно вставить данные непосредственно на веб-страницу с помощью Javascript в браузере (поскольку данные поступают от пользователя в любом случае). – jfriend00

Я добавил в порядок транзакций, описывающих процесс работы системы. Как я уже сказал выше, у меня нет фона, делающего что-то вроде этого, так что если я собираюсь об этом, это полный мусор, дайте мне знать :) @ jfriend00 – rellor

также клиент, который подключается к компоненту веб-сайта сервера, не подключается к компоненту сокета io. Я думал об этом, но не был уверен, была ли это хорошая идея или нет, поскольку основная цель сокетов - собирать данные только у клиента, запускающего настольное приложение. – rellor

Вы можете проверить это:

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>

источник

2016-11-13 13:53:52 mk12ok

Отображение в реальном времени сокета io-ответа на сайте

ответ

Смежные вопросы