接前面。假定页面大家已经跑起来了。
+++++++++++++ 坑 +++++++++++++++++
前面已经说过了，这个web-server是基于Express框架的一个简单的webserver。
这个框架在node.js里面还是很有名气的，官网在这里：http://expressjs.com/ 里面有api，使用方法的介绍。
另外，有专门的书籍介绍这个框架。《Express.Web.Application.Development》，感兴趣直接google
[Express.Web.Application.Development(2013.6)].Hage.Yaapa.文字版.pdf
恩，通过一番在网上不断的搜索，wiki，论坛，下载，收藏了一大堆东西后，你可能对这个框架快速的有了不少的认识。
那么恭喜你！！
你可以打开app.js开始看代码了。
var express = require('express');
var app = express.createServer();
app.configure(function(){
app.use(express.methodOverride());
app.use(express.bodyParser());
app.use(app.router);
app.set('view engine', 'jade'); #render引擎，为jade，至于jade是啥。。。。 唉，不提了。。。
app.set('views', __dirname + '/public'); #模板目录为当前目录的public文件夹
app.set('view options', {layout: false});
app.set('basepath',__dirname + '/public');
});
app.configure('development', function(){
app.use(express.static(__dirname + '/public'));
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
var oneYear = 31557600000;
app.use(express.static(__dirname + '/public', { maxAge: oneYear }));
app.use(express.errorHandler());
});
console.log("Web server has started.\nPlease log on http://127.0.0.1:3001/index.html");
app.listen(3001);++++++++++++++++++++++++++++++++++++++ 坑 结束+++++++++++++++++++++++++
在折腾了大半天后，顿悟！！！
我TM是来看pomelo的，我研究的是game-server后端的，又TM不是要写网站！！
弄毛的Express啊！！
重新回来，发现这个web-server不就是打开public目录嘛，那不就是运行public/index.html嘛！！
这里Express压根没有render什么动态内容，纯调用静态文件而已嘛！！
我TM直接chrome index.html不就行了嘛！！！
TM果然行了，页面一模一样，而且点击按钮也有同样的alert信息！！
网易太坑！！
既然存心坑人，Y干嘛不直接弄个Apache，然后在弄一堆nginx，mongodb什么啊！！！
这个不是摆明了欺负智商低的人嘛！！！
抗议！！
坚决抗议！！！
。。。。。。。
抗议中。。。。。。。
。。。。
。。。。。。
站在打马路上举着旗帜，然后又突然发现，我TM不是要看代码嘛？干嘛来游行啊！！！
赶紧打的往家跑！！！
一边唱“多么痛的领悟。。。。”
OK，我们终于可以看代码了。
这个页面我就不说了，HTML，CSS谁不知道呢？？ （严重install B 中。。。）
这个页面虽然简单，但还是挺漂亮的！！
对于HTML，俺最痛恨这种漂亮的页面了！！
1、嫉妒，严重嫉妒。谁让俺完全木有美感呢。
2、漂亮的页面里面无关代码太多。
所以，删！！ 过程不表，不会的同学请使用：二分试错 的方法。
结果如下：
<html>
<head>
<script src="build.js" type="text/javascript"></script> #引用build.js;原来是js/lib/build/build.js;为了看着方便直接copy到当前目录下面
<script type="text/javascript">
require('boot'); #调用初始化函数，这个函数很绕
</script>
<script type="text/javascript">
var pomelo = window.pomelo;
var host = "127.0.0.1";
var port = "3010";
function show() {
pomelo.init({ #真正干活的函数，2个参数，一个配置信息，一个callback函数。
host: host,
port: port,
log: true
}, function() {
pomelo.request("connector.entryHandler.entry", "hello pomelo", function(data) {
alert(data.msg);
});
});
}
show()
</script>
</head>
<body>
<input id="test" type="button" value="Test Game Server" οnclick="show()"/>
</body>
</html>如上，大家可以看出，其实就是index.html调用 一个build.js文件来和game-server通信，然后等game-server返回data的时候显示出来。
细节都在build.js里面，index.html里面就是调用pomelo.init()和pomelo.request()而已。
既然调试web页面的js代码。那么我们必须祭出杀手锏，chrome的debuger工具。（firebug神马的都一个意思，不废话了）
教程见下面链接：
https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#sources-panel
使用就是右键点页面，然后选择“审核元素”然后点source那个table页即可。一个全功能的debuger便呈现在我们面前。下面的各种工作基于这个debuger，难度直接降低2个数量级。
下面的工作基本就体力活，讲快点。
首先，断点index.html中pomelo.init()函数，点击button的时候，会断在那里。然后step便可以到build.js 的相应函数实现。很简单，就几行代码如下：
pomelo.init = function(params, cb){
initCallback = cb;
var host = params.host;
var port = params.port;
var url = 'ws://' + host;
if(port) {
url += ':' + port;
}
handshakeBuffer.user = params.user;
handshakeCallback = params.handshakeCallback;
initWebSocket(url, cb);
};就初始化一个url然后调用initWebSocket()而已，代码如下：
var initWebSocket = function(url,cb) {
console.log('connect to ' + url);
var onopen = function(event){
var obj = Package.encode(Package.TYPE_HANDSHAKE, Protocol.strencode(JSON.stringify(handshakeBuffer)));
send(obj);
};
var onmessage = function(event) {
processPackage(Package.decode(event.data), cb);
// new package arrived, update the heartbeat timeout
if(heartbeatTimeout) {
nextHeartbeatTimeout = Date.now() + heartbeatTimeout;
}
};
var onerror = function(event) {
pomelo.emit('io-error', event);
console.error('socket error: ', event);
};
var onclose = function(event){
pomelo.emit('close',event);
console.error('socket close: ', event);
};
socket = new WebSocket(url);
socket.binaryType = 'arraybuffer';
socket.onopen = onopen;
socket.onmessage = onmessage;
socket.onerror = onerror;
socket.onclose = onclose;
};
可以看到，initWebSocket()只是注册几个事件，然后new一个WebSocket();
我们在创建工程的时候有个是否使用WebSocket和Socket.io的选项，我们选择的是默认的WebSocket。
具体的WebSocket编程我还没有来得及深入了解，这里从字面了解，应该是，在new的过程中，会回调这些事件函数。上面几个事件很简单。
详细的过程如下：
1、
在WebSocket() open的时候，我们发送一个握手数据给game-server。（具体数据格式断点的时候跟进Package.encode一看便知）
2、
等game-server的回传消息，这个是在onmessage()里面处理。回调根据msg.type来选择处理函数。
第一次msg.type是握手，所以我们这里应该是handshake（）。
3、
handshake（）很简单，发个ACK给game-server,然后调用我们前面传入的callback函数。也就是
pomelo.request("connector.entryHandler.entry", "hello pomelo", function(data) {
alert(data.msg);
});这个函数才是真正发送数据的，也很简单，就是把“hello pomelo”丢给game-server。
然后注册一个callback，等待下次game-server来数据了，在函数onmessage的时候被调用。
5、
这个时候onmessage里面的msg.type就是TYPE_DATA了，所以在ondata里面处理。
6、ondata里面 其实就干一个回调的事情。这个回调的就是我们传入的alert（）函数，参数是game-server发回来的“game-server xxxx”的string。
ok，结束。
说明，这个web-server、build.js今天才看完。其中
require的实现，各种modules的注册写的比较绕，可能是为了模块化的使用吧，有点绕。 大家可以断点在require（build）的地方，跟着走一遍便清晰了。
Emitter的实现，这里的pomelo类是继承Emitter的。
javascript的继承俺才刚看，只是有个基本概念，后面随着阅读深入在不断补充吧。
先放2个资料链接：
看完下面的对了解Emitter有很大帮助。然后借助debuger自己写点东西加深理解应该就ok了。。。
http://stackoverflow.com/questions/572897/how-does-javascript-prototype-work
《javascript高级程序设计 3rd edition》用1天时间翻了翻前面的基础部分，还不错挺详细。能够快速入门吧。
《Secrets of the JavaScript Ninja》还没有看不好评论，等我看完再说。。。
下面边恶补js，边吭game-server。老规矩想到哪里写哪里。
扫一扫
4773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
