如何在 HTML 中的 nodejs 中显示实时变量答案

【问题标题】：how to display a realtime variable in nodejs in HTML如何在 HTML 中的 nodejs 中显示实时变量
【发布时间】：2017-05-27 22:35:11
【问题描述】：

我正在使用 setInterval() 函数在 NodeJS 中每 'x' 秒更新一些变量（来自各种 API 的价格）

我想在 HTML 中显示这些变量，并让它们每 'x' 秒实时更新一次。

我如何使用 Socket.io 或不使用它来解决这个问题

【问题讨论】：

您可以使用或不使用套接字。哪个更好的问题肯定会被关闭，因为它违反了 SO 原则。

标签： node.js sockets socket.io real-time

【解决方案1】：

如果你不想使用socket.io，你可以使用AJAX调用，但我认为这是更痛苦的方式......

如果您使用socket.io，他们的 GitHub 上有很好的示例：Chat example。

在你的 NodeJS 中：

var io = require('socket.io')(8080); // The port should be different of your HTTP server.

io.on('connection', function (socket) { // Notify for a new connection and pass the socket as parameter.
    console.log('new connection');

    var incremental = 0;
    setInterval(function () {
        console.log('emit new value', incremental);

        socket.emit('update-value', incremental); // Emit on the opened socket.
        incremental++;
    }, 1000);

});

此代码应在您的应用程序中启动。

在你看来：

<html>
<body>
    <pre id="incremental"></pre>

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        var socket = io('http://localhost:8080'); // Connect the socket on the port defined before.

        socket.on('update-value', function (value) { // When a 'update-value' event is received, execute the following code.
            console.log('received new value', value);

            $('#incremental').html(value);
        });
    </script>
</body>
</html>

我的代码不完整，但显示了需要了解的基本信息。

【讨论】：

谢谢。你的意思是说 express 应用应该监听不同的端口，socket.io 端口应该不同？
是的，这是强制性的。您不能使用两个服务在同一个端口上侦听。如果您想了解更多详细信息，可以查看this post :)

【解决方案2】：

尝试模板和模板引擎。模板引擎是使您能够将变量传递给模板的东西。这些引擎使用您以 HTML 页面形式提供的数据呈现模板文件。

我建议您尝试使用“ejs”，因为它非常接近地表示 HTML 文件。 ejs 模板只是带有 placefolder 的 HTML 语法，供您传递数据。

但这需要您在固定时间后不断刷新页面。所以你可以试试“AJAX”，它可以让你刷新部分页面，同时从服务器发送和接收数据

【讨论】：

我的解决方案对您有帮助吗？