node.js - 如何使用jsdom / node-jquery更新我的页面的样子?

时间:2012-10-03 05:12:34

标签: jquery node.js socket.io multiplayer jsdom

我在jsdom上找到的所有文档似乎都是"scraping oher people's pages"的信息。我想使用jsdomnode-jquery来更新用户所在的页面。我知道当我编写代码时,我可能只有一个常规<script>标记链接到公共目录中的JavaScript文件,但我想学习如何在服务器上执行此操作(如果可能的话)。我真正想要的是允许多个用户连接到一个页面,并在一个用户执行操作时为所有用户更新页面。例如,按钮1将背景变为黑色。按钮2将其变为红色,按钮3将其变为白色。如果我错了,请纠正我,但我不认为通过<script>标签链接到JavaScript文件是可能的。所以看jsdom

jsdom.env({html: ???, src: jquery, done: callback });

好的,这里是问题编号1 。我不知道在这段代码中为什么放置html来获取我的DOM对象,或者我能做什么。我的文件是用jade编写的,所以我不能只从文件中加载它们。然后我开始想,也许我可以将这段代码放在我的代码的路由部分中,并从req变量中获取html。所以我开始玩我的路由代码:

exports.index = function(){
  res.render('index', {title: 'MyTitle'});
};

我只想说整个路由事情已经让我大吃一惊。我第二次尝试res.render,但这不起作用。这导致问题编号2 。即使我可以获取DOM对象并操纵它们,我也不知道如何将它们推回到客户端,因为执行第二个res.render不起作用。更不用说那会破坏目的,因为如果我让它们重新渲染,我也可以将它们重定向到另一个页面。

我打算使用socket.io来处理用户连接,所以关键就在那里。也许我可以设置socket.on('button_click', function(){ ... });,但我不知道在该函数中放置什么来处理DOM操作和DOM的更新,或者在客户端如何让按钮发出'button_click',因为客户端无权访问socket.io变量。

因此,如果有人可以使用非常棒的例子向我解释这些事情。我真的试图弄清楚这一切,我花了几天时间研究和阅读node.js,express.js,socket.io,jsdom和node-jquery的API文档。看起来我发现的所有例子对于他们自己的领域都是非常基本的,并且没有将它们组合在一起的例子。

1 个答案:

答案 0 :(得分:2)

你的方向稍微尴尬。

首先,如果您使用过jade,它会使用jade编译器编译成html。

其次,一旦你编译了它,就可以将它推入jsdom,因为它使用的是html5解析器,然后你可以通过普通的DOM apis来操作它。

第三,您无法直接访问客户端浏览器中的DOM。通常,人们实现类似共享同步视图的方式是使用socket.io并将数据事件传输到每个客户端,在那里编写客户端javascript来解释这些事件并在UI中进行必要的更改。您正在发送一组引导每个客户端的html和javascript - 很少有人在服务器上保留一个完整的DOM内存,然后尝试更新它并将更改广播到客户端。你可以这样做,我不推荐它。通常不是如何构建的。

第四,在这里第一次通过时,这非常复杂。我建议查看客户端mvc框架比较应用程序,如todomvc - http://addyosmani.github.com/todomvc/。看看每个的来源,包括普通的旧javascript版本。这将教你足够了解客户端部分。然后,您可以想象使用类似socket.io的东西来更新模型并构建依赖于这些模型中的更改事件的视图。你可以在没有mvc的情况下完成所有这些工作,但它教会你很好地分离关注点,以及了解人们通常如何构建这些类型的应用程序。