1. 程式人生 > >BS一機雙屏的解決方案

BS一機雙屏的解決方案

一.WebSocket通訊

WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通訊。

為保證socket不間斷,使用以下類庫進行socket通訊。https://github.com/joewalnes/reconnecting-websocket

1.初始化Socket

loadSocket = function () {
 try {
        if ("WebSocket" in window) {
            ws = new ReconnectingWebSocket(url, null, { debug: true, maxReconnectAttempts: 10 });
        }
        else if ("MozWebSocket" in window) {
            ws = new MozWebSocket(url);
        } else {
            // document.getElementById("message_output").innerHTML = "瀏覽器不支援WebSocket";
        }
        ws.onopen = function () 
            //document.getElementById("message_output").innerHTML = "連線伺服器成功" + "<br/>";
        }
        ws.onclose = function () {
            // document.getElementById("message_output").innerHTML = "與伺服器斷開連線" + "<br/>";
        }
        ws.onerror = function () {
            //document.getElementById("message_output").innerHTML = "通訊發生錯誤" + "<br/>";
        }
        ws.onmessage = function (msg) {//接收到訊息
            receiveSocketMessage(msg);
        }
    } catch (ex)
    { }
};
2.接收Socket訊息
receiveSocketMessage = function (msg) {
        var msgObj = JSON.parse(msg.data);
        var type = msgObj.type;
        var content = msgObj.content;
        console.log(msgObj);
};

3.傳送Socket訊息

sendSocketMessage = function (msg) {//傳送訊息
        if (ws) {
            ws.send(msg);
        }
};
4.應用場景

這種方式可以做多臺客戶端的同步、前臺與後臺的同步,比如第一臺客戶端編輯的內容實時同步到第二臺客戶端。這時候就可以用socket通訊。

但是一機雙屏用這種方式需要過多關注socket後臺的控制。所以採用第二種方式實現

二.localStorage

通過監聽localStorage的資料變化實現同一瀏覽器下不同頁面之間的通訊,比指令碼函式直接控制更加便捷。(跨域不適用,需要結合postmessage)

推薦lsbridge庫直接進行應用。https://github.com/krasimir/lsbridge

1.傳送訊息

lsbridge.send('my-namespace', { message:
'Hello world!' });
2.監聽訊息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); })
3.應用場景

比如同時開啟業務系統和地圖系統,定位地圖,繪圖內容返回到業務平臺等應用。

三.總結

兩種方式都是html5的技術應用,所以要注意相容性。在合適的場景選擇合適的技術。

相關推薦

BS解決方案

一.WebSocket通訊 WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通訊。 為保證socket不間斷,使用以下類庫進行socket通訊。https://github.com/joewalnes/reconnecting-w

Jquery 復選框全選與反選點擊執行次然後失效解決方案

jquery cli attr false jquer function class 作用 ear 在做項目時遇到一個bug,checkbox全選與反選功能,只能點擊一次,再點就不起作用了,為了解決此問題,我查找了好多資料,下面把具體解決方案整理分享給大家,需要的朋友可以

[轉載]Ubuntu 16.04 藍解決方案

server tps www. 命令行界面 png 但是 serve 解決 ubuntu16 結果:有用! ubuntu16.04開機藍屏解決方法,親測有用! 藍屏界面如下,相信大家是跟我一樣的 不要懵逼! 這個時候大家在鍵盤上按鍵:Ctrl + Alt + F4,

基於spring boot 獨立開發的套統一認證解決方案,易讀、易拓展

follow 公司 登錄頁面 跳轉 所有 不可 權限 github 源碼 公司需求搭建公司內部系統,需要使用到統一認證,在查看shiro等發現接入無頭緒,而且存在不可控性,對於認證系統高可用、可靠性會顯得無比重要,所以筆者決定手動擼一套統一認證解決方案。 筆者通過sprin

關於360外掛化框架Replugin豎修改為橫解決方案

預備工作 去GitHub搜尋replugin工程,下載replugin原始碼,解壓如下,游標選中的部分是我們要修改的地方。 1.1.20 為什麼要修改Gradle 因為Replugin原生的預設生成activity坑位都是豎屏的,而車機是橫屏的,導致外掛activity 實際效果與預期

popupwindow在android7.0出現全解決方案

在android7.0的版本測出popupwindow使用showAsDropDown方法之後,並不能顯示在指定view的下方,而是全屏顯示,只要重寫showAsDropDown判斷一下版本就好了.建議不要使用popupwindow了,使用DialogFragment代替 publi

Redis 中哨兵sentinel 機制、從宕及恢復、主庫宕及恢復解決方案

目錄 什麼是哨兵 原理 環境 設定哨兵 從宕機及恢復 主宕機及恢復 配置多個哨兵 1、什麼是哨兵 哨兵是對Redis的系統的執行情況的監控,它是一個獨立程序,功能有二個: 監控主資料庫和從資料庫是否執行正常; 主資料出現故障後

CentOS遠端連線黑解決方案

