BS一機雙屏的解決方案
一.WebSocket通訊
WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通訊。
為保證socket不間斷,使用以下類庫進行socket通訊。https://github.com/joewalnes/reconnecting-websocket
1.初始化Socket
2.接收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) { } };
receiveSocketMessage = function (msg) {
var msgObj = JSON.parse(msg.data);
var type = msgObj.type;
var content = msgObj.content;
console.log(msgObj);
};
3.傳送Socket訊息
4.應用場景sendSocketMessage = function (msg) {//傳送訊息 if (ws) { ws.send(msg); } };
這種方式可以做多臺客戶端的同步、前臺與後臺的同步,比如第一臺客戶端編輯的內容實時同步到第二臺客戶端。這時候就可以用socket通訊。
但是一機雙屏用這種方式需要過多關注socket後臺的控制。所以採用第二種方式實現
二.localStorage
通過監聽localStorage的資料變化實現同一瀏覽器下不同頁面之間的通訊,比指令碼函式直接控制更加便捷。(跨域不適用,需要結合postmessage)
推薦lsbridge庫直接進行應用。https://github.com/krasimir/lsbridge
1.傳送訊息
lsbridge.send('my-namespace', { message:2.監聽訊息'Hello world!' });
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”關閉後重新開啟,結果還是不行,後來就用了下面的方法: 一般情況下這種操作都是可以解決的