介绍

既发起了离职流程,工作交接的闲暇时间,来闹点工作吧。博主的品位属于菜逼型,html,js,java勉强会写一点点,websocket也单独知道是只长连,如果您连是还无懂得。建议先活动补习一下。
接下来谈我们要举行啊事物吧,就是一个五指棋游戏,然后起只厅堂,可以去开房,然后就是得跟棋友啪啪啪下棋了。看起好像特别粗略,但我们要由更简便的开头吧。

正文
先是希望的对象我们是增多建筑一个webSocket的服务器,然后开一个简短的五指棋,然后连上的有数个人哪怕足以起来下棋啦。也非考虑各种bug啦。

后端代码
首先是增加建筑一个webSocket的服务器,网上广大都是spring+WebSocket的,不过不用spring框架为是ok的。
这边提供一个简单的demo吧。(请等自家及污染,哈哈哈)。点注解进去好发现有些可选的参数,反正我们现在为不用。

@ServerEndpoint("/websocket")
public class WebSocketTest {

    @OnMessage
    public void onMessage(String message, Session session) 
        throws IOException, InterruptedException {
        //收到客户端消息
        session.getBasicRemote().sendText("hello");
    }

    @OnOpen
    public void onOpen () {
        //有一个客户端链接
        System.out.println("Client connected");
    }

    @OnClose
    public void onClose () {
        //有一个客户端断开
        System.out.println("Connection closed");
    }
}

接下来用Tomcat启动。
这么一个webSocket的服务器即增加建筑了了,然后我们就算来落实五指棋的逻辑咯。后端的逻辑分为两有的,第一是等待连接(没少单人口下什么棋呢),第二步是客户端起下棋,进行播报。

第一片段

代码比较简单的,(因为并没有进展详细的筹划,所以前后相互的数码格式为是于扯淡的,后面会举行的可比好,暂时虽这样吧,以json的格式).数据封装成一个Action,然后传给前端。

    Set<Session> session_list =null;
    session_list =session.getOpenSessions();
    if (session_list.size() == 2){
       System.out.println("Ready Start Game");
        //first
        Session session1 = (Session)session_list.toArray()[0];
        StartAction startAction1 = new StartAction();
        startAction1.setDetail("Black");
        session1.getBasicRemote().sendText(new Gson().toJson(startAction1));

        //second
        Session session2 = (Session)session_list.toArray()[1];
        StartAction startAction2 = new StartAction();
        startAction2.setDetail("White");
        session2.getBasicRemote().sendText(new Gson().toJson(startAction2));
    }

次有些:第二有些之逻辑比较简单,接收及某某平等在下棋的通令,进行下棋,然后广播拥有的链接,跟她们说,这个人下了个棋啦。

  ChessAction chessAction = new Gson().fromJson(content, ChessAction.class);
  chessAction.setCode("Chess");
  for (Session each : session_list){
          each.getBasicRemote().sendText(new Gson().toJson(chessAction));
  }

这边要注意的凡,最老之本子我们是无以服务端保存棋盘的。所以是是必然问题之,后面还下手一自办了。

前端代码
前者代码是网上扒一个单机的本进行改造之,重点出口几部分吧。创建一个webSocket的链接

    host = document.location.host;
    host = "ws://" + host + "/chess";
    var webSocket = new WebSocket(host);

接受服务端消息

   webSocket.onmessage = function(event) {
          onMessage(event)
      };

   function onMessage(event){
       var action = JSON.parse(event.data);
       if (action.code == "Start"){
           startGame(action);
       }else if (action.code == "Chess"){
           recieveChessMsg(action);
       }
   }

发送信息

   function sendChessMsg(color, x, y){
          var chessAction = new Object();
          chessAction.color = color;
          chessAction.x = x;
          chessAction.y = y;
          var chessInfoStr = JSON.stringify(chessAction);
          webSocket.send("chess" + chessInfoStr);
   }

其它的画布呀,画一个五指棋出来呀的,大家网上扒一卧就实施,或者直接下充斥源码就ok了。

总结
第一期我们尽管简单地追加建筑了一个简便的在线五指棋。当然这中是一定多的题材,例如:没有房间呀,链接数超过3个人闹问题呀,下及一半刷新的题材呀,服务器并未校验操作,数据交互等等等。。。
没事,后面我们更持续。
第一意在的代码等下上次,里面来有代码因为是由别的地方扒的,没什么卵用,但也从没去,将就吧。

相关文章

网站地图xml地图