CocosCreator开发笔记(6)-结合Pomelo框架编写多人在线聊天室教程

迷南。 2022-06-01 05:42 522阅读 0赞

## 测试环境 ##

客户端：Cocos Creator 1.6.2  
服务器端：Pomelo 2.2.5  
源码地址：[https://github.com/foupwang/CocosCreatorChatForPomelo.git][https_github.com_foupwang_CocosCreatorChatForPomelo.git]  
Git分支名：baseChat

## 教程说明 ##

本教程主要介绍怎么使用CocosCreator和Pomelo实现一个多人在线实时聊天室，Pomelo相关代码基于Pomelo官方提供的Chat范例（[https://github.com/NetEase/pomelo/wiki/chat%E6%BA%90%E7%A0%81%E4%B8%8B%E8%BD%BD%E4%B8%8E%E5%AE%89%E8%A3%85][https_github.com_NetEase_pomelo_wiki_chat_E6_BA_90_E7_A0_81_E4_B8_8B_E8_BD_BD_E4_B8_8E_E5_AE_89_E8_A3_85]）修改而成，Creator编辑器的客户端UI相关代码初始版本来自于：[http://www.jianshu.com/p/c64f7607adee][http_www.jianshu.com_p_c64f7607adee]

本教程的Demo功能包括：  
1、自定义服务器的IP、端口以及自己的用户名和房间名；  
2、同房间任意人聊天或广播消息；  
3、实时显示同房间其它人的聊天、上线和下线状态。  
运行截图如下：  
![这里写图片描述][SouthEast]

## 基础知识和安装运行 ##

#### 一、服务器环境 ####

因为本Demo使用了Pomelo框架做为服务器，而Pomelo又使用了Node.js，所以先安装Node.js吧。  
**1 安装Node.js**  
说到Node.js，顺便提一下JavaScript。在更早前，JavaScript虽然贵为世界上最流行的脚本语言，因为你所浏览的所有网页里都有它的存在。但长期以来，它主要应用和运行于浏览器端(即Web世界的前端)，而后端基本是PHP、Perl等脚本语言的天下，很多后端开发人员因此鄙视JavaScript，觉得它也就只能做做网页的互动效果而已。有大神看不下去了，便用C++编写了Node.js，它最主要的目的就是让JavaScript运行在后端，即脱离了浏览器的束缚，JavaScript从此一跃成为脚本语言世界的一等公民，堪与PHP、Perl、Python、Ruby平起平坐。因此说，Node.js不是一种独立语言，也不是一个JavaScript框架，而是一个让JavaScript可以运行在服务器端的开发平台。Node.js最大特点就是异步操作，每个进程只有1个线程，通过事件触发来执行代码逻辑，特别适合于游戏服务器等IO密集型应用。Node.js的安装方法也非常简单，各种平台都能找到相应的安装包或源码安装方法，这里有个不错的教程：[https://github.com/nswbmw/N-blog/blob/master/book/1.1%20Node.js%20%E7%9A%84%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8.md][https_github.com_nswbmw_N-blog_blob_master_book_1.1_20Node.js_20_E7_9A_84_E5_AE_89_E8_A3_85_E4_B8_8E_E4_BD_BF_E7_94_A8.md]。顺便说一下，我的Node.js版本是6.11.0。  
**2 安装Pomelo**  
Pomelo是网易出的基于Node.js的开源游戏服务器框架，支持高并发、 高可伸缩、分布式多进程。它包括基础开发框架和一系列工具和库，帮助服务器开发者省去了枯燥的重复开发和底层逻辑搭建，对于一般的游戏服务器，我们基于它来开发，只用关注具体的游戏逻辑即可，避免了重复造轮子。它继承了Node.js的优点，安装和使用都非常简单，这是官方提供的教程：[https://github.com/NetEase/pomelo/wiki/%E5%AE%89%E8%A3%85pomelo][https_github.com_NetEase_pomelo_wiki_E5_AE_89_E8_A3_85pomelo]  
**3 下载本教程Demo源码**  
在本机上合适目录下（注意：目录名不要带有中文），使用Git客户端或命令行：  
$ git clone [https://github.com/foupwang/CocosCreatorChatForPomelo.git][https_github.com_foupwang_CocosCreatorChatForPomelo.git]  
$ git checkout baseChat  
**4 安装第三方依赖模块**  
进入源码的game-server目录，输入命令：npm install。注意看屏幕上的输出，如果有出现Error提示，说明安装可能出错，应根据错误提示做相应处理。一般情况下不会出错；  
**5 启动服务器**  
在game-server目录下输入命令：pomelo start。接着会看到好多的LOG信息，如果没有Error，则代表服务器启动成功。服务器启动后，会在本地127.0.0.1的3014端口监听客户端连接；

#### 二、客户端环境 ####

客户端环境非常简单，只需安装CocosCreator即可。CocosCreator是Cocos官方最新推出的完整游戏开发引擎，支持C++、Lua、JavaScript三种开发语言以及可视化的全功能编辑器，目前可运行在Mac和Windows下。  
**1 安装Cocos Creator**  
官网：[http://www.cocos.com/][http_www.cocos.com]  
安装完成后，使用Creator打开game-client目录。  
**2 运行**  
Demo启动后会自动连接服务器，也可在Creator中，自定义服务器的IP、端口以及自己的用户名和房间名，如下图所示：  
![这里写图片描述][SouthEast 1]  
连接成功后，在窗口下方UI上会有连接成功的提示，接下来就可以开始愉快聊天了~  
![这里写图片描述][SouthEast 2]

[https_github.com_foupwang_CocosCreatorChatForPomelo.git]: https://github.com/foupwang/CocosCreatorChatForPomelo.git
[https_github.com_NetEase_pomelo_wiki_chat_E6_BA_90_E7_A0_81_E4_B8_8B_E8_BD_BD_E4_B8_8E_E5_AE_89_E8_A3_85]: https://github.com/NetEase/pomelo/wiki/chat%E6%BA%90%E7%A0%81%E4%B8%8B%E8%BD%BD%E4%B8%8E%E5%AE%89%E8%A3%85
[http_www.jianshu.com_p_c64f7607adee]: http://www.jianshu.com/p/c64f7607adee
[SouthEast]: /images/20220601/7986286110064d4bb98a1524a949f2c7.png
[https_github.com_nswbmw_N-blog_blob_master_book_1.1_20Node.js_20_E7_9A_84_E5_AE_89_E8_A3_85_E4_B8_8E_E4_BD_BF_E7_94_A8.md]: https://github.com/nswbmw/N-blog/blob/master/book/1.1%20Node.js%20%E7%9A%84%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8.md
[https_github.com_NetEase_pomelo_wiki_E5_AE_89_E8_A3_85pomelo]: https://github.com/NetEase/pomelo/wiki/%E5%AE%89%E8%A3%85pomelo
[http_www.cocos.com]: http://www.cocos.com/
[SouthEast 1]: /images/20220601/957ac732d9a546428865b202e6a15b78.png
[SouthEast 2]: /images/20220601/f5c8f322693143c2a0516c1592ea574c.png