HTML5技術教程：跨屏互動應用

mugeda動畫平臺還能夠用來製做跨屏互動的動畫應用，好比在PC端的大屏幕上顯示動畫的主界面，同時會顯示出供手機掃描的二維碼，手機掃描後會在手機上顯示手機端動畫界面。經過手機就能夠和PC端的顯示界面跨屏互動操做。這種動畫應用在相似一些商場搞活動，或者戶外宣傳等常見可使用。能夠製做一對一玩的跨屏互動應用，也能夠製做一對多玩（多個玩家同時玩）的跨屏互動應用。爲了更好的理解跨屏互動應用的使用，本文檔將經過一個簡單的例子來演示跨屏動畫的製做過程。

1、製做動畫

    1.PC端動畫製做

    a.在PC端，設置舞臺尺寸爲寬700、高480

    b.在舞臺中放在一個文字對象，並命名爲info（用於顯示鏈接及通信信息）

    c.在舞臺中放在一個二維碼的圖片。（該二維碼會在運行時被用真實的客戶端鏈接的二維碼替換）。給該圖片命名qrc。

如圖：

2.移動端動畫製做

    a.設置舞臺尺寸爲寬320、高416

    b.在舞臺中放一個用圓角矩形和文字組成的按鈕，文字內容爲connectPC。爲該按鈕設置動做爲回調函數，觸發方式：單擊，函數名字：connectPC

如圖：

    c.用同步驟b相同的方式，再建立兩個按鈕，文字分別爲sayHello、sayOK，函數名字分別爲sayHello、sayOK。

最後舞臺如圖：

3.導入腳本

    a.PC端，點擊菜單欄的文件-》導入-》腳本。在彈出的導入腳本對話框中，勾選jquery.js、socketio.js、jquery.qrcode.js。點擊肯定。

如圖：

    b.用一樣的方式在移動端導入socketio.js

導入文件說明：

    跨屏動畫通信用到的Mugeda.Socket對象是基於socket.io封裝的，因此PC端和移動端都須要導入socketio.js文件。PC端須要在遊戲開始時動態更換二維碼圖片，因此須要導入與二維碼相關的庫文件jquery.js、jquery.qrcode.js

2、編寫代碼

    用到的主要對象說明：

    Mugeda.Socket對象，用於維護存鏈接相關數據和操做。

    Mugeda.Socket.Client對象，用於維護存匿名認證客戶的信息和操做。

    實現通信的主要步驟：

    1.PC端先向服務器發起鏈接請求，產生鏈接

    2.而後PC端經過偵聽authorization事件獲取到非認證用戶（即客戶端）帶request和token的地址，進而經過replaceQrcode將動畫中的圖片對象替換爲二維碼。

    3.玩家經過手機等移動設備掃描二維碼，在本身的設備中打開客戶端，

    4.客戶端向服務器發起鏈接請求，併產生鏈接

    5.客戶端與PC端通信

鏈接服務器

    經過實例化Mugeda.Socket對象，產生鏈接。Mugeda.Socket類的構造函數爲：

Mugeda.Socket(request, token, isRegisteredUser, guestURL, server, port)

其中：

    request：{string}請求字符串

    token：{string}令牌

    isRegisteredUser：{bool，缺省false}是否爲認證客戶。

    server：{string，缺省爲SERVER_URL常量} 服務器地址

    port：{string，缺省爲SERVER_PORT常量}服務器端口

    1. 認證用戶的實例化：認證用戶擁有request、token以及非認證客戶的遊戲地址url，使用如下方式實例化Mugeda.Socket

    var a = new Mugeda.Socket(request, token, true, url)

    2. 匿名用戶的實例化：匿名用戶一般來自二維碼的掃描，網頁地址中包含request和token，可經過如下方式直接從地址中獲取

    var a = new Mugeda.Socket()

    a.getReqestAndTokenFromUrl()

    實例化Mugeda.socket對象後，認證用戶和匿名用戶都使用如下形式的方式鏈接服務器。

    a.connect(function(err){})

    在回調函數中，查看err字符串，若是爲空，說明鏈接成功，不然，多是token不對。

    認證用戶（即PC端）獲取匿名用戶（即客戶端）隊列

    認證用戶經過a.clients獲取匿名用戶數組，最先鏈接的用戶在隊列前面。數組的每個元素都爲Mugeda.Socket.Client實例。

    偵聽cliententer和clientleave事件，這兩個事件在匿名用戶鏈接和斷開時刻發生。

a.addEventListener('cliententer', function(client){

})

