在云聊室项目中的前后端中，定义的一套前后端逻辑

1.用户信息

用户在完成登陆后，会获得token和userinfo的会话信息

javascript">// userinfo示范
{"id": null,"openId": "123123736EF541112312312313","nickname": "Deryck","roles": "player","permissions": null,"email": "1398072919@qq.com","password": null,"gender": "男","avatar":"https://www.thederycks.club/static/b24e29d1df3fe59b89b17534eb7d1a38.jpg"
}
// token示范
"token": "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiI5Qjg2MUY3MzZFRjU0MTE3QUQxNjk1RjFBNTA3RkZEOSIsInJvbGVzIjoicGxheWVyIiwibmFtZSI6IkRlcnljayIsImlzcyI6Imh0dHBzOi8vd3d3LnRoZWRlcnlja3MuY2x1Yi8iLCJhdWQiOiJsb2dpbiIsImlhdCI6MTczMTM5NTE5NSwiZXhwIjoxNzMyMjU5MTk1fQ.1qsrwYs4jYhamOyR_Texx3xVNzGZTq4T5DN7avzPpdHi7jHCzgIEwodALocoCCu43veTwk3gdQTWE9_o--DPbA"

2.在云聊室项目中，需要的用户内容

javascript">// 用户个人信息
{"openId": "123123736EF541112312312313","nickname": "Deryck","roles": "player","gender": "男",
}
// 用户的坐标
{"posX": 111,"posY": 222,
}
// 用户的聊天内容
{"chatMsg": "abaaba",
}

3.前后端交互逻辑

前端：

1.与后端建立管道连接，发送连接建立请求：

javascript">this.sendMsgToServer({"code":10001,"tips":"初始化用户信息","openId": null,"data":{"openId": "123123736EF541112312312313","nickname": "Deryck","roles": "player","gender": "男",}
})

2.心跳包

javascript">this.sendMsgToServer({"code":10000,"tips":"心跳","openId":JSON.parse(sessionStorage.getItem('userinfo')).openId,"data":null,
})

3.建立房间

javascript">this.sendMsgToServer({"code":10002,"tips":"创建房间","openId":JSON.parse(sessionStorage.getItem('userinfo')).openId,"data":this.roomName,
})

4.删除房间

javascript">this.sendMsgToServer({"code":10003,"tips": "删除房间","openId":JSON.parse(sessionStorage.getItem('userinfo')).openId,"data":this.roomName,
})

5.加入房间

javascript">this.sendMsgToServer({"code":10004,"tips":"加入房间","openId":JSON.parse(sessionStorage.getItem('userinfo')).openId,"data":room.title,//房间名
})

6.退出房间

javascript">this.sendMsgToServer({"code":10005,"tips":"退出房间","openId":JSON.parse(sessionStorage.getItem('userinfo')).openId,"data":this.roomCode,// 房间凭证
})

7.获取房间列表

javascript">this.sendMsgToServer({"code":10006,"tips":"获取房间列表",//房间凭证"openId":JSON.parse(sessionStorage.getItem('userinfo')).openId,"data":null
})

8.获取指定房间的人员信息

javascript">this.sendMsgToServer({"code":10007,"tips":"获取房间人员信息","openId":JSON.parse(sessionStorage.getItem('userinfo')).openId,"data":roomId
})

9.发送聊天信息

javascript">{
}

后端

后端需要的dto：

1.Player：

java">public class Player {// 唯一标识private String openId;// ctxprivate ChannelHandlerContext ctx;// 玩家昵称private String nickname;// 角色private String roles;// 玩家性别private String gender;// 玩家所在房间private String room_name;// 玩家是否已准备private Boolean is_ready;}

2.Position

java">public class Position {private String openId;private Integer posX;private Integer posY;}

3.ChatMsg

java">public class ChatMsg {private String openId;private String msg;
}

4.Room

javascript">public class Room {// 房间idprivate final Integer id;// 房间名private final String room_name;// 最大人数private final Integer max_player_num;}

4.进入房间后的逻辑

ps：在此之前，您的个人信息已经注册进房间通道

两个重要的本地更新函数：

javascript">// 本地新增玩家
local_addPlayer(playerInfo, posX, posY)playerInfo = {uid:,nickname:,gender:,
}// 本地更新玩家位置
local_playerMove(player,targetX, targetY,isMine)

1.加入房间

javascript">this.sendMsgToServer({"code":10004,"tips":"加入房间","openId":JSON.parse(sessionStorage.getItem('userinfo')).openId,"data":room.title,//房间名
})

2.开启监听

javascript">// 后端返回数据
{"code":10007,"tips":"获取房间内当前人员所有信息","data":[{"openId":,"nickname":,"gender":,"posX":,"posY":,},...]
}
{"code":20001,"tips":"有新玩家进入","data":{"openId":,"nickname":,"gender":,"posX":,"posY":,}
}
{"code":20002,"tips":"房间被删除","data":null,
}
{"code":20003,"tips":"有玩家离开","data":{"openId":,   }
}

3.坐标信息更新

javascript">// 玩家位置信息更新
if (event.data instanceof Blob) {// 坐标信息const reader = new FileReader();reader.onloadend = () => {const arrayBuffer = reader.result;// 使用 MessagePack 解析器将 ArrayBuffer 解析为 JavaScript 对象try {const position = msgpack5().decode(arrayBuffer);// 更新组件数据var index = this.playerUid.indexOf(String(position.openId));this.local_playerMove(this.players[index],position.posX-this.detaX,position.posY,false)} catch (error) {console.error('Error decoding data:', error);}};reader.readAsArrayBuffer(event.data);return;
}