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可用于热重新加载 - 路由器， 控制器，数据存储（Backbone Collections和Models）不是 配置了。我怀疑所有文件都可以热重新加载 唯一的例外是数据存储。