a.addEventListener('clientleave', function(client){

})

認證用戶對匿名用戶的操做

1. 發送消息

對Client實例發送消息：

client.send(event, data, callback)

其中：

event{stirng}，自定義事件名

data{string、number、object、null}發送的數據，其中number和string在發送前會被轉化爲{data: string}或{data.number}的形式。

callback{function}，對須要匿名用戶當即回覆的情形，callback函數會傳遞到匿名客戶，由匿名客戶直接調用。

對全體Client發送消息

a.sendAll(event, data)

參數含義同上。

2. 檢測Client是否有迴應

client.checkAvailable(callback, timeout)

其中：

callback{function}回調

timeout{number，缺省10}超時秒數

    檢測非認證用戶是否有迴應，如有，callback回調，回調函數的第一個參數爲true；不然，timeout後，callback回調，回調函數的第一個參數爲false。

3. 不斷檢測Client的存在性

client.checkAvailableContinuously(callback, interval, timeout)

    匿名用戶將每隔interval秒（缺省5秒）向認證用戶發送一個心跳包，當timeout（缺省20秒）後，callback回調且第一個參數爲false。

4. 獲得Client實例在a.clients數組中的Index

a.getClientIndexByUserId(client.user)

匿名用戶的操做

1. 發送消息

a.send(event, data, callback)

參數含義同上。

2. 檢測與服務器的鏈接訊速度

a.benchmark(callback, times, timeout)

匿名用戶屢次向服務器發送數據，服務器收到後返回數據，測試數據來回所用時間/2。

其中：

callback{function}回調函數，格式爲function(averageTime, timeArray)，其中timeArray記錄了每一次的時間，averageTime爲平均時間，單位均爲ms。

times{number，缺省爲3}測試的次數。

timeout{number，缺省2000}超時的時間，單位ms。

其餘事件

1. 認證何用戶消息偵聽

a.addEventListener('message', function(client, event, data, callback){

    console.log(event, data)

})

偵聽匿名用戶經過a.send發送的消息。client爲發送消息的用戶的Client對象，其他參數同上。

2. 匿名用戶消息偵聽

a.addEventListener('message', function(event, data, callback){

    console.log(event, data)

})

形式與上面相似，可是回調少了client參數。

3. 匿名用戶偵聽PC斷開事件

a.addEventListener(‘disconnected’, function(){

})

1.PC端代碼

a.定義SocketComm對象

var mugeda=Mugeda.getMugedaObject();

var scene = null;

var info = null;

var isConnect = false;

var SocketComm = function(){//定義SocketComm對象

   this.socket = null;

   this.scene = null;

   this.connected = null;

   this.name = (new Date()).getTime();

   var _=this;

   this.setup = function(callback, scene){

       connect = new Mugeda.Socket('dejipuzzle','d2f7335a19ecc3ed2a0cbe66580fdd05', true,

       'https://cn.mugeda.com/client/preview_css3.html?id=d20c8a20');//經過實例化Mugeda.Socket類，產生鏈接

       this.scene = scene;

       connect.connect(function(err){//認證用戶(PC端)鏈接服務器

           if(err){

               Mugeda.log(err);

           }

           else{

               _.connected = true

               callback({

                   event: 'connect'

               })

           }

       })

       connect.addEventListener('authorization',function(){//認證用戶(PC端)偵聽authorization事件

           var replaceQrcode = function(imgObj, url) {//將動畫中的圖片對象替換爲二維碼

               var cvs, height, width;

               var holder = document.createElement('div');

               holder.width = imgObj.width;

               holder.height = imgObj.height;

               if (url) {

                   $(holder).empty().qrcode({

                       text: url,

                       ecLevel: 'L'

                   });

                   width = imgObj.width;

                   height = imgObj.height;

                   $(imgObj.dom).css('background-image', 'none');

                   $(imgObj.dom).css('background-color', 'white');

                   $(imgObj.dom).css('padding', '4px');

                   cvs = $(holder).find('canvas');

                   cvs.css('margin', '2px');

                   cvs.css('width', (width - 4) + 'px');

                   cvs.css('height', (height - 4) + 'px');

                   imgObj.dom.src = cvs[0].toDataURL();

               }

           };

           var qrc = scene.getObjectByName('qrc');//獲取舞臺中原來的二維碼圖片對象

           replaceQrcode(qrc, this.clientURL);//經過this.clientURL獲取非認證用戶帶request和token的地址，並替換二維碼

           console.log(this.clientURL);

       })

       connect.addEventListener('cliententer', function(client){//偵聽cliententer在匿名用戶鏈接時觸發。

           info.text = ("用戶接入成功。");

            console.log(client);

       })

       connect.addEventListener('clientleave', function(client){//偵聽clientleave事件，在匿名用戶斷開時觸發。

           info.text = ("用戶離開。");

            console.log(client);

       })

       connect.addEventListener('disconnect', function () {//偵聽disconnect事件

           callback({

               'event':'disconnect'

           });

           _.connected = false;

           isConnect = false;

       });

       connect.addEventListener('message', function(client, event, data){

           //偵聽匿名用戶經過a.send發送的消息。並調用在setup的回調函數中處理

           callback({

               'event':event,

               'client':client,

               'data':data

           });

       })

   };

}

