摘要:用JQMDesigner 超簡單完成Push功能
Push技術能將資料即時傳送到各個裝置上，例如簡訊應用。不過由於推送必須靠後端Server幫忙，在實現上有些麻煩，不過最近JQMDesigner 新增這很方便的功能，提供超簡單! 能將資料即時推送到各個瀏覽器或行動裝置上。
推送示意圖
有多簡單呢？
進入JQMDesigner後，點選 JS 區塊，輸入push ，然後按下 『 Alt + / 』 ，工具就立即完成Push程式碼撰寫，
JQMDesigner 有提供Code Snippets 功能，直接輸入幾個字元後，按下 『 Alt + / 』就能挑選想要的Code Snippets，登登，程式碼就產生了.
這時候，什麼都不用改，只要按下 
真的有即時推送到各個裝置嗎? 讓我們打開很多個瀏覽器來實驗看看，就會發現每個瀏覽器都會彈出 push ok 的訊息
怎麼用呢?
先來說明一下工具產生的程式碼，先用JQuery載入modelPush.js這隻JavaScript，然後建立指定名稱的通道物件後，就可以經由 function(data) 取得推送的資料. 唯一要注意的是 'channelName' 要取個與眾不同的名字才行，因為channelName如果一樣，會收到其他人推送的訊息
至於怎麼將資料傳送出去呢？原來是透過 channel.push('push ok'); 就將資料送出去了。
|
$.getScript('http://ezoapp.github.io/sailsx2/assets/modelPush.js', function () { var channel; // refer to https://github.com/ezoapp/sailsx2 channel = new MyChannel('channelName', function (data) { alert(data); }); // push data channel.push('push ok'); }); |
了解程式碼後，發現這工具產生的程式碼，其實也可以直接使用在自己的網頁上，完全不需要工具就可以用這推送功能，太棒了對吧? 等等...剛不是說需要後端Server幫忙嗎? 那Server在哪裡? 我能使用自己的Server嗎？
再仔細看一下工具產生的程式碼，竟然把Server整個程式碼實作都放到Github上面了，太佛心了吧!?
https://github.com/ezoapp/sailsx2
開始用...
利用工具拉了照相機元件，然後添加了Push的程式碼，然後用手機拍照後，果然照片就被推送到電腦上，嗯嗯，的確很方便，分享給大家
範例程式碼
|
/*** code gen by capture-photo ***/ $(document).on("gkComponentsReady", function () { $("#gk-1113XyZO-btn").on("click", function () { if (navigator.camera) { navigator.camera.getPicture( // Called when a photo is successfully retrieved function (imgURI) { console.log('push',imgURI.length); channel.push(imgURI); }, // Called if something bad happens function (msg) { alert("Failed because: " + msg); }, // Camera options { quality: 50, destinationType: navigator.camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, encodingType: Camera.EncodingType.JPEG, saveToPhotoAlbum: false }); } }); }); var channel; // refer to https://github.com/ezoapp/sailsx2 $.getScript('http://ezoapp.github.io/sailsx2/assets/modelPush.js', function () { channel = new MyChannel('pushPhotokk', function (data) { console.log('coming...',data.length); $("#gk-1113XyZO-img").attr("src", "data:image/jpeg;base64,"+data); }); }); |