CocosCreator 集成 Pomelo 教程

本文出自 Eddy Wiki ,轉載請注明出處:http://eddy.wiki/creator-pomelo.html

本文主要介紹怎么在 CocosCreator 中集成 Pomelo, 以及使用CocosCreattor + Pomelo 開發(fā)一個多人聊天應用。

使用 Pomelo 官方多人聊天 demo(下文統(tǒng)一稱為 pomelo-chat-demo)的服務端代碼作為本多人聊天應用的服務端,而本聊天應用客戶端(下文統(tǒng)一稱為 ccc-pomelo-chat-client)則是參考 pomelo-chat-demo 的web客戶端使用CocosCreattor實現(xiàn)。

怎么運行ccc-pomelo-chat-client

本人開發(fā)環(huán)境

CocosCreator 1.1, Pomelo 1.2.2, MacOS 10.10.3

安裝 pomelo

參考 安裝 pomelo wiki 安裝 pomelo。

pomelo-chat-demo 源碼下載與運行

ccc-pomelo-chat-client 服務端使用的是 pomelo-chat-demo 的服務端,并沒有另外開發(fā),這樣可以很方便的展示多人聊天應用的多端(Web, Android, desktop等)聊天通訊功能。

參考 pomelo chat 源碼下載與安裝 wiki 下載 pomelo-chat-demo 源碼。

下載源碼后,通過下列步驟來運行 pomelo-chat-demo。下文使用 yourdir 指代你本地 pomelo-chat-demo 源碼的存放目錄。

打開終端,啟動 pomelo-chat-demo 的聊天服務器。

$ cd yourdir/chatofpomelo-websocket/game-server 
$ pomelo start

打開另外一個終端,啟動 pomelo-chat-demo 的 web 服務器。

$ cd yourdir/chatofpomelo-websocket/web-server
$ node app.js

如果啟動過程中沒有錯誤,那么我們就可以打開瀏覽器,輸入 http://127.0.0.1:3001/index.html, 然后就可以看到聊天應用的界面了。輸入一個用戶名和一個房間名,就可以開始聊天了。可以多開幾個客戶端實例(即打開多個網(wǎng)頁),測試 pomelo-chat-demo 是否能正常地運行。效果圖如下:

那么怎么關閉 pomelo-chat-demo 的聊天服務器呢,其實很簡單。打開另外一個終端

$ cd yourdir/chatofpomelo-websocket/game-server 
$ pomelo stop 或 pomelo kill

注意:如果不是按以上步驟關閉聊天服務器,那么當你再次啟動聊天服務器的時候,就有可能因為聊天服務器未完全關閉而出現(xiàn)錯誤。出現(xiàn)這種情況可以直接關閉啟動聊天服務器的終端(這樣聊天服務器就被完全關閉了),然后重新打一個終端啟動聊天服務器。

ccc-pomelo-chat-client源碼下載與運行

下文使用 yourdir 指代你本地 ccc-pomelo-chat-client 源碼的存放目錄。

從GitHub上下載 ccc-pomelo-chat-client 源碼。

$ cd yourdir
$ git clone https://github.com/eddy2015/ccc-pomelo-chat-client.git

使用 CocosCreator 打開 ccc-pomelo-chat-client 項目并運行預覽(模擬器和瀏覽器都行),效果圖如下:

經(jīng)本人測試,該客戶端在web、Android、ccc模擬器都可以正常運行,其他平臺請自行嘗試。服務器 ip 地址默認為 127.0.0.1,如果你是在 Android 等其他不和服務器同一臺機器平臺運行,請把該 ip 修改成你啟動服務器的電腦 ip 地址。端口默認為 3014,這個一般不需要修改,除非你改動了服務器端的代碼。輸入一個用戶名和一個房間名(用戶名和房間名限制了只能是字母、數(shù)字、或漢字),然后點擊 join 按鈕登陸后就可以進行一對多或者一對一聊天了。

CocosCreator 怎么集成 pomelo

集成 pomelo 步驟

下載 ccc-pomelo-chat-client 源碼,把源碼中的 ccc-pomelo-chat-client/assets/pomelo 拷貝到你的 CocosCreator 項目 assets 目錄下,這樣在你的項目中即可使用 pomelo-client 相關 API 了。

API請閱讀 pomelo/pomelo-client.js 源碼,具體使用方法可以參考 ccc-pomelo-chat-client 源碼,或者參考以下網(wǎng)址:

  1. pomelo 官方中文 wiki
  2. pomelo-chat-demo 源碼
  3. pomelo 客服端開發(fā)

集成后的會出現(xiàn)的一些警告

CocosCreator 項目集成 pomelo 后,你會在 CocosCreator 編輯器中看到如下的紅色錯誤信息:

Simulator : mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create
    at a: "Buffer.prototype.__proto__ = Uint8Array.prototype" (../../../../../../../Applications/CocosCreator.app/Contents/Resources/app.asar/node_modules/buffer/index.js:153)

或者在 web 上運行時,看到下列警告信息:

mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

以上的警告信息并不影響 pomelo 的使用。由于本人水平有限,所以暫時沒有解決該警告問題,如果各位有解決方法,請指出。

該 CocosCreator pomelo 庫由來

由于前一段時間對 pomelo 比較感興趣,所有就去了解了一下。最近也一直在關注 CocosCreator,看到論壇有不少人問 CocosCreator 是否能集成pomelo。根據(jù)我個人的理解:CocosCreator 實現(xiàn)了 websocket 的跨平臺封裝;而 pomelo 也有基于 websocket 的客戶端實例。因此,CocosCreator 集成 pomelo 應該不會有什么問題的。剛好端午節(jié)有空就嘗試集成了一下,然后就有了這篇文章和 ccc-pomelo-chat-client。

ccc-pomelo-chat-client 中的 pomelo 庫生成過程:

  1. 拷貝 chatofpomelo-websocket/web-server/public/js/lib/components/component-emitter/index.js 文件并修改文件名為 emitter.js,在 emitter.js 文件的 module.exports = Emitter; 代碼后面添加 window.EventEmitter = Emitter; 代碼。
  2. 拷貝 chatofpomelo-websocket/web-server/public/js/lib/components/NetEase-pomelo-protocol/lib/protocol.js 文件。
  3. 拷貝 chatofpomelo-websocket/web-server/public/js/lib/components/pomelonode-pomelo-protobuf/lib/client/protobuf.js 文件。
  4. 拷貝 chatofpomelo-websocket/web-server/public/js/lib/components/pomelonode-pomelo-jsclient-websocket/lib/pomelo-client.js 文件,并使用 cc.log、 cc.error 替換文件中的 console.log、console.error。

最后

這是我博客的第一篇博文(除了 HelloWord 外_),希望大家喜歡。由于本人水平有限,文章中難免錯漏之處,請各位不吝指正。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容