12.22學(xué)習(xí)經(jīng)驗(yàn)分享#
Bruce_Zhu于2016.12.23
一、Web Worker
Web Worker是 運(yùn)行在后臺的javascript,也就是說worker其實(shí)就是就一個(gè)js文件對象，worker可以讓他所包含的js代碼運(yùn)行在后臺
-
特點(diǎn)：
1）充分利用多核CPU的優(yōu)勢
2）對多線程支持非常好
3）不會影響頁面的性能
4）不能訪問web頁面和DOM API
5）所有的主流瀏覽器均支持web worker,除了Internet ExplorerBOM+DOM+ECMAScipt
-
Worker提供API
1）檢測當(dāng)前瀏覽器是否支持Worker
typeof(Worker) !== "undefined"
2）創(chuàng)建Worker文件
創(chuàng)建普通的 JS 文件，都可以用于 Web Worker 文件
3）創(chuàng)建Web Worker對象
var worker = new Worker("myTime.js"); 參數(shù)就是在第二步創(chuàng)建的js文件的路徑4）worker事件
onmessage事件
用于監(jiān)聽 Web Worker 傳遞消息，通過回調(diào)函數(shù)接收傳遞的消息，通過回調(diào)函數(shù)的事件對象data 屬性可以獲取傳遞的消息postMessage()
w.postMessage( “worker success.” ); 通過postMessage() 方法傳遞消息內(nèi)容w.terminate();
在HTML頁面中，通過調(diào)用 Web Worker 對象的terminate( ) 方法終止 Web Worker。創(chuàng)建WebWorker對象
Worker對象onmessage事件，當(dāng)執(zhí)行postMessage事件時(shí)會觸發(fā)
postMessage()方法
terminate()方法
二、Web存儲API
對于任何程序來說，能夠?qū)崿F(xiàn)數(shù)據(jù)存儲是必備功能之一，并且在需要的時(shí)候能夠提供數(shù)據(jù)。但在過去的Web客戶端，沒有能夠支持?jǐn)?shù)據(jù)存儲的有效機(jī)制，cookie曾用來在客戶端存儲少量信息，但受其性質(zhì)所限，cookie只能存儲一些短的字符串
在HTML5中提供了Web存儲API，它是在cookie之上的增強(qiáng)。這個(gè)API允許我們在用戶的硬盤上存儲數(shù)據(jù)，并在日后使用這些數(shù)據(jù)。
-
API可以分成兩個(gè)部分：
1）信息必須且只在會話過程中使用—sessionStorage
當(dāng)瀏覽器窗口關(guān)閉時(shí)，數(shù)據(jù)全部丟失
2）信息必須長期保存且由用戶決定時(shí)長—localStorage
關(guān)閉瀏覽器窗口時(shí)，數(shù)據(jù)繼續(xù)使用
數(shù)據(jù)只能由用戶刪除
三、sessionStorage
sessionStorage這部分API就像是會話cookie的替代。
cookie以及sessionStorage都是在特定的時(shí)間段內(nèi)保持?jǐn)?shù)據(jù)可用。但cookie使用瀏覽器作為引用，而sessionStorage使用單個(gè)窗口作為引用，這就意味著，窗口關(guān)閉之后，sessionStorage就不能再使用。
方法
1）設(shè)置數(shù)據(jù)
setItem(key,value)
key - 作為存儲數(shù)據(jù)的唯一標(biāo)識
value - 存儲的數(shù)據(jù)內(nèi)容(number/string)
2) 根據(jù)標(biāo)識獲取數(shù)據(jù)
var value = getItem(key);
3) 刪除指定標(biāo)識的數(shù)據(jù)
removeItem(key);
4）將存儲系統(tǒng)的所有數(shù)據(jù)刪除
clear()
5）根據(jù)索引值返回key
var key = key(index);
-
屬性
返回當(dāng)前存儲系統(tǒng)的數(shù)據(jù)個(gè)數(shù)
length
四、localStorage
提供的屬性和方法與sessionstorage一致
-
storage事件
實(shí)現(xiàn)多個(gè)窗口之間共享數(shù)據(jù)內(nèi)容
問題：
數(shù)據(jù)安全性低
目前除Safari瀏覽器支持該事件，其他瀏覽器不支持
五、Web socket
-
網(wǎng)絡(luò)協(xié)議
客戶端與服務(wù)端進(jìn)行通信的協(xié)議
HTTP協(xié)議 - 目前互聯(lián)網(wǎng)中最廣泛的協(xié)議
SOCKET協(xié)議 - 應(yīng)用于實(shí)時(shí)即時(shí)通信 -
HTTP協(xié)議的問題
1）無狀態(tài)
本次客戶端的請求,服務(wù)器端不知道客戶端的上次請求
2）短連接
指通訊雙方有數(shù)據(jù)交互時(shí)，就建立一個(gè)連接，數(shù)據(jù)發(fā)送完成后，則斷開此連接，即每次連接只完成一項(xiàng)業(yè)務(wù)的發(fā)送。
-
web Socket
實(shí)現(xiàn)了用HTTP不容易實(shí)現(xiàn)的服務(wù)器端的數(shù)據(jù)推送等智能通訊技術(shù)
-
Web Socket的特點(diǎn)
1）這個(gè)連接是實(shí)時(shí)的，也是永久的
2）服務(wù)端可以主動(dòng)推送消息
3）服務(wù)端不需要輪詢客戶端的請求
4）服務(wù)器端與客戶端之間通信無需重新建立連接 -
使用WorkerMan,設(shè)置socket客戶端
1）設(shè)置php環(huán)境變量
2）下載并解壓workerMan
http://www.workerman.net/workerman workerMan學(xué)習(xí)文檔 http://doc3.workerman.net/getting-started/simple-example.html3）在任意位置創(chuàng)建http_test.php文件，并將課件中的start.text文件中內(nèi)容復(fù)制到該文件中（位置任意，能引用到Workerman文件中的Autoloader.php即可
-
運(yùn)行上建的文件，啟動(dòng)workerMan
執(zhí)行workerMan
-
六、Web socket的使用
-
調(diào)用 WebSocket 對象的構(gòu)造器來建立與服務(wù)器之間的通信連接
var webSocket = new WebSocket (“ws://127.0.0.1: 8005/socket”) ;
請求地址(url)不能再是http://開頭,Web Sockets的請求頭(url的開頭)
ws:// - Web Socket的縮寫
wss:// - 表示加密協(xié)議 -
使用 WebSocket 對象的 send() 方法對服務(wù)器發(fā)送數(shù)據(jù)
webSocket.send (“data”);
send() 方法只能發(fā)送文本數(shù)據(jù)。,使用JSON對象把任何JavaScript,對象轉(zhuǎn)換稱文本數(shù)據(jù)后進(jìn)行發(fā)送。
-
通過WebSocket對象的close() 方法來關(guān)閉socket，切斷通信連接：
webSocket.close( ) ;
-
Web Socket事件
1）通過獲取 onmessage事件來接收服務(wù)器傳來的數(shù)據(jù)：
webSocket.onmessage = function( event ){ var data = event.data ; }2）通過獲取 onopen 事件來監(jiān)聽 socket 的打開事件：
webSocket.onopen = function( event ){ }3）通過獲取onclose事件來監(jiān)聽socket 的關(guān)閉事件：
webSocket.onclose = function( event ){ }4）通過onerror事件，監(jiān)聽客戶端與服務(wù)器端連接出錯(cuò)
webSocket.onerror = function( event ){ } -
通過讀取 readyState 的屬性值來獲取 WebSocket 對象的狀態(tài)。
CONNECTING（數(shù)字值為0），表示正在連接。
OPEN（數(shù)字值為1），表示已建立連接。
CLOSING（數(shù)字值為2），表示正在關(guān)閉連接。
CLOSED（數(shù)字值為2），表示已關(guān)閉連接。
