node.js - 如何进行简单的实时页面更新？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15861344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
node.js - how to make a simple live page update?
提问by copyflake
I'm very very new to node.js, but there's actually only one simple thing that I am trying to achieve by learning the language.
我对 node.js 非常陌生，但实际上我试图通过学习这门语言来实现一件简单的事情。
I'd like to create a webpage, where by the code in a specific "div" can be hotswapped on the fly to users currently looking at that page. (ie. the div contains some text, but then an image replaces it.) Ideally, the swap would be executed manually by the the webpage's admin through the click of a button, or some code fired off on the server or something. Regular viewers to the webpage would not be able to do this - they only see the live changes on the page.
我想创建一个网页，其中特定“div”中的代码可以即时热交换给当前正在查看该页面的用户。（即 div 包含一些文本，但随后图像替换了它。）理想情况下，交换将由网页管理员通过单击按钮或在服务器上触发的某些代码或其他方式手动执行。网页的常规查看者无法执行此操作 - 他们只能看到页面上的实时更改。
real-life example:
现实生活中的例子：
live internet broadcast is off-air, therefore the "div" contains "off-air" text. live hotswap of code happens when broadcast goes on-air, and the viewers of the webpage now see the html5 broadcast player in the "div" instead.
互联网直播是停播的，因此“div”包含“停播”文本。代码的实时热交换发生在广播播出时，网页的观众现在可以在“div”中看到 html5 广播播放器。
What's the simplest way to go about doing this for a node.js newbie?
对于 node.js 新手来说，最简单的方法是什么？
Many thanks :)
非常感谢 ：）
回答by Iftah
Take a look at Socket.IO http://socket.io/#how-to-use
看看 Socket.IO http://socket.io/#how-to-use
when the server decides to broadcast a change use:
当服务器决定广播更改时使用：
io.sockets.emit('update-msg', { data: 'this is the data'});
io.sockets.emit('update-msg', { data: 'this is the data'});
on the client first connect socket.io and then wait for the "update-msg" event and update your dom:
在客户端首先连接 socket.io，然后等待“update-msg”事件并更新你的 dom：
var socket = io.connect('http://localhost');
socket.on('update-msg', function (msg) {
console.log(msg);
$('#mydiv').html(msg.data)
});
回答by Alexander Mills
I created a system/methodology to live update (hot reload) front-end code using RequireJS and Node.js. I made sure it worked with both React and Backbone. You can read about it here:
我创建了一个系统/方法来使用 RequireJS 和 Node.js 实时更新（热重载）前端代码。我确保它适用于 React 和 Backbone。你可以在这里读到它：
https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1
https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1
the basic steps involved in doing this yourself:
自己做这件事的基本步骤：
- gulp.js watchers listen for filesystem changes
- socket.io server in gulpfile sends a message to all browser clients with the path of the file that changed
- client deletes cache representing that file/module, and re-requires it (using AJAX to pull it from the server filesystem)
- front-end app is configured / designed to re-evaluate all references to the modules that it wishes to hot-reload, in this case, only JS views, templates and CSS are available to hot reload - the router, controllers, datastores (Backbone Collections and Models) are not configured yet. I do suspect all files could be hot reloaded with the only exception being data stores.
- gulp.js 观察者监听文件系统变化
- gulpfile 中的 socket.io 服务器向所有浏览器客户端发送一条消息，其中包含更改的文件路径
- 客户端删除代表该文件/模块的缓存，并重新需要它（使用 AJAX 从服务器文件系统中提取它）
- 前端应用程序被配置/设计为重新评估对它希望热重载的模块的所有引用，在这种情况下，只有 JS 视图、模板和 CSS 可用于热重载 - 路由器、控制器、数据存储（主干集合和模型）尚未配置。我确实怀疑所有文件都可以热重载，唯一的例外是数据存储。
