cocos2d js chat demo 多人聊天系统的实战小结.

最近cocos大招连发啊. 3.10发布, creator发布. (JS方向)

昨天顺手写了一个小的demo. 其实俺真的不怎么会js. 好在cocos2d-x作为后盾, 接口封装的基本是一致的. 用起来思路相同. 比如 Listview都是设置一下 setItemModel 然后 pushDefaultItem 这样.

jschatclient.js 算是核心部分了. 重点是  onmessage的处理.  然后又搭配上了一个 python 的websocket server.

整体就很轻便了. 满足可以直接Run起来看效果的需求了.

这个小demo就是常见的网络聊天的功能了. 用了一下cocos studio自带的美图.

点击Login,点击Send发送聊天. 同时可以看到别人发送的聊天信息. 数据封包用JSON明文字符串.

//登录 建立连接.
jschat_login(“127.0.0.1”,9001);

//发送聊天数据.
jschat_chat( chatTextField.getString() );

//数据包处理逻辑

//core function: msg be handled

//eg:login,logout,check online count, chat to others. private chat.

this.onmessage = function(msg)
{
console.log(“handle some msg here”);
updateDebugInfo(“got msg size=”+ msg.data.length );
var packet = JSON.parse(msg.data);

//第一次登录连接,服务器会返回一个userid.

if( packet[‘type’]==”LoginResp”)
{
console.log(“LoginResult”+ packet[‘result’]);
if( packet[“result”]==”ok”)
g_jsclient.clientId = packet[“userid”];
}else if( packet[‘type’]==”OtherChat” || packet[‘type’]==”chat”)
//客户端收到服务器转发的聊天消息.
{
console.log( “From” + packet[“userid”] + “to” + packet[“msg”]);
updateChatMsgUI( packet[“userid”],packet[“msg”]);
}

}

//chat server

# Called for every client connecting (after handshake)
def new_client(client, server):
print(“New client connected and was given id %d” % client[‘id’])
#server.send_message_to_all(“Hey all, a new client has joined us”)
server.send_message_to_all(‘{“type”:”OtherChat”,”msg”:”%d online” }’%(client[“id”]) )
addClient(client)
server.send_message(client,‘{“type”:”LoginResp”,”result”:”ok”,”userid”:”%d” }’%(client[“id”]))
# Called for every client disconnecting
def client_left(client, server):
print(“Client(%d) disconnected” % client[‘id’])
delClient(client)
# Called when a client sends a message
def message_received(client, server, message):
if len(message) > 200:
message = message[:200]+‘..’
print(“Client(%d) said: %s” % (client[‘id’], message))
#forward to other client.
forwardMsgToOthers(client,message);
users={}
def addClient(client):
_uid = client[‘id’]
users[_uid] = client
def delClient(client):
_uid = client[‘id’]
del users[_uid]
def forwardMsgToOthers(sender,msg):
for id,client in users.iteritems():
if( id == sender[‘id’]):
continue
server.send_message(client,msg);
很简单吧..
 

遇到的几个点.

  1. cocos studio 输出的文件使用.
  2. 绑定ui处理事件.
  3. 使用socketio的注意问题.
  4. 不造轮子的前提下: 用了python. 达到直接可以run起来看效果了.
  5. 插入新的聊天记录时自动滚动到底部.
    这两句话是收获啊.
    chatMsgList.refreshView();
    chatMsgList.jumpToBottom();   鄙视一下看到的demo.聊天怎么能insert到顶部呢.

小结: 还有更多的扩展工作可以做, 私聊, 频道聊天. 聊天带表情符号图片. 颜色字等等.  以及健壮性优化.

网络开发其实最核心的还是定义好业务流程(数据协议) 响应交互(玩家输入,服务器数据反馈. UI更新)

异常处理和优化的重要的环节,  使用正确的开发和调试姿势很重要.

 

 

One thought on “cocos2d js chat demo 多人聊天系统的实战小结.

  1. 为了迎合编辑. 又整了一个 JS代码的 的服务器 . (对. 逻辑相同) 都用别人的轮子.
    过几天还准备再鼓捣个 Unreal 版本. 一比较. 就全通了.

Leave a Reply