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

Question

我对node.js非常新,但实际上我只想通过学习语言来实现一件简单的事情.

我想创建一个网页,通过特定"div"中的代码,可以即时热切换到当前查看该页面的用户.(即div包含一些文本,但随后图像会替换它.)理想情况下,交换将由网页管理员通过单击按钮手动执行,或者某些代码在服务器上触发.网页的常规查看者无法执行此操作 - 他们只能看到页面上的实时更改.

现实生活中的例子:

现场互联网广播是无线播放,因此"div"包含"广播"文本.当广播播出时,代码的实时热交换发生,并且网页的观众现在看到"div"中的html5广播播放器.

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

非常感谢 :)

Answer 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)
});

Answer 2

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

https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1

自己执行此操作的基本步骤：

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