Cocos Creator 使用 Socket.io 开发聊天室

本实例主要给刚接触 Cocos Creator 和网络开发小白使用。老司机可以马上调头，这是开往幼儿园的专列。一起来看看「社区水友：包打听boy」友情贡献的用 Creator 使用 Socket.io 开发教程。

开发背景

聊天室作为大多数网络游戏开发人员的第一个项目，实现了一对多、一对一的数据交互，作为基石一般的存在，可以在上面搭建出各种复杂多变的网络程序，此篇作为我网络游戏开发的第一篇，希望与大家共勉。

服务器的选择

与 Cocos Creator 搭配的全栈解决方案当然是 Node.js 了

Pomelo

https://github.com/NetEase/pomelo

1、网易开源的游戏应用服务器

2、能用简单的代码搭建一个稳定的服务器

3、丰富的组件

4、完善的客户端类库

WebSocket

https://github.com/websockets/ws

1、浏览器原生支持

2、方法监听简单明了

3、阮一峰大大的详细解释

http://www.ruanyifeng.com/blog/2017/05/websocket.html

Socket.io

https://github.com/socketio/socket.io

1、建立在webSicket之上

2、拥有完善的处理方法

3、类库更新十分勤快 拥有大量的用户

选型 | 结果
Pomelo 比较适合有一定的网络开发基础的人使用

PASS 
纯 WebSocket 的开发相对比较简单，但是有更好的方案

PASS
Socket.io 反正我没找到更好的... 

Bingo

服务器的开发

码第一行代码之前默念「善哉善哉 bug 去也」

1、安装 npm 包
找到你的项目目录执行以下包安装命令

2、引入包
编写一个 app.js 的文件

3、设置跨域访问
之后使用 express 做工具服务器的时候会用到

4、绑定端口

5、测试绑定

启动服务器 node app，并打开网址查看出现 Hello World 即为成功

http://127.0.0.1:3000

6、编写一个简单聊天服务器
- 代码量 50 行左右 有完整的注释
简单分析一下
- sio 的 on 和 emit 与 node.js 的事件监听和触发相似
- connection 用来监听客户端的链接
- socket 是获得的客户句柄
- socket.on 用于注册自定义事件
- user 和 msgObj 的内容在客户端的 Params.ts 里

基本界面

聊天室界面

登陆界面

群聊界面

私聊界面

下线通知

客户端的开发

NetUtil.ts 参考麒麟子的 net.js

TS 中 window.io 是不存在的需要使用转化获得

使用 io.connect 连接到服务器

封装 on / emit 方法方便使用

LoadingCtrl.ts 初始化连接 

之后要优于其他操作的初始化都放到这里比如 i18n

LoadingCtrl.ts 获得用户名并发送给服务器

ChatCtrl.ts  注册服务器的事件

UserNode.ts

预制件通过 user 初始化

注册了点击事件

点击展示单独发送的面板

Params.ts 定义了两个接口

GitHub 下载地址：https://github.com/SeaPlanet/cocoscreator_chat

---

Socket.io 的默认事件列表 TIPS

服务端事件

事件名称	事件解释
connection	socket连接成功之后触发，用于初始化
message	客户端通过socket.send来传送消息时触发此事件
anything	收到任何事件时触发
disconnect	socket失去连接时触发

客户端事件

事件名称	事件解释
connect	连接成功
connecting	正在连接
disconnect	断开连接
connect_failed	连接失败
error	错误发生，并且无法被其他事件类型所处理
message	同服务器端message事件
anything	同服务器端anything事件
reconnect_failed	重连失败
reconnect	成功重连
reconnecting	正在重连