前端之大屏

前端開發_大屏技術

——李鄭雄 2018-04-26

一、開發流程概述：

主要流程包含如下步驟：需求調研，場景佈局， UI設計， DEMO確認，場景切圖，場景開發，測試部署，上線演示，迭代調整，數據同步及接入，正式上線。

二、 requireJS框架： requireJS使用教程連接

require是一個輕量級框架，用於模塊化的設計網頁中的各組成部分而後再將這些模塊組合在一塊兒。各模塊間相對獨立、互不影響。

require.js使用了不一樣於傳統<script>標籤的腳本加載步驟，其主要目的是爲了代碼的模塊化，用於顯示頁面數據。它以一個相對於baseUrl的地址來加載全部的代碼，頁面頂層<script>標籤含有一個特殊的屬性data-main， require.js使用它來啓動腳本加載過程，而baseUrl通常設置到與該屬性相一致的目錄。

三、Echarts框架(網頁視圖技術)： 

Echarts官方API：http://echarts.baidu.com/index.html

Echarts是一個使用JavaScript實現的開源可視化庫,能夠流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。遵循原則：交互是從數據中發掘信息的重要手段，「總覽爲先，縮放過濾按需查看細節」是數據可視化交互的基本需求。

四、webSocket技術(來自於網絡)：

1)、web socket基本概念：

Web socket是Web領域的一種實時推送技術也被稱做Realtime技術,這種技術要達到的目的是讓用戶不須要刷新瀏覽器就能夠得到實時更新。其本質上是一個基於TCP的協議，協議經過第一個request創建了TCP鏈接以後，以後都不須要再發送 HTTP header就能交換數據。websocket協議是一種名爲"ws"的全新的協議(不屬於http無狀態協議)，所以websocket鏈接地址一般是這樣的寫法：ws://**。

2)、js中的web sockets: 

爲了實如今單獨的持久鏈接上提供全雙工、雙向通訊的功能，HTML5中增長了鏈接API-WebSockets。在js中建立了WebSocket以後，會有一個HTTP請求發送到瀏覽器以發起鏈接。在取得服務器響應後，創建的鏈接會使用HTTP升級，從HTTP協議轉變爲web socket協議。具體的過程以下：

a）客戶端經過發送HTTP請求執行雙方握手過程，發送的數據報文格式以下:

************************************************************************

GET /chat HTTP/1.1

Host: server.example.com

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

Sec-WebSocket-Protocol: chat, superchat

Sec-WebSocket-Version: 13

Origin: http://example.com

************************************************************************

Upgrade：websocket參數值代表這是WebSocket類型的請求，

Sec-WebSocket-Key是WebSocket客戶端發送的一個 base64編碼的密文，要求服務端必須返回一個對應加密的

Sec-WebSocket-Accept應答，不然客戶端會拋出Error during

WebSocket handshake錯誤，並關閉鏈接。

b）服務器端處理完請求以後生成響應報文返回給web端,表示已成功創建了Websocket鏈接：

************************************************************************

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

Sec-WebSocket-Protocol: chat

************************************************************************

參數Sec-WebSocket-Accept是通過服務器確認而且加密事後的Sec-WebSocket-Key，Sec-WebSocket-Protocol則表示最終使用的協議。能夠查閱WebSocket協議棧瞭解WebSocket客戶端和服務端更詳細的交互數據格式。

3)、web sockets API:

要建立Web Socket，先實例化一個webSocke對象並傳入URL，瀏覽器解析和識別後，就會經過HTTP請求 建立該URL所指向的鏈接：

************************************************************************

var socket= new WebSocket('ws:www.example.com/server.php');

************************************************************************

在這裏必須給WebSocket傳入絕對URL，同源策略對Web Sockets不適用，所以能夠經過它打開任何站點的鏈接。

WebSocket是個協議歸屬於IETF, WebSocket API 是一個Web API，歸屬於W3C, 兩個規範是獨立發佈的。 廣義上的HTML5裏面包含的是WebSocket API，並非WebSocket。簡單的說能夠把 WebSocket當成 HTTP，WebSocket API 當成 Ajax。

WebSocke有一個表示當前狀態的readyState屬性：

WebSocket.OPENING(0)：正在建立鏈接

WebSocket.OPEN(1)：已經創建鏈接

