WebSocket實現多屏互動的分析及方案

jopen 8年前發布 | 44K 次閱讀 WebSocket 產品運營電子游戲 WebSocket 開發

多屏互動事實上是一個比較寬泛的概念，通俗來講就是用戶在不同的終端上通過有線、無線的連接方式進行通信，可進行多媒體（音頻，視頻，圖片）內容的傳輸，解析，展示，控制等一系列操作。而隨著WebSocket協議的誕生，不同端之間的網頁互連也變得流行起來，這種基于WebSocket協議實現多屏互動在運營活動上的使用也使得運營頁面的形式也變得更加多樣和有趣。

本文不會去探討WebSocket協議的詳情，想了解的可以點擊 https://tools.ietf.org/html/rfc6455 查看協議文檔。

在了解Websocket技術的基礎上，本文通過動手實踐一個多屏互動的小游戲來介紹整個流程的分析和探討在哪些環節進行運營擴展。

目前業界對于該技術運用已經有很多成熟的案例，這些案例呈現的效果無一不是狂拽酷炫。先看看下面的一個案例。

http://stage.moneplus.cn/ice/

上面的案例是動壹科技開發的“多屏互動之冰川時代”互動小游戲，該活動在數據通信上采用了WebSocket。手機掃描跟PC端網頁連接以后，監聽手機的陀螺儀并將該動作擬物化反饋到PC網頁上，主要是用手機來模擬水杯的傾倒動作，然后冰塊從頁面頂部掉落，整個操作非常流暢并且效果也很贊。

另外，互娛的同學使用WebSocket也開發了一個比較贊的活動運營頁：營救孫悟空。

http://zt.qq.com/act/hdz/index.htm

用戶通過掃描二維碼跟PC網頁連接，通過監聽用戶在手機上的“點擊”、“滑動”等交互事件，來渲染PC網頁上的內容，讓用戶大呼過癮。

類似使用多屏互動方式來做運營的還有很多，就不一一列舉，那我們將這些運營活動進行總結，發現他們都是共通的，使用端對端雙工通信技術并基于這個基礎去玩一些運營花樣，吸引用戶以達到品牌宣傳、活動推廣的目的。

既然多屏互動給我們的運營帶來如此多的驚喜，下面就詳細看看如何來實現多屏互動并且較快地應用到實踐中。

場景抽象

擬定一個的游戲閉環場景：首先有若干玩家，然后有為玩家們劃定的特殊區域（暫且稱之為房間），玩家們在房間里面按照特定的游戲規則進行游戲。如下圖所示，N個玩家通過長連接的技術接入到房間中，游戲過程中房間會即時公示游戲進度及相關信息，游戲過程中、結束后會由房間向每一位玩家廣播消息反饋游戲相關數據。

通過對上述場景的認知，具象到端（PC端、手機端）上的話就得提供2種類型的多個端。一種類型的端用來落地“房間”，這種類型的“端”需要承載黑板（設計模式的一種）的角色，在該類型的端上要呈現公告類信息，比如“房間”二維碼、玩家狀態、游戲結果、游戲規則等，通常是PC、TV等大屏幕且展示性較好的設備。另一種類型的端用來落地”玩家“，它們主要是接受”玩家“的交互信息，將這些交互行為映射成游戲數據發送給”房間”，然后在端上呈現提供給“玩家”的一些信息如操作提示、結果提示等，通常是手機、智能watch等設備。

數據結構確定

針對上面的場景閉環需要設計對應的數據結構來進行抽象，分別為用戶（User）類、房間（Room）類。

1、玩家的屬性抽象如下：

對應user.js的代碼

function User(param){
    //用戶名
    this.Name = param.Name || '';
    //用戶連接的狀態
    /*
        0 : 用戶未連接
        1 : 用戶已連接
    */
    this.Status = param.Status || 0;
    //用戶昵稱
    this.Nick = param.Nick || '匿名';
}
exports.create = function(param){
    //返回一個用戶的示例
    return new User(param);
};

2、房間的屬性抽象如下：

room.js文件內容

function Room(param){
    //房間相關的參數
    var defaults = {
        //房間最大人數
        count : 2
    };

    //將傳遞過來的參數進行合并
    for(var p in param){
        if(param.p){
            defaults.p = param.p;
        }
    }

    //房間的id
    this.RoomID = param.RoomID || '';
    //房間的成員列表
    this.Users = [];
    //房間最大成員數
    this.Max = defaults.count;
}
Room.prototype = {
    addUser : function(user){
        var _this = this;
        if(_this.Users.length >= _this.Max){
            //房間已經滿員，直接返回
            return 0;
        }else{
            //添加用戶，返回當前用戶數目
            _this.Users.push(user);
            return _this.Users.length;
        }
    },
    removeUser : function(user){
        var _this = this;
        var _users = _this.Users;
        var _count = _users.length;
        for(var i = 0;i < _count;i++){
            if(_users[i].Name === user.Name){
                _users.splice(i,1);
                return;
            }
        }
    }
};
exports.createRoom = function(param){
    return new Room(param);
};

數據結構設計完成以后，需要考慮系統的構建了，下面給一個簡單的系統時序圖