Node.js擅長的領域為:
- 不需要很多運算
- 吞吐量要求高
- 進消息輕並且要求快
- 出消息輕並且要求快
網上的例子都是socket.io的,我一直在想到底能用在什么地方?根據node.js的優點(擅長領域),想出了這個應用場景:
jQuery UI的autocomplete應用場景,這個需要的數據都是很零碎卻量多的。
結構如下:
- 用ASP.NET MVC4新建一個web站點,在這里編寫jQuery UI autocomplete代碼
- 用WebMatrix編寫Node.js代碼(主要是基於express的路由)
由於這2個都是獨立的站點,因此涉及到跨域問題,使用JSONP解決(其實在js代碼調用和node.js端都要修改相應的代碼)。
先貼ASP.NET MVC4的代碼
<head> <title></title> <link href="jqueryui/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" /> <script src="jqueryui/js/jquery-1.9.1.js" type="text/javascript"></script> <script src="jqueryui/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script> <script> $(function () { $("#searchKey").autocomplete({ source: function (request, response) { $.ajax({ type: "get", async: false, url: "http://localhost:22912/users/" + request.term, //這里是Node.js的url dataType: "jsonp", success: function (data) { response($.map(data, function(item){ return {label: item.UserName,value: item.UserName} } )//轉換成label, value形式,以便UI中顯示 ); }, error: function () { alert('fail'); } }); } }); }); </script> </head> <body> <input id="searchKey" size="50" /> </body>
然后建立Node.js程序,先看看WebMatrix的新建Node.js Dialog:
新建后,會看到一堆文件建立了,先看看server.js入口文件,再看路由文件:
var express = require('express') //導入express模塊 , http = require('http') //導入http核心模塊 , path = require('path') //同上 , routes4users = require('./routes/users'); //導入自己編寫的users路由模塊 var app = express(); app.configure(function(){ app.set('port', process.env.PORT || 3000); app.set('views', __dirname + '/views'); //存放視圖的文件夾,和asp.net mvc類似用途 app.set('view engine', 'jade'); //類似於asp.net mvc的razor,不過jade語法不同,並且接近於coffeescript那樣采用縮進 app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); }); app.configure('development', function(){ app.use(express.errorHandler()); }); app.get('/users/:name', routes4users.users_getCollectionByName);
//類似於asp.net mvc中的路由,mvc下為:{controller}/{action}/{id},Node.js中用:前綴為參數
//routes4users.users_getCollectionByName是我們要編寫的主要處理函數
http.createServer(app).listen(app.get('port'), function(){ console.log("Express server listening on port " + app.get('port')); });
看看users.js文件:
function UserInfo() { this.UserName = null; this.Age = -1; } var users = new Array(); //模擬數據庫 for (var i = 0; i < 10; i++) { //加入數據 var u=new UserInfo(); u.UserName = "aaron" + i; u.Age = i; users.push(u); } exports.users_getCollectionByName = function (req, res) { //server.js中,路由/users/:name的對應函數 var searchKey = req.params.name; var result = new Array(); for (var i = 0; i < users.length; i++) {//模擬搜索邏輯 if (users[i].UserName.indexOf(searchKey) >= 0) { result.push(users[i]); } } var callbackFunctionName = req.query.callback;//jQuery的JSONP調用會設置這個參數,通過querystring的方式傳過來 res.setHeader('Content-Type', 'application/javascript; charset=utf-8'); var str = JSON.stringify(result); str = callbackFunctionName+"(" + str + ")";//這句很重要 res.send(str); }
運行效果圖: