使用WebSocket實現實時多人答題對戰游戲

優點：可靠性、全雙工協議、開源支持多、應用較廣泛、面向連接、研發成本低、報文內容不限制（IP層自動分包，重傳，不大於1452bytes）

缺點：操作系統：較耗內存，支持連接數有限、設計：協議較復雜，自定義應用層協議、網絡：網絡差情況下延遲較高、傳輸：效率低於UDP協議

特性：面向連接、可靠性、全雙工協議、基於IP層、OSI參考模型位於傳輸層、適用於二進制傳輸

WebScoket

優點：協議較成熟、基於TCP/IP，擁有TCP優點、數據報文較小，包頭非常小、面向連接，有狀態協議、開源較多，開發較快

缺點：

特性：有狀態，面向連接、數據報頭較小、適用於WEB3.0，以及其他即時聯網通訊

UDP

優點：操作系統：並發高，內存消耗較低、傳輸：效率高，網絡延遲低、傳輸模型簡單，研發成本低

缺點：協議不可靠、單向協議、開源支持少、報文內容有限，不能大於1464bytes、設計：協議設計較復雜、網絡：網絡差，而且丟數據報文

特性：無連接，不可靠，基於IP協議層，OSI參考模型位於傳輸層，最大努力交付，適用於二進制傳輸

總結

對於弱聯網類游戲，必須消除類的，卡牌類的，可以直接HTTP協議，考慮安全的話直接HTTPS，或者對內容體做對稱加密；
對於實時性，交互性要求較高，可以優先選擇Websocket，其次TCP協議；
對於實時性要求極高，且可達性要求一般可以選擇UDP協議；
局域網對戰類，賽車類，直接來UDP協議吧；

WebSocket實現雙人在線游戲實時通信

我們采用websocket作為我們的通信方案，主要是因為我們希望對戰雙方能夠實時顯示對方的得分。

本小節詳細介紹了我們在線問答對戰游戲中，具體的websocket通訊方式定義。

本問答游戲規則如下：

用戶打開h5頁面后，輸入自己的昵稱，發送給服務端，服務端將用戶昵稱保存到hashmap，並記錄用戶狀態（空閑，游戲中），接着用戶進入大廳。
大廳中用戶可以互相選擇，一旦某用戶選擇了另一位用戶，將觸發開始游戲，雙方進入答題模式。
答題的兩位用戶各回答10題，每題答對為10分，共100分，左上角頁面顯示自己的分數，右上角顯示對方分數，實時通過websocket接收對方分數。
10題結束，雙方等待對方總分，最后判斷輸贏，顯示結果界面。

所以我們需要設計三個WebSocket協議：

用戶創建昵稱，進入玩家大廳
用戶選擇對手，雙方進入游戲
對戰過程實時顯示雙方分數

接下來詳細介紹這三種WebSocket接口

用戶創建昵稱，進入玩家大廳

打開界面，進入游戲：

我們使用了HashMap存儲用戶狀態，

private Map<String, StatusEnum> userToStatus = new HashMap<>();

用戶狀態分為空閑和游戲中：

public enum StatusEnum {
    IDLE,
    IN_GAME
}

WebSocket接口設計如下：

WebSocket接口代碼如下：

@MessageMapping("/game.add_user")
    @SendTo("/topic/game")
    public MessageReply addUser(@Payload ChatMessage chatMessage, SimpMessageHeaderAccessor headerAccessor) throws JsonProcessingException {
        MessageReply message = new MessageReply();
        String sender = chatMessage.getSender();
        ChatMessage result = new ChatMessage();
        result.setType(MessageTypeEnum.ADD_USER);
        result.setReceiver(Collections.singletonList(sender));
        if (userToStatus.containsKey(sender)) {
            message.setCode(201);
            message.setStatus("該用戶名已存在");
            message.setChatMessage(result);
            log.warn("addUser[" + sender + "]: " + message.toString());
        } else {
            result.setContent(mapper.writeValueAsString(userToStatus.keySet().stream().filter(k -> userToStatus.get(k).equals(StatusEnum.IDLE)).toArray()));
            message.setCode(200);
            message.setStatus("成功");
            message.setChatMessage(result);
            userToStatus.put(sender, StatusEnum.IDLE);
            headerAccessor.getSessionAttributes().put("username",sender);
            log.warn("addUser[" + sender + "]: " + message.toString());
        }
        return message;
    }

用戶選擇對手，雙方進入游戲

在大廳中選擇玩家，隨后會進入對戰：

我們使用了HashMap存儲了正在對戰的用戶，給雙方配對。

private Map<String, String> userToPlay = new HashMap<>();

WebSocket接口設計如下：

WebSocket接口代碼如下：

