chatOfPomelo Web 客戶端架構解析

專案結構

web-server 為基於 Express 的靜態頁面服務，入口 app.js，靜態資源置於 public/。目錄結構：

bin/              # 工具腳本
node_modules/     # 依賴（express 等）
app.js            # 入口，啟動 Express 靜態服務
public/           # 前端資源
  index.html      # 主頁
  js/             # 客戶端邏輯
  components/     # Pomelo 核心組件

app.js 關鍵配置

var express = require('express');
var app = express();
app.configure(function(){
    app.use(express.methodOverride());
    app.use(express.bodyParser());
    app.use(app.router);
    app.set('view engine', 'jade');
    app.set('views', __dirname + '/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());
});
app.listen(3001);

index.html 加載順序

<script> require('boot'); </script>
<script src="js/client.js"></script>
<script src="js/pop.js"></script>

• jquery、lib/build/build.js：Pomelo 客戶端依賴。
• boot：將 Pomelo 掛載到 window。
• client.js：核心邏輯，處理加入房間、聊天、用戶列表更新。
• pop.js：彈窗提示組件。

client.js 核心流程

1. queryEntry(uid, callback)：請求 Gate 服務器獲取 Connector 位址。
2. pomelo.init({host, port}, callback)：連接 Connector。
3. pomelo.request(route, msg, callback)：發送請求（如 connector.entryHandler.enter 進入聊天室）。
4. pomelo.on(event, callback)：監聽推送事件（onChat, onAdd, onLeave, disconnect）。
5. UI 事件綁定：登入按鈕、發送訊息（Enter 鍵）。

Pomelo 客戶端 API 精要

• pomelo.request(route, content, callback)：發送網絡請求（異步回調）。
• pomelo.on(event, callback)：註冊服務器推送處理器。

組件目錄 components/ 包含 emitter（事件發射器）、protocol（協議編解碼）、websocket（傳輸）、protobuf（壓縮）。