五子棋双人对战项目（3）—

一、分析需求

二、约定前后端交互接口

匹配请求：

匹配响应：

三、实现游戏大厅页面（前端代码）

game_hall.html：

common.css：

game_hall.css：

四、实现后端代码

WebSocketConfig

MatchAPI（处理请求、返回响应）

MatchResponse（响应）

MatchRequest （请求）

OnlineUserManager（用户在线状态）

Matcher（匹配器）

Room（游戏房间）

RoomManager（房间管理器）

五、线程安全问题

1、HashMap 和多开

2、三个队列

六、忙等问题

一、分析需求

需求：多个玩家，在游戏大厅进行匹配，系统会把实力相近的玩家匹配到一起。

要想实现上述效果，就需要利用到消息推送机制，即需要使用到 WebSocket 协议。如图：

二、约定前后端交互接口

通过需求分析，确认了要使用 WebSocket 协议，来实现消息推送的效果，因此，约定前后端交互接口也是根据 WebSocket 展开的。

WebSocket 协议，可以传输文本数据，也可以传输二进制数据，这里就采用传输 JSON 格式的文本数据。

匹配请求：

这里并不需要传送用户信息，因为在前面登录的时候，就已经把当前用户信息保存到HttpSession中了，在进行WebSocket连接时，只需要把HttpSession中的Session拿过来就行了，并保存在WebSocket连接中。

匹配响应：

这里会有两个不同的匹配响应。

匹配响应1：是指玩家点击开始匹配，玩家的这个操作的请求发送成功，后端返回回来的响应（立即返回的响应）。

匹配响应2：指有两个玩家成功匹配到一起了，服务器主动推送回来的响应（多久返回这个响应？服务器并不知道）。（匹配到的对手信息保存在服务器中）

三、实现游戏大厅页面（前端代码）

game_hall.html：

JSON字符串和 JS对象的转换：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>游戏大厅</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/game_hall.css">
</head><body><div class="nav">五子棋对战</div><!-- 整个页面的容器元素‘ --><div class="container"><!-- 这个div在container中是处于垂直水平居中这样的位置的 --><div><!-- 展示用户信息 --><div id="screen"></div><!-- 匹配按钮 --><div id="match-button">开始匹配</div></div></div><script src="./js/jquery.min.js"></script><script>$.ajax({type: 'get',url: '/userInfo',success: function (body) {let screenDiv = document.querySelector("#screen");screenDiv.innerHTML = "玩家: " + body.username + "分数: " + body.score+ "<br> 比赛场次: " + body.totalCount + "获胜场数: " + body.winCount},error: function () {alert("获取用户信息失败");}});// 此处进行初始化 websocket，并且实现前端的匹配逻辑// 此处的路径必须写作 /findMatchlet websocket = new WebSocket("ws://127.0.0.1:8080/findMatch");websocket.onopen = function () {console.log("onopen");}websocket.onclose = function () {console.log("onclose");// alert("游戏大厅中接收到了失败响应! 请重新登录");// location.assign("/login.html");}websocket.onerror = function () {console.log("onerror");}// 监听页面关闭事件，在页面关闭之前，手动调动这里的 websocket 的 close 方法window.onbeforeunload = function () {websocket.close();}//一会重点来实现，要处理服务器返回的响应websocket.onmessage = function (e) {// 处理服务器返回的响应数据，这个响应就是针对 "开始匹配" / "结束匹配" 来应对的//解析得到的响应对象，返回的数据是一个 JSON 字符串，解析成 js 对象let resp = JSON.parse(e.data);let matchButton = document.querySelector("#match-button");if (!resp.ok) {console.log("游戏大厅中接收到了失败响应! " + resp.reason);alert("游戏大厅中接收到了失败响应! " + resp.reason);location.assign("/login.html");return;}if (resp.message == 'startMatch') {//开始匹配请求发起成功console.log("进入匹配队列成功");matchButton.innerHTML = '匹配中...(点击停止)';} else if (resp.message == 'stopMatch') {//结束匹配请求发起成功console.log("离开匹配队列成功");matchButton.innerHTML = '开始匹配';} else if (resp.message == 'matchSuccess') {//已经匹配到对手了console.log("匹配到对手! 进入游戏房间");location.assign("/game_room.html");} else {console.log("收到了非法的响应! message=" + resp.message);}}// 给匹配按钮添加一个点击事件let matchButton = document.querySelector('#match-button');matchButton.onclick = function () {//在触发 websocket 请求之前，先确认下 websocket 连接是否好着if (websocket.readyState == websocket.OPEN) {//如果当前 readyState 处在 OPPEN状态，说明连接是好着的//这里发送的数据有两种可能，开始匹配/停止匹配if (matchButton.innerHTML == '开始匹配') {console.log("开始匹配");websocket.send(JSON.stringify({message: 'startMatch',}))} else if (matchButton.innerHTML == '匹配中...(点击停止)') {console.log("停止匹配");websocket.send(JSON.stringify({message: 'stopMatch',}));}} else {//这是说明当前连接是异常的状态alert("当前您的连接已经断开! 请重新登录!");location.assign('/login.html');}}</script></body></html>