@MessageMapping("/game.choose_user")
    @SendTo("/topic/game")
    public MessageReply chooseUser(@Payload ChatMessage chatMessage) throws JsonProcessingException {
        MessageReply message = new MessageReply();
        String receiver = chatMessage.getContent();
        String sender = chatMessage.getSender();
        ChatMessage result = new ChatMessage();
        result.setType(MessageTypeEnum.CHOOSE_USER);
        if (userToStatus.containsKey(receiver) && userToStatus.get(receiver).equals(StatusEnum.IDLE)) {
            List<QuestionRelayDTO> list=new ArrayList<>();
            questionService.getQuestions(limit).forEach(item->{
                QuestionRelayDTO relayDTO=new QuestionRelayDTO();
                relayDTO.setTopic_id(item.getId());
                relayDTO.setTopic_name(item.getQuestion());
                List<Answer> answers=new ArrayList<>();
                answers.add(new Answer(1,item.getId(),item.getOptionA(),item.getResult()==1?1:0));
                answers.add(new Answer(2,item.getId(),item.getOptionB(),item.getResult()==2?1:0));
                answers.add(new Answer(3,item.getId(),item.getOptionC(),item.getResult()==3?1:0));
                answers.add(new Answer(4,item.getId(),item.getOptionD(),item.getResult()==4?1:0));
                relayDTO.setTopic_answer(answers);
                list.add(relayDTO);
            });
            result.setContent(mapper.writeValueAsString(list));
            result.setReceiver(Arrays.asList(sender, receiver));
            message.setCode(200);
            message.setStatus("匹配成功");
            message.setChatMessage(result);
            userToStatus.put(receiver, StatusEnum.IN_GAME);
            userToStatus.put(sender, StatusEnum.IN_GAME);
            userToPlay.put(receiver,sender);
            userToPlay.put(sender,receiver);
            log.warn("chooseUser[" + sender + "," + receiver + "]: " + message.toString());
        } else {
            result.setContent(mapper.writeValueAsString(userToStatus.keySet().stream().filter(k -> userToStatus.get(k).equals(StatusEnum.IDLE)).toArray()));
            result.setReceiver(Collections.singletonList(sender));
            message.setCode(202);
            message.setStatus("該用戶不存在或已在游戲中");
            message.setChatMessage(result);
            log.warn("chooseUser[" + sender + "]: " + message.toString());
        }
        return message;
    }

對戰過程實時顯示雙方分數

對戰過程中的演示圖：左邊顯示我方分數，右邊顯示對方分數

WebSocket接口設計如下：

WebSocket接口代碼如下：

@MessageMapping("/game.do_exam")
    @SendTo("/topic/game")
    public MessageReply doExam(@Payload ChatMessage chatMessage) throws JsonProcessingException {
        MessageReply message = new MessageReply();
        String sender = chatMessage.getSender();
        String receiver = userToPlay.get(sender);
        ChatMessage result = new ChatMessage();
        result.setType(MessageTypeEnum.DO_EXAM);
        log.warn("userToStatus:" + mapper.writeValueAsString(userToStatus));
        if (userToStatus.containsKey(receiver) && userToStatus.get(receiver).equals(StatusEnum.IN_GAME)) {
            result.setContent(chatMessage.getContent());
            result.setSender(sender);
            result.setReceiver(Collections.singletonList(receiver));
            message.setCode(200);
            message.setStatus("成功");
            message.setChatMessage(result);
            log.warn("doExam[" + receiver + "]: " + message.toString());
        }else{
            result.setReceiver(Collections.singletonList(sender));
            message.setCode(203);
            message.setStatus("該用戶不存在或已退出游戲");
            message.setChatMessage(result);
            log.warn("doExam[" + sender + "]: " + message.toString());
        }
        return message;
    }

進一步

這個只是個兩天趕出來的Demo，當然里成品還有非常大的差距。這里有幾個需要繼續解決的事情：

實現自動匹配/排行榜
WebSocket通訊優化：在某些地方使用點對點通訊，而非全部使用廣播通訊。

我們可以使用convertAndSendToUser()方法，按照名字就可以判斷出來，convertAndSendToUser()方法能夠讓我們給特定用戶發送消息。

spring webscoket能識別帶”/user”的訂閱路徑並做出處理，例如，如果瀏覽器客戶端，訂閱了’/user/topic/greetings’這條路徑，

stompClient.subscribe('/user/topic/greetings', function(data) {
    //...
});

就會被spring websocket利用UserDestinationMessageHandler進行轉化成”/topic/greetings-usererbgz2rq”,”usererbgz2rq”中，user是關鍵字，erbgz2rq是sessionid，這樣子就把用戶和訂閱路徑唯一的匹配起來了