node.js - 如何进行简单的实时页面更新？答案

【问题标题】：node.js - how to make a simple live page update?node.js - 如何进行简单的实时页面更新？
【发布时间】：2021-11-03 11:08:58
【问题描述】：

我对 node.js 非常陌生，但实际上我只想通过学习这门语言来实现一件简单的事情。

我想创建一个网页，其中特定“div”中的代码可以即时热交换给当前正在查看该页面的用户。（即 div 包含一些文本，但随后图像会替换它。）理想情况下，交换将由网页管理员通过单击按钮手动执行，或者在服务器上触发一些代码或其他东西。网页的普通浏览者无法做到这一点 - 他们只能看到网页上的实时变化。

现实生活中的例子：

互联网直播已停播，因此“div”包含“off-air”文本。直播时会发生代码的实时热交换，网页的查看者现在会在“div”中看到 html5 广播播放器。

对于 node.js 新手来说，最简单的方法是什么？

非常感谢:)

【问题讨论】：

【解决方案1】：

看看Socket.IO http://socket.io/#how-to-use

当服务器决定广播更改使用时：

io.sockets.emit('update-msg', { data: 'this is the data'});

在客户端首先连接socket.io，然后等待“update-msg”事件并更新你的dom：

var socket = io.connect('http://localhost');
socket.on('update-msg', function (msg) {
    console.log(msg);
    $('#mydiv').html(msg.data)
});

【讨论】：

【解决方案2】：

我创建了一个系统/方法来使用 RequireJS 和 Node.js 实时更新（热重载）前端代码。我确保它适用于 React 和 Backbone。你可以在这里阅读：

自己做这件事的基本步骤：

gulp.js 观察者监听文件系统变化
gulpfile 中的socket.io 服务器向所有浏览器客户端发送消息更改文件的路径
客户端删除代表该文件/模块的缓存，并重新要求它（使用 AJAX 从服务器文件系统中提取它）
前端应用程序配置/设计为重新评估所有参考到它希望热重载的模块，在这种情况下，只有 JS 视图、模板和 CSS 可用于热重载 - 路由器，控制器、数据存储（主干集合和模型）不是尚未配置。我确实怀疑所有文件都可能被热重载唯一的例外是数据存储。

【讨论】：