common.css：

* {margin: 0;padding: 0;box-sizing: border-box;
}html, body {height: 100%;background-image: url(../image/blackboard.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;
}.nav {height: 50px;background: rgb(50, 50, 50);color: white;line-height: 50px;padding-left: 20px;
}.container {width: 100%;height: calc(100% - 50px);display: flex;align-items: center;justify-content: center;
}

game_hall.css：

.container {width: 100%;height: calc(100% - 50px);display: flex;align-items: center;justify-content: center;
}#screen {width: 400px;height: 200px;font-size: 20px;background-color: gray;color: white;border-radius: 10px;text-align: center;line-height: 100px;
}#match-button {width: 400px;height: 50px;font-size: 20px;background-color: orange;color: white;border: none;outline: none;border-radius: 10px;text-align: center;line-height: 50px;margin-top: 20px;
}#match-button:active{background-color: gray;
}

四、实现后端代码

后端要想建立WebSocket连接，需要创建一个专门的类（MatchAPI），来处理 WebSocket 的请求；同时，还要新建一个类（WebSocketConfig），进行WebSocket连接、配置 WebSocket 连接的路径，以及拿到之前 HTTP 连接时的 Session。

WebSocketConfig

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Autowiredprivate MatchAPI matchAPI;@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(matchAPI, "/findMatch").addInterceptors(new HttpSessionHandshakeInterceptor());}
}

MatchAPI（处理请求、返回响应）

JSON字符串和 Java对象的转换：

