前言

前面我們已經(jīng)實現(xiàn)了一個簡單的五指棋，但問題特別多。這一篇，我們要解決的問題有

• 新增房間
• 前端給出一些提示，告訴你所屬的顏色，是否是你的回合

思考

首先，當(dāng)用戶連接的時候，我們需要取出他是哪一個房間？
我們需要一個類Room來表示房間，房間需要一個標(biāo)示RoomId。
房間里面可能有這么幾個動作？

1. 進(jìn)入房間（需要處理能否進(jìn)入？）
2. 廣播（進(jìn)入房間后，房間里每個人的動作只要跟這個房間里面的人說就行了）
3. 退出房間

前端的話我們需要用戶輸入一個id，并且在建立webSocket的時候，把id號帶過去。

實現(xiàn)

我們來看看前端的實現(xiàn)，我們需要在一開始彈出一個框，告訴用戶，輸入一個房間號。（雖然很挫，但是很容易實現(xiàn)）

Paste_Image.png

        var roomId = prompt("請輸入房間號", ""); //房間號
        host = document.location.host;
        host = "ws://" + host + "/chess?roomId=" + roomId;
        var webSocket = new WebSocket(host);

是不是很簡單呢？這樣子我們在簡歷鏈接的時候就會把后面的參數(shù)帶過去。
接下來我們來看看后端代碼的實現(xiàn)，首先，我們要獲取這個roomId。

        List<String> roomList = session.getRequestParameterMap().get("roomId");
        String roomId = roomList.get(0);

然后當(dāng)用戶發(fā)出connect信號時，我們需要判斷這個roomId是否存在，如果不存在，咱們就新建一個room。

if (roomMap.containsKey(roomId)){//已經(jīng)存在這個房間
    Room room = roomMap.get(roomId);
    if (room.enterRoom(session)){
        session.getUserProperties().put("roomId", roomId);
    }else{
        session.getBasicRemote().sendText("error");
    }
}else{//新建一個房間
    Room room = new ChessRoom(roomId, 2);
    room.enterRoom(session);
    roomMap.put(roomId, room);
    session.getUserProperties().put("roomId", roomId);
}

當(dāng)用戶下棋的時候，調(diào)用room的廣播方法。

String content = message.substring(5);
ChessAction chessAction = new Gson().fromJson(content, ChessAction.class);
chessAction.setCode("Chess");
Room room = roomMap.get(roomId);
room.broadcast(new Gson().toJson(chessAction));

至此，我們基本實現(xiàn)了一個簡單的房間了。接下來，我們需要在前端加一些提示語，提示你是什么顏色。像這種。

Paste_Image.png

代碼其實很簡單，只需要在開始和每次下棋的時候用js的innerHtml方法就行。

      function changeTip(){
        if (myTurn == true){
            document.getElementById("tips").innerHTML = "這是你的回合";
        }else{
            document.getElementById("tips").innerHTML = "等待對方下棋";
        }
    }

    function changeHead(){
        if (myTurn == false){
            document.getElementById("head").innerHTML = "你的房間號為" + roomId + "你是黑色";
        }else{
            document.getElementById("head").innerHTML = "你的房間號為" + roomId + "你是白色";
        }
    }

總結(jié)

我們已經(jīng)簡單實現(xiàn)了一個有房間的系統(tǒng)。代碼。接下來我們會對前后的交互進(jìn)行一個數(shù)據(jù)格式的優(yōu)化，方便以后新功能的擴(kuò)展。