排版好看一点的原文：http://www.jianshu.com/p/b9b6eec3ee9d
前面我们已经实现了一个大略的五指棋，但问题特殊多。这一篇，我们要办理的问题有
新增房间
前端给出一些提示，见告你所属的颜色，是否是你的回合
思考
首先，当用户连接的时候，我们须要取出他是哪一个房间？
我们须要一个类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 + \"大众你是白色\公众;
}
}
总结
我们已经大略实现了一个有房间的系统。代码。接下来我们会对前后的交互进行一个数据格式的优化，方便往后新功能的扩展。
