CocosCreator 集成 Pomelo 教程

本文出自 Eddy Wiki ,转载请注明出处:http://eddy.wiki/creator-pomelo.html

本文主要介绍怎么在 CocosCreator 中集成 Pomelo, 以及使用CocosCreattor + Pomelo 开发一个多人聊天应用。

使用 Pomelo 官方多人聊天 demo(下文统一称为 pomelo-chat-demo)的服务端代码作为本多人聊天应用的服务端,而本聊天应用客户端(下文统一称为 ccc-pomelo-chat-client)则是参考 pomelo-chat-demo 的web客户端使用CocosCreattor实现。

怎么运行ccc-pomelo-chat-client

本人开发环境

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 的服务端,并没有另外开发,这样可以很方便的展示多人聊天应用的多端(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, 然后就可以看到聊天应用的界面了。输入一个用户名和一个房间名,就可以开始聊天了。可以多开几个客户端实例(即打开多个网页),测试 pomelo-chat-demo 是否能正常地运行。效果图如下:

那么怎么关闭 pomelo-chat-demo 的聊天服务器呢,其实很简单。打开另外一个终端

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

注意:如果不是按以上步骤关闭聊天服务器,那么当你再次启动聊天服务器的时候,就有可能因为聊天服务器未完全关闭而出现错误。出现这种情况可以直接关闭启动聊天服务器的终端(这样聊天服务器就被完全关闭了),然后重新打一个终端启动聊天服务器。

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 项目并运行预览(模拟器和浏览器都行),效果图如下:

经本人测试,该客户端在web、Android、ccc模拟器都可以正常运行,其他平台请自行尝试。服务器 ip 地址默认为 127.0.0.1,如果你是在 Android 等其他不和服务器同一台机器平台运行,请把该 ip 修改成你启动服务器的电脑 ip 地址。端口默认为 3014,这个一般不需要修改,除非你改动了服务器端的代码。输入一个用户名和一个房间名(用户名和房间名限制了只能是字母、数字、或汉字),然后点击 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 源码,或者参考以下网址:

  1. pomelo 官方中文 wiki
  2. pomelo-chat-demo 源码
  3. pomelo 客服端开发

集成后的会出现的一些警告

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。根据我个人的理解:CocosCreator 实现了 websocket 的跨平台封装;而 pomelo 也有基于 websocket 的客户端实例。因此,CocosCreator 集成 pomelo 应该不会有什么问题的。刚好端午节有空就尝试集成了一下,然后就有了这篇文章和 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 外_),希望大家喜欢。由于本人水平有限,文章中难免错漏之处,请各位不吝指正。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容

  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 13,342评论 0 15
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,615评论 4 59
  • 今天,我读了《查理九世——香巴拉,世界的尽头》1-40页。 好词:层层叠叠、满脸惊惧、慌不择路、神精质班、撕心...
    王子凡同学阅读 3,076评论 1 0
  • 入秋后雨噼里啪啦下着 云里的他不时按着快门 好像把人间都拍进去 身上的长袍湿了大片 镜头里风吹着一颗纤细的树摇摇欲...
    吉加子阅读 208评论 0 1