程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> C語言 >> C++ >> 關於C++ >> chatOfPomelo web

chatOfPomelo web

編輯:關於C++

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

這個文件結構比較龐大
bin 這個文件夾不用過多介紹,它是工具,用來安裝組件的
node_modules 這是nodejs的庫文件夾,它裡面包括了express這個nodejs的庫,作用是用來方便的創建web服務,供大家訪問,若不用express,純的nodejs創建web服務就會吃力得多
app.js web-server的入口,程序從它啟動,它非常的簡單,用express框架創建了一個web服務,然後加載了public/index.html這個頁面展示出來.<喎?/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>
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved