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

时间:2013-04-07 10:28:17

标签: javascript node.js

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

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

现实生活中的例子:

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

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

非常感谢:)

2 个答案:

答案 0 :(得分:17)

看一下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)
});

答案 1 :(得分:5)

我使用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)不是 配置了。我怀疑所有文件都可以热重新加载 唯一的例外是数据存储。