WebSocket.CLOSING(2)：正在關閉鏈接

WebSocket.CLOSING(3)：已經關閉鏈接

readyState的值永遠從0開始。 要關閉socket鏈接，能夠在任什麼時候候調用close()方法：socket.close();

 

4)、發送和接收數據:  Web Socket打開以後，就能夠經過鏈接發送和接收數據。要向服務器發送數據，使用send()方法，並傳入任意字符串。下: 

************************************************************************

var socket = new WebSocket('ws:www.example.com/server.php');

socket.send('hello world'); 

************************************************************************

在這裏須要注意：由於WebSockets只能經過鏈接發送純文本數據，因此對於複雜的數據結構，在經過鏈接發送以前，必須進行序列化。 當服務器向客戶端發來消息時，WebSocket對象就會觸發message事件。這個message事件與其餘傳遞消息的協議相似，也是把返回的數據保存在event.data屬性中：

************************************************************************

socket.onmessage = function(e){ var data = e.data; 。。。。。。 }；

************************************************************************

值得一提的是data的數據格式也是字符串，若是想獲得其餘格式的數據，必須手工解析這些數據。

5)、其餘事件:WebSocket對象還有在鏈接聲明週期的不一樣階段觸發的其餘三個事件：

open：在成功創建鏈接時觸發

error： 在發生錯誤時觸發，鏈接不能持續

close：在鏈接關閉時觸發

WebSocket對象不支持DOM2級事件偵聽器，所以必須使用DOM0級語法分別定義每一個事件處理程序。在這三個事件中，只有close事件的event對象有額外的信息。這個事件的事件對象有三個額外的屬性:wasClean、code和reason。其中wasClean是一個布爾值，表示鏈接是否已經明確的關閉；code是服務器返回的數值狀態碼；而reason是一個字符串，包含服務器發回的信息。能夠將這些信息顯示給用戶。

************************************************************************

socket.onclose = function(event){

console.log(‘wasclean?+event.wasClean+’,code=’+event.code+’reason=’+event.reason);

}

************************************************************************

6)、創建鏈接的握手：

當Web應用程序調用new WebSocket(url)接口時，Browser就開始了與地址爲url的WebServer創建握手鍊接的過程：

a). Browser與WebSocket服務器經過TCP三次握手創建鏈接，若是這個創建鏈接失敗，那麼後面的過程就不會執行，Web應用程序將收到錯誤消息通知。

b). 在TCP創建鏈接成功後，Browser/UA經過http協議傳送WebSocket支持的版本號，協議的字版本號，原始地址，主機地址等等一些列字段給服務器端。

c). WebSocket服務器收到Browser/UA發送來的握手請求後，若是數據包數據和格式正確，客戶端和服務器端的協議版本號匹配等等，就接受本次握手鍊接，並給出相應的數據回覆，一樣回覆的數據包也是採用http協議傳輸。

d). Browser收到服務器回覆的數據包後，若是數據包內容、格式都沒有問題的話，就表示本次鏈接成功，觸發onopen消息，此時Web開發者就能夠在此時經過send接口想服務器發送數據。不然，握手鍊接失敗，Web應用程序會收到onerror消息，而且能知道鏈接失敗的緣由。

這個握手很像HTTP，可是實際上卻不是，它容許服務器以HTTP的方式解釋一部分handshake的請求，而後切換爲websocket。

7)、數據傳輸：WebScoket協議中，數據以幀序列的形式傳輸。考慮到數據安全性，客戶端向服務器傳輸的數據幀必須進行掩碼處理。服務器若接收到未通過掩碼處理的數據幀，則必須主動關閉鏈接。服務器向客戶端傳輸的數據幀必定不能進行掩碼處理。客戶端若接收到通過掩碼處理的數據幀，則必須主動關閉鏈接。針對上狀況，發現錯誤的一方可向對方發送close幀(狀態碼1002，表示協議錯誤)以關閉WebSocket(握手) 鏈接。

webSocket的優勢:

1)、服務器與客戶端之間交換的標頭信息很小,大概只有2字節;

2)、客戶端與服務器均可以主動傳送數據給對方;

3)、不用頻繁建立及銷燬TCP請求，減小網絡帶寬資源的佔用節省服務器資源;