//通过这个类来处理匹配功能中的 websocket 请求
@Slf4j
@Component
public class MatchAPI extends TextWebSocketHandler {@Autowiredprivate OnlineUserManager onlineUserManager;@Autowiredprivate Matcher matcher;private ObjectMapper objectMapper = new ObjectMapper();@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {// 玩家上线，加入到 OnlineUserManager 中//1、先获取到当前用户的身份信息（谁在游戏大厅中，建立的连接）// 此处的代码，之所以能够getAttributes，全靠了在注册 websocket 的时候，// 加上了 .addInterceptors(new HttpsessionHandshakeInterceptor())// 这个逻辑就把 HttpSession 中的 Attribute 都给拿到 WebSocketSession 中了// 在 Http 登录逻辑中，往 HttpSession 中存了 User 数据：httpSession.setAttribute("user", user)// 此时就可以在 WebSocketSession 中把之前 HttpSession 里存的 User 对象给拿到了// 注意，此处拿到的 user，可能是为空的// 如果之前用户压根就没有通过 HTTP 来进行登录，直接就通过 /game_hall.html 这个URL来进行访问游戏大厅了// 此时就会出现 user 为 null 的情况try {User user = (User) session.getAttributes().get("user");//2、拿到了身份信息之后，进行判断当前用户是否已经登录过（在线状态），如果已经是在线，就不该继续进行后续逻辑WebSocketSession tmpSession = onlineUserManager.getFromGameHall(user.getUserId());if(tmpSession != null) {//  说明该用户已经登录了//  针对这个情况，要告知客户端，你这里重复登录了MatchResponse response = new MatchResponse();response.setOk(false);response.setReason("当前用户已经登录, 静止多开!");session.sendMessage(new TextMessage(objectMapper.writeValueAsString(response)));session.close();return;}onlineUserManager.enterGameHall(user.getUserId(), session);
//            System.out.println("玩家" + user.getUsername() + " 进入游戏大厅");log.info("玩家 {}",user.getUsername() + " 进入游戏大厅");} catch (NullPointerException e) {e.printStackTrace();// 出现空指针异常，说明当前用户的身份信息为空，也就是用户未登录// 就把当前用户尚未登录，给返回回去MatchResponse response = new MatchResponse();response.setOk(false);response.setReason("您尚未登录，不能进行后续匹配");session.sendMessage(new TextMessage(objectMapper.writeValueAsBytes(response)));}}@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {//  实现处理开始匹配请求和停止匹配请求User user = (User) session.getAttributes().get("user");//  拿到客户端发给服务器的数据String payload = message.getPayload();//  当前传过来的数据是JSON格式的字符串，就需要把它转成 Java 对象：MatchRequestMatchRequest request = objectMapper.readValue(payload, MatchRequest.class);MatchResponse response = new MatchResponse();if(request.getMessage().equals("startMatch")) {//  进入匹配队列//  把当前用户加入到匹配队列中matcher.add(user);//  把玩家信息放入匹配队列后，就可以返回一个响应给客户端了response.setOk(true);response.setMessage("startMatch");} else if (request.getMessage().equals("stopMatch")) {//  退出匹配队列//  在匹配队列中把当前用户给删除了matcher.remove(user);// 在匹配队列中把当前用户给删除后，就可以返回一个响应给客户端了response.setOk(true);response.setMessage("stopMatch");} else {//  非法情况response.setOk(false);response.setMessage("非法的匹配请求");}String jsonString = objectMapper.writeValueAsString(response);session.sendMessage(new TextMessage(jsonString));}@Overridepublic void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {// 玩家下线，删除 OnlineUserManager 中的该用户的Sessiontry {User user = (User) session.getAttributes().get("user");WebSocketSession tmpSession = onlineUserManager.getFromGameHall(user.getUserId());if(tmpSession == session) {onlineUserManager.exitGameHall(user.getUserId());}// 如果玩家正在匹配中，但WebSocket断开了，就应该把该玩家移除匹配队列log.info("Error玩家: {}", user.getUsername() + " 下线");matcher.remove(user);} catch (NullPointerException e) {e.printStackTrace();MatchResponse response = new MatchResponse();response.setOk(false);response.setReason("您尚未登录，不能进行后续匹配");session.sendMessage(new TextMessage(objectMapper.writeValueAsBytes(response)));}}@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {// 玩家下线，删除 OnlineUserManager 中的该用户的Sessiontry {User user = (User) session.getAttributes().get("user");WebSocketSession tmpSession = onlineUserManager.getFromGameHall(user.getUserId());if(tmpSession == session) {onlineUserManager.exitGameHall(user.getUserId());}// 如果玩家正在匹配中，但WebSocket断开了，就应该把该玩家移除匹配队列log.info("Closed玩家: {}", user.getUsername() + " 下线");matcher.remove(user);} catch (NullPointerException e) {e.printStackTrace();MatchResponse response = new MatchResponse();response.setOk(false);response.setReason("您尚未登录，不能进行后续匹配");session.sendMessage(new TextMessage(objectMapper.writeValueAsBytes(response)));}}
}

对于 WebSocket 请求、返回的响应，把传送的数据封装成这两个类：

MatchResponse（响应）

// 这是表示一个 WebSocket响应
@Data
public class MatchResponse {private boolean ok;private String reason;private String message;
}

MatchRequest （请求）

// 这是表示一个 WebSocket 请求
@Data
public class MatchRequest {private String message;
}

OnlineUserManager（用户在线状态）

之所以要维护用户的在线状态，目的是为了能够在代码中比较方便的获取到某个用户当前的WebSocket 会话，从而通过这个会话来对客户端发送消息。

同时，也能感知到用户的在线/离线状态~。

此处使用哈希表来维护 userId 和 WebSocketSession 的映射关系。

@Component
public class OnlineUserManager {//这个hash表就是用来表示当前用户在游戏大厅的在线状态private ConcurrentHashMap<Integer, WebSocketSession> gameHall = new ConcurrentHashMap<>();public void enterGameHall(int userId, WebSocketSession webSocketSession) {gameHall.put(userId, webSocketSession);}public void exitGameHall(int userId) {gameHall.remove(userId);}public WebSocketSession getFromGameHall(int userId) {return gameHall.get(userId);}
}

Matcher（匹配器）

通过这个匹配器，来处理玩家的匹配功能。

//  这个类表示匹配器，通过这个类来负责整个的匹配功能
@Slf4j
@Component
public class Matcher {//  创建三个匹配队列private Queue<User> normalQueue = new LinkedList<>();private  Queue<User> highQueue = new LinkedList<>();private Queue<User> veryHighQueue = new LinkedList<>();@Autowiredprivate OnlineUserManager onlineUserManager;@Autowiredprivate RoomManager roomManager;private ObjectMapper objectMapper = new ObjectMapper();//  操作匹配队列的方法//  把玩家放到匹配队列中public void add(User user) {if(user.getScore() < 2000) {synchronized (normalQueue) {normalQueue.offer(user);normalQueue.notify();}log.info("把玩家 " + user.getUsername() + " 加入到了 normalQueue 中");} else if(user.getScore() >= 2000 && user.getScore() < 3000) {synchronized (highQueue) {highQueue.offer(user);highQueue.notify();}log.info("把玩家 " + user.getUsername() + " 加入到了 highQueue 中");} else {synchronized (veryHighQueue) {veryHighQueue.offer(user);veryHighQueue.notify();}log.info("把玩家 " + user.getUsername() + " 加入到了 veryHighQueue 中");}}//  当玩家点击停止匹配，就需要把该玩家从匹配队列删除public void remove(User user) {if(user.getScore() < 2000) {synchronized (normalQueue) {normalQueue.remove(user);}log.info("玩家: " + user.getUsername() + " 在 normalQueue 队列被删除");} else if(user.getScore() >= 2000 && user.getScore() < 3000) {synchronized (highQueue) {highQueue.remove(user);}log.info("把玩家: " + user.getUsername() + " 在 highQueue 队列被删除");} else {synchronized (veryHighQueue) {veryHighQueue.remove(user);}log.info("把玩家: " + user.getUsername() + " 在 veryHighQueue 队列被删除");}}public Matcher() {//  创建三个线程，分别针对这三个匹配队列，进行操作Thread t1 = new Thread() {@Overridepublic void run() {//  扫描normalQueuewhile(true) {handlerMatch(normalQueue);}}};t1.start();Thread t2 = new Thread() {@Overridepublic void run() {while (true) {handlerMatch(highQueue);}}};t2.start();Thread t3 = new Thread() {@Overridepublic void run() {while (true) {handlerMatch(veryHighQueue);}}};t3.start();}public void handlerMatch(Queue<User> matchQueue) {synchronized (matchQueue) {try {//  1、检测队列中元素个数是否达到 2//  队列的初始情况可能是 空//  如果往队列中添加一个元素，这个时候，仍然是不能进行后续匹配操作的//  因此在这里使用 while 循环检查更合理while (matchQueue.size() < 2) {matchQueue.wait();}//  2、尝试从队列中取出两个玩家User player1 = matchQueue.poll();User player2 = matchQueue.poll();log.info("匹配出两个玩家: " + player1.getUsername() + ", " + player2.getUsername());//  3、获取到玩家的 WebSocket 会话//     获取到会话的目的是为了告诉玩家，你排到了~WebSocketSession session1 = onlineUserManager.getFromGameHall(player1.getUserId());WebSocketSession session2 = onlineUserManager.getFromGameHall(player2.getUserId());//  理论上来说，匹配队列中的玩家一定是在线的状态//  因为前面的逻辑进行了处理，当玩家断开连接的时候，就把玩家从匹配队列移除了//  但是这里还是进行一次判定，进行双重判定会更稳妥一点if(session1 == null) {//  如果玩家1不在线了，就把玩家2放回匹配队列matchQueue.offer(player2);return;}if(session2 == null) {//  如果玩家1不在线了，就把玩家2放回匹配队列matchQueue.offer(player1);return;}//  当前能否排到两个玩家是同一个用户的情况吗？一个玩家入队列两次//  理论上也不会存在~//  1) 如果玩家下线，就会对玩家移除匹配队列//  2) 又禁止了玩家多开//  但是仍然在这里多进行一次判定，以免前面的逻辑出现 bug 时，带来严重的后果if(session1 == session2) {//  把其中的一个玩家放回匹配队列matchQueue.offer(player1);return;}//  4、把这两个玩家放到同一个游戏房间中Room room = new Room();roomManager.add(room, player1.getUserId(), player2.getUserId());//  5、给玩家反馈信息//    通过 WebSocket 返回一个 message 为 “matchSuccess” 这样的响应MatchResponse response1 = new MatchResponse();response1.setOk(true);response1.setMessage("matchSuccess");String json1 = objectMapper.writeValueAsString(response1);session1.sendMessage(new TextMessage(json1));MatchResponse response2 = new MatchResponse();response2.setOk(true);response2.setMessage("matchSuccess");String json2 = objectMapper.writeValueAsString(response2);session2.sendMessage(new TextMessage(json2));} catch (IOException | InterruptedException e) {e.printStackTrace();}}}
}

Room（游戏房间）

//  这个类表示一个游戏房间
@Data
public class Room {// 使用字符串类型来表示，方便生成唯一值private String roomId;private User user1;private User user2;public Room() {// 构造 Room 的时候生成一个唯一的字符串表示房间 id// 使用 UUID 来作为房间 idroomId = UUID.randomUUID().toString();}
}

RoomManager（房间管理器）

// 房间管理器类
// 这个类也希望有唯一实例
@Component
public class RoomManager {private ConcurrentHashMap<String, Room> rooms = new ConcurrentHashMap<>();private ConcurrentHashMap<Integer, String> userIdToRoomId = new ConcurrentHashMap<>();public void add(Room room, int userId1, int userId2) {rooms.put(room.getRoomId(), room);userIdToRoomId.put(userId1, room.getRoomId());userIdToRoomId.put(userId2, room.getRoomId());}public void remove(String roomId, int userId1, int userId2) {rooms.remove(roomId);userIdToRoomId.remove(userId1);userIdToRoomId.remove(userId2);}public Room getRoomByRoomId(String roomId) {return rooms.get(roomId);}public Room getRoomByUserId(int userId) {String roomId = userIdToRoomId.get(userId);if(roomId == null) {// userId -> roomId 映射关系不存在，直接返回 nullreturn null;}return rooms.get(roomId);}
}