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

發表於2016-01-20

原文網址 : http://design.jobbole.com/116047/

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

本文不會去探討WebSocket協議的詳情，想了解的可以點選https://tools.ietf.org/html/rfc6455檢視協議文件。

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

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

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

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

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

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

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

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

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

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

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

場景抽象

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

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

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

資料結構確定

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

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

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

對應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);
};

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、房間的屬性抽象如下：

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

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