本文旨在梳理 pomelo 服务端与 cocos-js 客户端之间的通讯流程。为了简化演示，我们直接使用 pomelo 官方 demo（聊天室）作为服务端代码。
pomelo 官方 demo 聊天室默认支持浏览器客户端，接下来我们在此基础上加入 cocos-js 客户端的实现，使 cocos 与浏览器版本能够互通。
环境准备
- 安装 Node.js
- 下载聊天室 websocket 版本：https://github.com/NetEase/chatofpomelo-websocket
- 参考聊天室官方说明：https://github.com/NetEase/pomelo/wiki/chat
- 下载 cocos-js pomelo API：https://github.com/NetEase/pomelo-cocos2d-js，其中 pomelo-cocos2d-js.js 是 pomelo 的 cocos-js 运行库
启动服务端
新建 start.bat，输入以下内容：
cd game-server
start pomelo start // game_server
cd ..
cd web-server // web server
start node app.js启动成功后效果如下：
打开浏览器，访问 127.0.0.1:3001，启动两个浏览器客户端进行测试。
开发 cocos 客户端
新建 client.js，封装 pomelo 的连接与通讯逻辑：
require("pomeloClient.js");// 引入pomelo api
//全局单例instance
client = {};
function Client() {
username = "cocos-js";
this.onChat = null;
this.onAdd = null;
this.onLeave = null;
this.onDisconnected = null;
//全局单例instance
client.instance = this;
//初始化，从gate获取connector 然后链接
this.init = function () {
var pomelo = window.pomelo;
var route = 'gate.gateHandler.queryEntry';
var uid = "uid";
rid = "1";//频道
pomelo.init({
host: "127.0.0.1",
port: 3014,
log: true
}, function () { // gate
pomelo.request(route, {
uid: uid
}, function (data) { // connector
//获取connector成功
pomelo.disconnect();
//链接connector
pomelo.init({
host: data.host,
port: data.port,
log: true
}, function () {
var route = "connector.entryHandler.enter";
pomelo.request(route, {
username: username,
rid: rid
}, function (data) {
//链接connector成功
cc.log("[client.js]:" + JSON.stringify(data.users));
cc.log("[client.js]:" + "connect success!");
//初始化事件
client.instance.lazyInit();
});
});
});
});
}
//发送接口
this.send = function (msg) {
var route = "chat.chatHandler.send";
var target = "*";
pomelo.request(route, {
rid: rid,
content: msg,
from: username,
target: target
}, function (data) {
cc.log("[client.js]:" + " revc " +" " + (JSON.stringify(data)));
});
}
//注册服务端事件
this.lazyInit = function () {
pomelo.on("onChat", this.onChat);
pomelo.on("onAdd", this.onAdd);
pomelo.on("onLeave", this.onLeave);
pomelo.on('disconnect', this.onDisconnected);
};
};在 app.js 中实例化客户端并注册事件回调：
this.pomelo_client = new Client();
this.pomelo_client.init();
this.pomelo_client.onAdd = function (data) {
console.log("user online " + data.user);
console.log(JSON.stringify(data));
msgqueue.push("玩家:" + data.user + " 进入房间")
syncUI();
};
this.pomelo_client.onChat = function (data) {
// console.log( JSON.stringify( data));
console.log("recv:form " + data.from + " to " + data.target + " say:" + data.msg);
if (data.target == '*') {
msgqueue.push("玩家:" + data.from + " 对所有玩家说: " + data.msg);
}
else {
msgqueue.push("玩家:" + data.from + " 对" + data.target + " 说: " + data.msg);
}
syncUI();
};
this.pomelo_client.onLeave = function (data) {
console.log("user offline " + data.user);
msgqueue.push("玩家:" + data.user + " 离开房间")
syncUI();
};
this.pomelo_client.onDisconnected = function (reason) {
cc.log("disconnect!!!!!");
msgqueue.push("失去服务器连接!");
syncUI();
};限制界面上同时显示的消息条数，只保留最近 10 条：
sync: function () {
layer.removeAllChildren(true);
var len = msgqueue.length;
var i = len - 10;
var k = 0;
for (i = i < 0 ? 0 : i ; i < len; i++) {
k++;
var lab = new cc.LabelTTF(msgqueue[i], "Arial", 18);
lab.setHorizontalAlignment(3)
lab.x = cc.winSize.width / 2;
lab.y = 500 - 100 - 20 * k;
layer.addChild(lab);
}
}测试结果
按 F11 运行时，如果提示 6050 端口被占用，可以打开 cmd 执行 netstat -ano 查看占用进程。通常是 web_server 的 node.exe 占用了该端口，杀掉该进程即可，不影响客户端测试。
cocos 客户端与浏览器客户端互通的测试结果如下：
关闭服务端后，客户端会提示失去连接：
