NowJS简单介绍和实例

2011-03-20 07:02

NowJS简单介绍和实例

by yedingding

at 2011-03-19 23:02:45

original http://heikezhi.com/2011/03/19/nowjs-intro-and-example/

NowJSNode.JS的一个RPC模块, 旨在简化实时Web应用开发.

安装

首先, 你需要安装node.js和npm. 下面以Mac系统下homebrew为例

  • $ brew install node
  • $ curl http://npmjs.org/install.sh
  • $ export NODE_PATH=/usr/local/lib/node
  • $ npm install now

服务端设置

var yourHttpServer = require('http').createServer(function(req, response){
    /* Serve your static files */
});
yourHttpServer.listen(8080);

之后, 我们加载NowJS进来

var everyone = require("now").initialize(app);

客户端设置

我们需要在客户端加载NowJS库, 也很简单.

<script src="/nowjs/now.js"></script>

如何使用NowJS

NowJS的魔力在于两个对象:  now, everyone.now. 刚才在服务端我们创建了everyone对象, 而在客户端通过加载now.js后now对象会被自动加入文档的全局命名空间。

每个客户端都有一个和服务端共享的now对象, 当客户端对now对象做修改后, 就会被自动同步到服务端. 而服务端的everyone.now是服务端和所有客户端共享的命名空间, 当服务端修改everyone对象后, 每个客户端的now对象都会同步修改。

基于这两个对象, NowJS可以很简单的实现RPC. 服务端可以调用客户端的函数, 客户端也直接调用服务端的函数。

还有三个回调函数值得一提。

当客户端开始建立连接时, 服务端会触发

everyone.connected(function(){});

当客户端开始断开连接时, 服务端会触发

everyone.disconnected(function(){});

当客户端建立好连接后, 客户端会触发

now.ready(function(){});

下面让我们来看一个真实的应用实例: 聊天室. 这里在服务端使用了expressjs和jade

  • $ npm install express
  • $ npm install jade
- chatapp
  - server.js
  - views
    - index.jade

server.js

var app = require('express').createServer();
app.set('view options', { layout: false });
app.get('/', function(req, res) {
    res.render('helloworld.jade');
});
app.listen(8080);
var everyone = require("now").initialize(app);
everyone.connected(function() {
    console.log("Joined: " + this.now.name);
});
everyone.disconnected(function() {
    console.log("Left: " + this.now.name);
});
everyone.now.distributeMessage = function(message) {
    everyone.now.receiveMessage(this.now.name, message);
};

index.jade

!!! 5
html(lang="en")
    head
        title nowjs test
        script(type="text/javascript", src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js")
        script(src="http://localhost:8080/nowjs/now.js")
        script(type="text/javascript")
        $(document).ready(function() {
            now.name = prompt("What's your name?", "");
            now.receiveMessage = function(name, message) {
                $("#messages").append("<br>" + name + ": " + message);
            }
            $("#send-button").click(function() {
                now.distributeMessage($("#text-input").val());
                $("#text-input").val("");
            });
       });
    body
        #messages
            input(type="text", id="text-input")
            input(type="button", value="Send", id="send-button")
$ node server.js

然后在浏览器里访问http://localhost:8080. 一个聊天室应用完工了. 试试看吧, :)

无觅猜您也喜欢:

将数学变成音乐: 那么Pi听起来会如何呢?

iRobot的机器人也要投入救援战斗了

蛋疼之字母人像

为什么Quick Bar还是如此讨人厌
无觅