Как использовать socket.io для связи с интерфейсом? - PullRequest
Новая
       16

Как использовать socket.io для связи с интерфейсом?

0 голосов
/ 06 января 2020

Я пытаюсь отобразить загрузку процессора в веб-приложении. Я следил за этим видео: https://www.youtube.com/watch?v=N8kqK9srXu8. Видео использует express, но я отказался от этого, так как я все еще новичок в узле. Я дошел до того, что он использует socket.io для передачи информации во внешний интерфейс. Я получаю Uncaught ReferenceError: io is not defined., а ссылка на строку - когда я звоню var socket = io('http://localhost'); или var socket = io();. Вот код узла: 

const http = require('http');
const path = require('path');
const fs = require('fs');
var io = require("socket.io")(http);
const os = require('os-utils');

indexPath = "C:\\Users\\Sebastian\\Documents\\VScode\\Personal Projects\\Startpage\\startpage.html";

const server = http.createServer((req,res) => {
    let filePath = path.join(
        __dirname,  
        req.url === '/'? 'startpage.html': req.url
    );
    let extname = path.extname(filePath);
    let contentType = 'text/html';
    switch(extname){
        case '.js':
            contentType = 'text/javascript';
            break;
        case '.css':
            contentType = 'text/css';
            break;
        case '.json':
            contentType = 'application/json';
            break;
    }
    fs.readFile(filePath, 
        (err,content) =>{
            res.writeHead(200, {'Content-Type': contentType});
            res.end(content, 'utf8');
        });
});

var histogramLength = 61;
var cpuHist = [];
var interval = 100;

const PORT = process.env.PORT || 5000;
server.listen(PORT, () =>{ 
    console.log(`Server running on port ${PORT}`);
    for( var i = 0; i < histogramLength; i++) cpuHist[i] = [i,0];
    //sets interval to check cpu usage
    setInterval(
        () => {
            //console.log(os.cpuUsage(() => console.log(" ")));
            os.cpuUsage((value) => io.emit("cpu histogram", value));
        }, 
        interval);
});

Вот соответствующая часть моей html: 

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style/startpage.css" class="style">

    <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap" rel="stylesheet">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src ="/socket.io/socket.io.js"> </script>
    <script>
        google.charts.load('current', { packages: ['corechart', 'line'] });
        google.charts.setOnLoadCallback(drawBasic);

        var chartLoaded = false;
        var histogram = [];

        function drawBasic() {

            var data = new google.visualization.DataTable();
            data.addColumn('number', 'X');
            data.addColumn('number', 'Dogs');

            //data.addRows();

            var options = {
                colors: ['white'],
                hAxis: {
                    title: 'Time',
                    textStyle: { 
                        color: "white",
                        fontName: 'Share Tech Mono',
                        fontSize: 12,
                        bold: false,
                        italic: false 
                    }
                },
                vAxis: {
                    title: 'CPU Usage',
                    textStyle: { 
                        color: "white",
                        fontName: 'Share Tech Mono',
                        fontSize: 12,
                        bold: false,
                        italic: false 
                    },
                    viewWindow:{
                        min: 0,
                        max: 100
                    }
                },
                chartArea: {
                    left: 5,
                    top: 5,
                    right: 5,
                    bottom: 5,
                },
                backgroundColor: "black",
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

            chart.draw(data, options);
            chartLoaded = true;
        }

        var socket = io('http://localhost');
        socket.on("cpu histogram", (cpuHistogram) => console.log(cpuHistogram));

    </script> </script>
</head>

Я прочитал документацию по socket.io и чувствую, что придерживаюсь Это. Я видел, что уже был похожий пост: socket.io - ReferenceError: io не определен . Я пробовал большинство исправлений, таких как http://yourwebsite.com:12345/socket.io/socket.io.js и использование bower, но безуспешно. Я написал свои функции обратного вызова немного по-другому, чем парень в видео, и я печатаю undefined, а не значение использования моего процессора, когда я пытаюсь консоль журнала os.cpuUsage(). Что-то не так с этим или как я использовал socket.io? Как я могу заставить это работать?

Ответы [ 2 ]

0 голосов
/ 06 января 2020

Начнем с того, что это неверно: 

require("socket.io")(http);

Вам нужно передать туда свой сервер, а не модуль http, и вам нужно присвоить результат переменной io. Итак, после того как вы определили и инициализировали переменную server, вы должны сделать: 

const io = require("socket.io")(server);

Теперь io - это ссылка на ваш экземпляр сервера socket.io на стороне сервера, и он может использоваться для отправки всем подключенным клиентам с io.emit(...).

Вероятна ошибка на стороне клиента, поскольку этот тег <script>: 

<script src ="/socket.io/socket.io.js"> </script>

не работает, так как ваш socket.io сервер не был правильно инициализирован. Это может показаться нелогичным, но сервер socket.io предоставляет обработчик ответа для URL /socket.io/socket.io.js. Если это отсутствует, это приведет к тому, что io не будет определено в клиенте, что приведет к клиентской ошибке, о которой вы сообщаете.

Вы также можете пересмотреть попытку отправки процессора значение использования для клиента 10 раз в секунду. Это довольно часто, и с любым приличным количеством клиентов ваш сервер будет тратить все свое время на отправку обновлений данных.

0 голосов
/ 06 января 2020

Используйте этот пакет на nodejs для создания веб-сокетов:

const WebSocket = require ('ws');

...