前言
前面我们已经实现了一个简单的五指棋，但问题特别多。这一篇，我们要解决的问题有
- 新增房间
- 前端给出一些提示，告诉你所属的颜色，是否是你的回合
思考
首先，当用户连接的时候，我们需要取出他是哪一个房间？
我们需要一个类Room来表示房间，房间需要一个标示RoomId。
房间里面可能有这么几个动作？
- 进入房间（需要处理能否进入？）
- 广播（进入房间后，房间里每个人的动作只要跟这个房间里面的人说就行了）
- 退出房间
前端的话我们需要用户输入一个id，并且在建立webSocket的时候，把id号带过去。
实现
我们来看看前端的实现，我们需要在一开始弹出一个框，告诉用户，输入一个房间号。（虽然很挫，但是很容易实现）
Paste_Image.png
var roomId = prompt("请输入房间号", ""); //房间号
host = document.location.host;
host = "ws://" + host + "/chess?roomId=" + roomId;
var webSocket = new WebSocket(host);
是不是很简单呢？这样子我们在简历链接的时候就会把后面的参数带过去。
接下来我们来看看后端代码的实现，首先，我们要获取这个roomId。
List<String> roomList = session.getRequestParameterMap().get("roomId");
String roomId = roomList.get(0);
然后当用户发出connect信号时，我们需要判断这个roomId是否存在，如果不存在，咱们就新建一个room。
if (roomMap.containsKey(roomId)){//已经存在这个房间
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);
}
当用户下棋的时候，调用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));
至此，我们基本实现了一个简单的房间了。接下来，我们需要在前端加一些提示语，提示你是什么颜色。像这种。
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 + "你是白色";
}
}
总结
我们已经简单实现了一个有房间的系统。代码。接下来我们会对前后的交互进行一个数据格式的优化，方便以后新功能的扩展。
