<轉載>騰訊雲搭建多終端《你畫我猜》Socket服務器

結合一個小demo，咱們分享瞭如何用騰訊雲的Socket服務器代理各類socket請求，實現低延遲，和不一樣端之間的交互。
做者：金朝麟

出處：騰雲閣文章

項目概述

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

原理圖

當玩家1在使用畫筆在畫板上進行繪圖工做時，把當前這個玩家的繪圖的數據傳遞到服務器，而後由服務器把該數據廣播到其餘玩家，其餘玩家的畫筆將根據這些數據自動在畫板上進行繪製。由於是多端，因此得采用統一的Socket通訊構架，通過協商，使用socket.io框架，客戶端就能夠統一socket.io-Java、socket.io-Android

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）