專案概述

Java課大作業，做一個小遊戲，三人Git協作，不同終端，一個分支三個資料夾互不影響。Demo地址 ，Github地址。先來目睹一下吧！

原理圖

當玩家1在使用畫筆在畫板上進行繪圖工作時，把當前這個玩家的繪圖的資料傳遞到伺服器，然後由伺服器把該資料廣播到其他玩家，其他玩家的畫筆將根據這些資料自動在畫板上進行繪製。因為是多端

Socket伺服器端(資料互動)

伺服器地址：
http://119.28.67.19:3007/或者http://game.ycjcl.cc，採用了騰訊雲的CentOS 7伺服器(香港區2核 2GB配置)，通過Nginx轉發到Nodejs的Socket.io上，進行Websocket通訊。

服務端關鍵程式碼：

// socket監聽的事件
io.on('connection', function(socket) {
    /**
     * 畫者事件 drawPath
     * 傳入JSON：data
     * 例：
     *  {
            beginX: 68
            beginY: 182
            colorValue: "red"
            deviceHeight: 400
            deviceWidth: 500
            endX: 74
            endY: 181
            lineValue: 3
     *  }
     */
 

    socket.on('drawPath', function(data) {
        /**
         * 廣播事件 showPath
         * 將畫者事件接收的data資料，向連線到socket伺服器的客戶端(猜者)進行廣播
         * 例：
         * socket.on('showPath', (data)=>{
                // 自定義畫的方法
                this.drawing({json});
            });
         * 
         */
        socket.broadcast.emit('showPath'
 
, data);
    });



    // 監聽客戶端的socket.send(message)方法
    socket.on('message', function(message){
        // 畫者生成一個隨機的關鍵字
        if(message == 'getKeyWord'){
            INDEX = Math.floor(Math.random() * keyword.length);
            KEYWORD = keyword[INDEX];
            // 將生成的關鍵字傳送到畫者的客戶端
            socket.emit('keyword', KEYWORD);

        // 畫者清空畫布 socket.send('clear')    
        }else if(message == 'clear'){
            // 猜者端清空畫布
            console.log('進來了');
            socket.broadcast.emit('showBoardClearArea');
            // socket.emit('showBoardClearArea');
        }else if(message == 'success'){
            // 猜對後，清空畫布，更換詞
            io.sockets.emit('successClearArea');
        }
    }); 

    /**
     * 猜者提交 submit
     * 傳入str: keyword
     * 
     * this.state.socket.emit('submit', keyword)}
     */
    socket.on('submit', function(keyword) {
        // 標誌位
        var bingo = 0;
        // 提示
        var tip = '';
        // 如果
        console.log(keyword);
        if(keyword && KEYWORD){
            if (KEYWORD.toLocaleLowerCase() == keyword.toLocaleLowerCase()) {
                console.log('進來了2');
                bingo = 1;
            }else{
                tip = tips[INDEX];
            }
        }else{
            bingo = -1;
        }
        console.log(bingo);
        console.log(tip);

        // 將flag標誌位傳到連線的客戶端
        socket.emit('answer', {
            bingo:bingo,
            tip:tip
        });
    });
    socket.on('disconnect', function() {});
});

傳入資料：
因為是多端存在裝置大小差異，經過討論，根據比例進行計算，所以傳入資料中有deviceHeight和deviceWidth。

{
  "beginX":114,   // 起點座標(int) X
  "beginY":143,      // 起點座標(int) Y
  "colorValue":"red",  // 線的顏色(str)  (#FFA500，orange，rgb(255, 165, 0))
  "deviceHeight":400,  // 裝置高度(int)  
  "deviceWidth":500,   // 裝置寬度(int)  
  "endX":122,          // 終止座標(int) X
  "endY":149,           // 終止座標(int) Y
  "lineValue":3           // 線的寬度(int)
}

效果圖

Web端

PC端

安卓

總結

通過騰訊雲的Socket伺服器代理各種socket請求，延遲時間較短，基本能達到本地localhost的同步速度，不同端之間的互動也能處理得當。開發過程中也遇到了很多問題，比如另外就Socket伺服器框架沒有達成共識，PC 端說socket自己用java寫到本地了（這樣Web和Android就用不了了），然後又我提出用NodeJS的socket.io去統一寫。Web端我用React+Webpack就連起來了，其它端有相應的SDK。伺服器解決後，然後各個端開始歡快地寫起來了。

最後在跨端互動時，也遇到了不少的問題（裝置的比例，需要傳入的值），然後就開始規定介面格式，每個引數的資料結構和型別、事例。

之後，傳到 Github 時也遇到了一些問題，由於其它人對Git的熟悉程度不一樣，所以 push 是我在他們電腦給push和pull上去的。經過此次開發，鍛鍊的團隊協助能力以及對新框架的學習能力。

---------------------------------------------------
獲取更多雲計算技術乾貨，可請前往 騰訊雲技術社群
微信公眾號：騰訊雲技術社群（ QcloudCommunity）