开源H5棋牌 cocos creator微信棋牌小游戏 幼麟棋牌客户端分析笔记
此文紧接上文的服务端分析来进行客户端的分析
LoadingLogic.js （与初始化场景绑定 初始化各个组件 获取版本信息 加载资源）
1.onload:显示 splash 界面
初始化各个组件
2.start:checkVersion
-varURL = "http://127.0.0.1:9000";(http.js中配置的原始值)
-sendRequest("/get_serverinfo")
返回值: 包含版本信息 大厅连接地址 app网页地址
var ret = {
version:config.VERSION,
hall:hallAddr,
appweb:config.APP_WEB,
}
cc.vv.SI = ret;（设置服务器信息）
3.startPreloading加载资源
4.onLoadComplete资源加载完毕后 loadScene("login");
Login.js （与登陆场景绑定响应相关登陆按键消息）
1. onload:
cc.vv.http.url = cc.vv.http.master_url;( cc.vv.http.master_url为初始化了的静态变量)
2. start:
本地存储的账号密码不为空则 cc.vv.userMgr.onAuth(ret);
3. 点击 游客登陆
cc.vv.userMgr.guestAuth();
如果URL参数中不包含账号信息则随机生成账号
cc.vv.http.sendRequest("/guest");
回调onAuth
如果登陆成功
//设置获取版本信息时返回的服务器地址
cc.vv.http.url = "http://" + cc.vv.SI.hall;
login();
-sendRequest("/login");
-登陆成功则loadScene("hall");
Hall.js（绑定大厅场景 获取和更新相关用户信息 响应创建、加入游戏按键事件）
1.onload:
如果oldRoomID 不为空 则作为房间号进入此房间
if( cc.vv.userMgr.oldRoomId!= null){
cc.vv.userMgr.enterRoom(roomId);
}
2.Update:
存在房间数据则自动进入到房间
if(cc.vv &&cc.vv.userMgr.roomData != null){
cc.vv.userMgr.enterRoom(cc.vv.userMgr.roomData);
cc.vv.userMgr.roomData = null;
}
3.界面中绑定了CreateRoom.js 和 JoinGameInput.js组件
CreateRoom.js（处理创建房间面板相关消息事件）
-cc.vv.http.sendRequest("/create_private_room");
创建房间成功
cc.vv.userMgr.enterRoom(roomId);
//返回数据ret中包含游戏房间服务器地址和端口信息
-cc.vv.http.sendRequest("/enter_private_room",data,onEnter);
-cc.vv.gameNetMgr.connectGameServer(ret);
-JoinGameInput.js（处理加入房间面板相关消息事件）
cc.vv.userMgr.enterRoom(roomId);
//返回数据ret中包含游戏房间服务器地址和端口信息
-cc.vv.http.sendRequest("/enter_private_room",data,onEnter);
-cc.vv.gameNetMgr.connectGameServer(ret);
connectGameServer:function(data){
//连接游戏房间之前设置好游戏房间地址和端口信息
cc.vv.net.ip = data.ip +":" + data.port;
//emit“login” 事件 到服务端
cc.vv.net.send("login",sd);
}
客户端监听两个登陆结果事件
cc.vv.net.addHandler("login_result ")；（登陆返回结果）
//监听房间服务器返回登陆成功的消息
cc.vv.net.addHandler("login_finished",function(data){
console.log("eventlogin_finished");
cc.director.loadScene("mjgame");
});
MJGame.js 监听服务端关于游戏的消息事件
onLoad：初始化各类游戏需要的组件
-onGameBeign()根据数据 同步客户端画面 用于恢复游戏场景 断线重连
客户端网络地址变化
1. http.js中配置的原始值 获取游戏版本信息
var URL = "http://127.0.0.1:9000";
-sendRequest("/get_serverinfo")
返回值: 包含版本信息 大厅连接地址 app网页地址
var ret = {
version:config.VERSION,
hall:hallAddr,
appweb:config.APP_WEB,
}
cc.vv.SI = ret;（返回值包含大厅服务器地址信息）
2. //设置获取版本信息时返回的服务器地址为websocket 连接地址
cc.vv.http.url = "http://" +cc.vv.SI.hall;
-sendRequest("/login");
登陆成功则loadScene("hall");
3. 返回数据ret中包含游戏房间服务器地址和端口信息
cc.vv.userMgr.enterRoom(roomId);
cc.vv.http.sendRequest("/enter_private_room",data,onEnter);
返回数据
var ret = {
roomid:roomId,
ip:enterInfo.ip,
port:enterInfo.port,
token:enterInfo.token,
time:Date.now()
};
cc.vv.gameNetMgr.connectGameServer:function(data){
//设置 socket-io 连接地址信息
cc.vv.net.ip = data.ip + ":" + data.port;
cc.vv.net.connect();
}
服务端 客户端网络通讯方式
Client to Server
1.websocket发送http请求
cc.vv.net.send(event,data);
eg:
cc.vv.net.send("emoji",event.target.name);
2.socket-io
this.sio.emit(event,data);
Server to Client
socket-io 发送事件
socket.emit(event,data);
客户端点击游客登陆
onBtnQuickStartClicked:function(){
cc.vv.userMgr.guestAuth();
},
guestAuth:function(){
//如果没有保存的账号 则随机生成一个游客账户
if(account == null){
account = Date.now();
cc.sys.localStorage.setItem("account",account);
}
cc.vv.http.sendRequest("/guest",{account:account},this.onAuth);
}
onAuth:function(ret){
var self = cc.vv.userMgr;
self.account = ret.account;
self.sign = ret.sign;
//返回版本信息时 返回的服务器地址
cc.vv.http.url = "http://" +cc.vv.SI.hall;
self.login();
}
login:function(){
var self = this;
var onLogin = function(ret){
//account不存在 则创建一个用户
if(!ret.userid){
cc.director.loadScene("createrole");
}
else{
cc.director.loadScene("hall");
}
};
cc.vv.wc.show("正在登录游戏");
cc.vv.http.sendRequest("/login",{account:this.account,sign:this.sign},onLogin);
}
服务端对登陆请求的处理
app.get('/login',function(req,res){
// 查询数据库中的表 t_users是否存在数据
db.get_user_data(account,function(data){
if(data == null){
console.log("如果不存在用户数据则让客户端创建一个用户");
http.send(res,0,"ok");
return;
}
}