时间戳

首页 > 解决方案 > 如何使用 socket.io 与前端通信？

javascript - 如何使用 socket.io 与前端通信？

问题描述

我正在尝试将 CPU 使用率显示到 Web 应用程序上。我正在关注这个视频：https ://www.youtube.com/watch?v=N8kqK9srXu8 。该视频使用 express，但我选择反对，因为我还是 node 新手。我到了他使用 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 is not defined。我尝试了最受好评的修复程序，例如像这样采购http://yourwebsite.com:12345/socket.io/socket.io.js和使用凉亭，但没有运气。我编写的回调函数与视频中的人略有不同，undefined当我尝试控制台 log 时，我打印而不是我的 cpu 使用值os.cpuUsage()。这或我如何使用socket.io有什么问题吗？我怎样才能让它工作？

标签： javascriptnode.jssocketssocket.iobackend

解决方案

首先，这是不正确的：

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 服务器为/socket.io/socket.io.jsURL 提供响应处理程序。如果缺少，它将导致io未在客户端中定义，这将导致您报告的客户端错误。

您可能还想重新考虑尝试每秒 10 次向客户端发送 cpu 使用率值。这种情况非常频繁，并且对于任何数量可观的客户端，您的服务器将把所有时间都花在发送数据更新上。

推荐阅读