環境和工具: CentOS上使用VNCServer Windows上使用TigerVNCViewer   解決過程: [[email protected] ~]# init 3 [[email protected] ~]# service vncse

Filenet:ipfs網路激勵層種新的解決方案

人有不當好人的權利,可是如果別人想當好人,我們起碼不要去做洩氣的旁觀者。 ----考慮到Filecoin在當下的影響,中立的表達對新激勵層的看法   今年慢熊市,大家對挖礦都失去了信心,不過有兩樣東西是共識的熱點,一是EOS超級節點,另一個就是IPFS。 我們知道,第一批挖

小程式canvas使用網路圖片真不顯示解決方案----可直接使用案例測試

圖片都是線上的,可以直接放到onLoad裡邊自動檢測 1.注意點:  在繪製網路圖片時必需先將其儲存到本地然後在繪製。當我們在載入一個帶有圖片的頁面時,圖片都會被暫存到本地,由此我們可以通過wx.ge

pos異顯專案 --- 在密碼解鎖或設定密碼時,副不顯示或顯示張圖片

雙屏異顯專案 ,在密碼解鎖時,副屏也會同步顯示密碼,為了使用者的密碼安全,副屏解鎖時,副屏亮度調為0;(鎖屏介面getActivity()不能使用,暫時只能調節副屏亮度為0來解決) 另外,在設定中設定密碼時,副屏也會同步顯示設定的密碼,此時讓副屏顯示一張圖片。(這種方式比較簡單) 以

上海仰邦BX-5K1,BX-5K2系列板卡加入定時開關指令後宕現象及解決方案

  在9月份底需要給公司的環境監測裝置加入定時開關的功能,根據通訊協議,加入通訊協議後當時發現可以正常使用定時開關的功能,後來國慶放假就把裝置斷電了,等國慶回來後上電發現LED螢幕根本不亮,後來根據主機板發現與LED螢幕的驅動卡通訊失敗,後模擬程式後發現微控制器給驅動卡的所有指令都沒有迴應

vue 項目白解決方案

sset 運營商 assets 基礎 tsp pack path try 分析 在做的項目是使用 vue-cli 腳手架為基礎的,只能使用微信瀏覽器打開的。在某次更新功能代碼後,被反饋在一些手機上會出現白屏。經過一番探索,多管齊下解決了問題 白屏可能的原因: es6 代碼

Ubuntu16.04 開機藍解決方案

首先,開機時正常的,但是輸入密碼之後,出現卡屏,一會就變成藍屏。這個問題說系統是正常的,只是某些配置出現了問題,需要重置。 ## **方法:** Ctrl + Alt + F4,進入文字介面,然後輸入使用者名稱,再輸入登入密碼, 執行命令: sudo apt-get ins

串列埠解決方案:關於下載工程後字型不顯示的相關問題

關於在串列埠屏中出現下載工程後字型沒顯示出來的情況有兩種: 一是使用者建立新字型的時候,沒有建立相應的ASCII碼字型或者是這個字型編碼是否支援,這個體現為在虛擬屏和實體屏均沒有顯示; 二是客戶那邊生成的字型是正確的,在虛擬屏裡面可以正常顯示,但是在實體屏中卻顯示不出來。 3.1字型編碼有誤

android 啟動頁白解決方案

最近在做專案的時候,突然遇到啟動頁白屏不顯示的問題,首先想到的就是圖片大小,仔細檢視 果然,美工給了我一張超大的圖片,我也沒細看就替換上去了,汗! 好吧,既然發現了問題,果斷替換掉圖片,但是,特麼還是白屏(你特麼在逗我!),幾番百度,谷歌,得到如下解決方案:

微信中的下載連結掃掃無法開啟解決方案

信掃一掃遮蔽了APP下載連線無非是想讓大家將資源轉移到自家平臺,國人微信中毒過深,看到二維碼首先想到的一定是微信(好強大的使用者引導)。為了更好的使用者體驗,只能向騰訊屈服將應用轉移到騰訊平臺。當然如果是願意付錢當然有第三方的服務平臺直接上去可以(在這裡就不為某平臺打廣告了)。 首先要先上open.qq.co

Mybatis 只返回條資料的解決方案 之association、collection

:[StudentC{sid=14, sname='null', sage=null, saddress='null', classS=ClassS{id=345345345, className='二班', studentId=null, students=null}}, StudentC{sid=15,

Android中WebView顯示flash閃白解決方案

播放flash(.swf格式)檔案通常有兩種方式:SWF播放器,WebView,以下僅討論WebView播放flash的情況: 使用場景:需要對UI做定製,明顯,自己寫個flash播放器工作量太大,WebView輕巧多了。步驟如下: 1.安裝Adobe的flash外掛

AndroidStudio能run但是報堆紅的解決方案

  也許是今天的網路有點卡的原因吧,匯入的專案開啟裡面的程式碼都報紅了,但是還可以run,這也是第一次遇到,第一感覺就是網絡卡的原因,然後直接點選了studio右上角的紅色“X”關閉後重新開啟,結果還是不行,後來就用了下面的方法:   一般情況下這種操作都是可以解決的