程式師世界 >> 編程語言 >> C語言 >> C++ >> C++入門知識 >> chatOfPomelo web-server解析

chatOfPomelo web-server解析

編輯：C++入門知識

chatOfPomelo web-server解析

web-server 是客戶端通過浏覽器的形式方式的遠程服務器站點，它其實是一個靜態頁面
它的文件結構如下：
這裡寫圖片描述

這個文件結構比較龐大
bin 這個文件夾不用過多介紹，它是工具，用來安裝組件的
node_modules 這是nodejs的庫文件夾，它裡面包括了express這個nodejs的庫，作用是用來方便的創建web服務，供大家訪問，若不用express，純的nodejs創建web服務就會吃力得多
app.js web-server的入口，程序從它啟動,它非常的簡單，用express框架創建了一個web服務，然後加載了public/index.html這個頁面展示出來.<喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> var express = require('express'); // 引入express框架 var app = express(); // 配置web服務的各種參數 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; // 加載靜態頁面默認為public/index.html app.use(express.static(__dirname + '/public', { maxAge: oneYear })); app.use(express.errorHandler()); }); console.log(Web server has started. Please log on http://127.0.0.1:3001/index.html); app.listen(3001); // 監聽3001端口啟動服務

接下來所有的工作都在public這個文件夾下面了，單獨上圖
這裡寫圖片描述
index.html,需要加載的展示給客戶端的頁面
可以使用網頁編輯工具來對其進行編輯，它的靜態格式為

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

注意它的加載順序

jquery lib/build/build.js 這裡加載了pomelo客戶端所需要的組件 boot 把pomelo組件放到window對象中 jsclient.js 客戶端使用pomelo來與服務器通訊的代碼

pop.js 彈出式的窗口的小控件
注意 components文件夾裡面是客戶端pomelo的幾個核心組件

emitter 發射器，pomelo消息驅動機制的基石

protocol 協議。網絡通訊的基石 websocket 網絡通訊協議 protobuf 協議壓縮編碼
在 jsclient.js中處理了jion的響應以及後面的事情
我們看下主要和幾個核心函數是如何輕松工作的

// 連接gate callback為後繼處理
function queryEntry(uid, callback) {
    var route = 'gate.gateHandler.queryEntry';
    pomelo.init({
        host: window.location.hostname,
        port: 3014,
        log: true
    }, function() {
        pomelo.request(route, {
            uid: uid
        }, function(data) {
            pomelo.disconnect();
            if(data.code === 500) {
                showError(LOGIN_ERROR);
                return;
            }
            callback(data.host, data.port);
        });
    });
};
$(document).ready(function(){  //獲取整個網頁就緒
//當有服務器網絡消息被pomelo捕捉時的響應
    // 聊天消息
    pomelo.on('onChat', function(data) {
        addMessage(data.from, data.target, data.msg);
        $(#chatHistory).show();
        if(data.from !== username)
            tip('message', data.from);
    });

    //玩家進入消息
    pomelo.on('onAdd', function(data) {
        var user = data.user;
        tip('online', user);
        addUser(user);
    });

    //玩家離開消息
    pomelo.on('onLeave', function(data) {
        var user = data.user;
        tip('offline', user);
        removeUser(user);
    });


    //與服務器失去連接消息
    pomelo.on('disconnect', function(reason) {
        showLogin();
    });
//deal with login button click.注意 jion其實他的id是login，這個可以在index.html中找到
    $(#login).click(function() {
        username = $(#loginUser).attr(value);  //獲取頁面的username
        rid = $('#channelList').val();             // 獲取頁面的channelid

        if(username.length > 20 || username.length == 0 || rid.length > 20 || rid.length == 0) {
            showError(LENGTH_ERROR);
            return false;
        }

        if(!reg.test(username) || !reg.test(rid)) {
            showError(NAME_ERROR);
            return false;
        }

        //連接到gate
        queryEntry(username, function(host, port) {
            // 根據gate返回的信息連接到connector
            pomelo.init({   //連接gate
                host: host,
                port: port,
                log: true
            }, function() {
                var route = connector.entryHandler.enter;
                pomelo.request(route, {
                    username: username,
                    rid: rid
                }, function(data) {
                    if(data.error) {
                        showError(DUPLICATE_ERROR);
                        return;
                    }
                    // 連接connector成功，可以與chat服務器進行交互
                    setName();
                    setRoom();
                    showChat();
                    initUserList(data);
                });
            });
        });
    });

    // 按下回車鍵，向服務器發送消息
    $(#entry).keypress(function(e) {
        var route = chat.chatHandler.send;  // 向後端chat服務器發送
        var target = $(#usersList).val();   // 消息發給誰
        if(e.keyCode != 13 /* Return */ ) return;
        var msg = $(#entry).attr(value).replace(
, );
        if(!util.isBlank(msg)) {
            pomelo.request(route, {   //pomleo客戶端向服務器發送網絡事件的接口
                rid: rid,
                content: msg,
                from: username,
                target: target
            }, function(data) {
                $(#entry).attr(value, ); // clear the entry field.
                if(target != '*' && target != username) {
                    addMessage(username, target, msg);
                    $(#chatHistory).show();
                }
            });
        }
    });
}

整個邏輯非常簡潔
並且由此看出客戶端向服務器發送網絡消息的api
pomelo.request(route, {content}, callback) 這個接口非常像curl，其實是個tcp連接。
參數說明

route：要把消息發送給哪個服務 content：用戶自定義的消息體 callback：服務器返回時被調用的函數，注意這是異步響應的

客戶端響應服務器網絡消息的api
pomelo.on(event, callback)
參數說明

event 網絡消息的關鍵字 callback 網絡消息的處理函數

public/js文件夾裡面都是javascript文件以及json文件。
package.json commonJS的標准文件，裡面有整個包的說明

相信童鞋們在看了這幾篇文章以後，對pomelo會有個大概的認識

</script>