环境
- 服务器端使用Nodejs6.9.4 + Express4.x + Socket.IO 2.02
- 客户端使用socket.io.js
名词和变量
游戏大厅
1. 建立连接后就认为在游戏大厅中;
2. 断开连接(比如关闭浏览器或者其他),认为离开游戏大厅;
3. 即使在【游戏房间】中,也依然认定其在游戏大厅;
4. 通过服务器端onlineUsers(Map结构)来存储在线用户(作为key);
游戏房间
1. 创建游戏后,创建的内容就是游戏房间;
2. 游戏房间变量存储以下内容:
2.1 玩家player存储黑方black,白方white;
2.2 观战者watcher(Set结构);
2.3 房间创建时间ctime(Number类型);
2.4 下棋数据steps(Array);
2.5 棋盘大小size(Number);
2.6 游戏结束标志roomover(Boolean);
2.7 游戏房间的编号roomID(Number);
在线用户onlineUsers(服务器端)
1. 以userSocket作为key,存储在线用户,以及该用户当前的游戏信息(房间号 + 角色);
2. 用户建立连接时,将其加入;
3. 用户退出房间时,从中删除(并找到其对应的游戏房间,从房间删除),通报该房间所有人;
4. 退出游戏大厅时,读取到该用户所在游戏信息。如果有则调用3
5. Map结构;
6. key是userSocket;
7. value是对象;
7.1 属性id是游戏ID;
7.2 属性role是游戏角色
开启的房间roomlist(服务器端)
1. Map结构,以roomID作为key,存储该房间的信息;
2. 游戏房间的具体数据查看关键词【游戏房间】;
3. 可以通过.size获取到当前已开启的游戏房间的房间数
1、服务器端
1.1、建立长连接connection
- 用户建立创长连接,回调函数出现socket变量;
- 将socket作为key,存储在onlineUsers中,值为null;
1.2、退出长连接disconnect
- 用户退出长连接,触发”disconnect”;
- 调用【退出游戏房间】相关逻辑;
1.3、创建游戏房间createRoom
- 检查该用户是否在房间中,如果在则禁止创建;
- 随机创建一个不重复的房间ID;
- 初始化该房间信息;
- 将该房间信息和房间ID,以kv形式添加到roomlist中;
- 返回该房间ID;
- 调用加入房间的API;(见下面)
1.4、加入房间userEnterRoom
- 需要参数roomID,userSocket(用户的socket),role(黑方、白方或者观战,无参数时默认为观战);
- 首先通过userSocket去查onlineUsers,看是否有值;
- 如果有值,则调用【退出游戏房间】相关逻辑;
- 从roomID查看roomlist,是否有该房间;
- 如果查不到则通知用户该房间不存在,返回;
- 如果找到该房间,首先检查是否有role,如果没有,则将其设置为watcher(观战);
- 检查该房间指定role是否有人,如果有人,则将用户添加到watcher位置,并通报用户该位置有人;
- 如果没有人,则将用户添加到该位置;
- 更新该角色的onlineUser中的值({roomID, role});
- 通报该房间内所有用户,有玩家进入,其角色为role;
- 通过roomID从list里拉取信息,然后对该房间内所有用户,调用【向用户更新房间信息】逻辑;
1.5、退出游戏房间leaveRoom
- 需要参数userSocket;
- 以socket作为key,尝试从onlineUsers拉取值;
- 如果值不为空,可以从其数据中拉取到房间ID和游戏角色;
- 从roomlist拉取到该游戏,删除该角色;
- 对该游戏房间中所有玩家,通报该玩家已经退出游戏;
- 从onlineUsers删除该用户;
- 如果notLeave不为true,对该房间内所有用户,调用【向用户更新房间信息】逻辑;
1.6、将某人踢出游戏房间kickRoom(不做)
- 先从发起方,拉取他的socket;
- 从socket拉取到roomID;
- 从roomID拉取到房间;
- 从发起方拉取到踢人的位置;
- 删除该角色;
- 对该游戏房间中所有玩家,通报该玩家被踢出游戏;
- 对该角色通报他被踢出游戏;
- 更新该角色的onlineUser中的值(null);
1.7、切换游戏角色changeRoomRole
- 需要参数userSocket和role;
- 从userSocket获游戏ID和游戏角色currentRole;
- 去roomlist找该房间,如果房间不存在则提示,并return(理论上不可能吧?但为了代码健壮性写上);
- 找确定该房间该位置是否有人,如果有人则提示,并return;
- 将当前用户添加到该位置;
- 从之前获取的角色位置,在游戏房间中找到,并删除该userSocket;
- 更新该角色的onlineUser中的值(当前有roomID和role);
- 向房间内所有用户,通报该用户角色切换;
1.8、向用户更新房间信息updateRoomRoom
- 需要参数roomID;
- 从roomlist拉取当前游戏房间用户的信息;
- 创建对象,里面添加进去黑方白方和观战者的信息;
- 遍历游戏房间的黑方、白方和观战方的userSocket,并向他们emit第三步的对象,emit的key是updateRoomRoom;
2、客户端
2.1、基本功能
- SETTING:设置棋子大小
- ROOMINFO:房间信息,从服务器同步到本地;
- USERINFO:目前只存储了用户名;
- init函数:初始化函数,当页面加载完成后执行(内含仿jQuery的简化选择器,连接websocket的后端服务器,DOM事件监听,socket.io事件监听);
- selector函数:使用document.querySelector和querySelectorAll来简化选择器操作;
- listenDomclickEvent函数:监听各种dom的点击事件,比如创建房间啦,加入房间啦,切换角色啦,开始新游戏啦之类;
- listenSocketEvent函数:监听服务器发送过来的socket.io事件;
- getName函数:生成随机姓名;
- getNowDate函数:生成事件戳;
- initBoard函数:通过房间信息,更新;
- createBox函数:生成棋盘的格子;
- createPiece函数:生成棋子;
- toMakePieceWhenHasStart函数:如果已经在下棋中,那么需要通过这个方法来生成棋盘上所有的棋子;
- resetRoomInfo函数:重置棋盘、房间信息;
- checkerboardClick函数:监听下棋下在哪里了;
- checkCanPutPiece函数:前端判定是否可以下这一步棋(后端会二次校验);
- GameOver函数:游戏结束后的处理;
- changeColor函数:切换下棋角色时的提示;
2.2、三种不同的提示
【函数】通过roomID向游戏内所有用户发送通知信息alertToRoom
- 当然需要参数roomID,需要参数信息内容;
- 通过roomID去从roomlist里找游戏;
- 遍历游戏里的每个人,调用emit发送信息,key是alertToRoom;
【函数】通过room去遍历每个用户forEachUserSocketInRoom
- 参数是从roomlist里找到的room,以及回调函数;
- 遍历每个角色,调用回调函数。回调函数参数一是该位置的userSocket,参数二是role
【消息key】通报给当前用户alertToUser
- 参数是对象,{msg:”“}
3、通信关键字
3.1、服务器端socket响应
connection
当用户和服务器建立长连接时触发
disconnect
用户断开链接(主动被动都会触发)
createRoom
用户创建游戏时触发
updateName
用户更新名字
leaveRoom
用户离开房间
userEnterRoom
用户进入房间
speakwords
用户发言(大厅或者room里)
restartRoom
当要求开始新的一局的请求发送时,判断游戏是否结束,黑方和白方是否都在(并且要是其中一方发起的),如果是,则返回信息初始化棋盘
3.2、客户端socket响应
connection-success
建立链接后,服务器端会发送这个过来
disconnect
断线时会触发本事件(无论是主动还是被动),提示用户断线了。
getCurrentName
获取当前姓名,当用户通过updateName推送姓名到服务器后,服务器端响应后会发送这个给客户端
tipsToUser
黑色 字体的系统消息
alertToUser
红色 字体的系统消息
alertToRoom
红色 字体系统消息,对房间内所有人推送时使用。
leaveRoom
蓝色 字体系统消息,用户离开房间时推送离开消息时使用。
chat-words
收到聊天信息时,推送到聊天栏。房间和大厅的聊天都会通过这个来获取
broadcast
广播信息,每个人都会收到。
userINFO
收到当前用户信息,暂时没用
转自: https://blog.csdn.net/qq20004604/article/details/73835546