b.在renderReady監聽回調中調用SocketComm實例的setup方法

var cross = new SocketComm();//實例化SocketComm對象

mugeda.addEventListener("renderReady", function () {

   scene = mugeda.scene;

   info = scene.getObjectByName('info');//獲取info對象，顯示鏈接狀態和移動端發來的消息

   var processMessage = function(msg){//setup處理消息的回調函數

       if(!mugeda || !scene)

           return;

       msg = msg || {};

       if(msg.event == "connect"){

           info.text = ("鏈接成功。等待用戶接入。");

       }

       else if(msg.event == "disconnect"){

           info.text = ("鏈接斷開");

       }

       else if(msg.event == "update"){

           console.log(msg.data);

       }

       else if(msg.event == 'mobilemessage') {//處理匿名用戶（客戶端）發來的消息

           var data = msg.data;

           info.text = data;

       }

   }

   cross.setup(processMessage, scene);//調用SocketComm實例的setup方法

});

2.移動端代碼

var mugeda=Mugeda.getMugedaObject();

mugeda.addEventListener("renderReady", function () {

   scene = mugeda.scene;

   var hello = scene.getObjectByName('hello');//獲取sayHello按鈕對象

   var ok = scene.getObjectByName('ok');//獲取sayOK按鈕對象

   var connectButton = scene.getObjectByName('connect');//獲取connectPC按鈕對象

   hello.left = -700;//sayHello按鈕移到舞臺外

   ok.left = -700;//sayOK按鈕移到舞臺外

   var socket = new Mugeda.Socket();//實例化Mugeda.Socket對象

   socket.getReqestAndTokenFromUrl();//獲取request和token

   socket.addEventListener('authorization', function(){//偵聽authorization事件

       console.log(this.clientURL);

   });

   socket.addEventListener('message', function(event, data, callback){//偵聽PC端經過send發送的消息

       console.log(event, data);

       processMessage(event,data, callback);

   })

   socket.addEventListener('disconneted', function(){//匿名用戶(移動端)偵聽PC斷開事件

       console.log('disconneted');

       error.text = "鏈接失敗，請從新刷二維碼";

       scene.gotoAndPause(errorFrame);

   })

   window.connectPC = function(){//connectPC按鈕的回調函數

       socket.connect(function(err){//回調中，查看err字符串，爲空，說明鏈接成功。

if(err){

console.log(err);

if(err.indexOf && err.indexOf('handshake')>=0){

   console.log("無效的二維碼。請從新刷二維碼。")

}

}

else{

console.log('connect OK');

connectButton.left = -700;//connectPC按鈕移到舞臺外

hello.left = 76;//sayHello按鈕移到舞臺內

               ok.left = 76;//sayOK按鈕移到舞臺內

}

});//匿名用戶（移動端）鏈接服務器

   };

   window.sayHello = function(){//sayHello按鈕的回調函數

       socket.send('mobilemessage', "Hello,World!");//向PC端發送消息

   };

   window.sayOK = function(){//sayOK按鈕的回調函數

       socket.send('mobilemessage', "I'm OK!");//向PC端發送消息

   };

});

2、運行程序

    先運行PC端程序，用移動設備掃描PC端的二維碼來運行移動端。

    移動端點擊connectPC按鈕鏈接服務器。

    點擊sayHello和sayOK按鈕，能夠在PC端看到交互結果。

實例預覽：

https://cn.mugeda.com/client/preview_css3.html?id=d8297427

    總結，該例子只是用了最簡單的示例來演示怎麼創建一個最簡單（Hello World）的跨屏互動應用。具體到商業級的產品的確定還須要根據具體的產品需求製做更加豐富的動畫內容。後面章節中會有一些案例分析，其中有一篇是是一款跨屏動畫的案例分析。敬請期待後續更多文章推出。感受好的請幫忙點贊^_^