基于HTML5+WebSocket+JAVA的棋牌游戏开发，从入门到放弃（二）

我的简书地址

前言

前面我们已经实现了一个简单的五指棋，但问题特别多。这一篇，我们要解决的问题有
- 新增房间
- 前端给出一些提示，告诉你所属的颜色，是否是你的回合

思考

首先，当用户连接的时候，我们需要取出他是哪一个房间？
我们需要一个类Room来表示房间，房间需要一个标示RoomId。
房间里面可能有这么几个动作？
1. 进入房间（需要处理能否进入？）
2. 广播（进入房间后，房间里每个人的动作只要跟这个房间里面的人说就行了）
3. 退出房间

前端的话我们需要用户输入一个id，并且在建立webSocket的时候，把id号带过去。

实现

我们来看看前端的实现，我们需要在一开始弹出一个框，告诉用户，输入一个房间号。（虽然很挫，但是很容易实现）

        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));

至此，我们基本实现了一个简单的房间了。接下来，我们需要在前端加一些提示语，提示你是什么颜色。像这种。

代码其实很简单，只需要在开始和每次下棋的时候用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 + "你是白色";        }    }

总结

我们已经简单实现了一个有房间的系统。代码。接下来我们会对前后的交互进行一个数据格式的优化，方便以后新功能的扩展。