Web前端技術(shù)課件- 網(wǎng)絡(luò)通訊與多線程

HTML5網(wǎng)絡(luò)通信與多線程學(xué)習(xí)導(dǎo)圖11.1WebSocket11.1.1WebSocket協(xié)議概述在傳統(tǒng)的TCP/IP網(wǎng)絡(luò)編程中，可以使用socket接口建立網(wǎng)絡(luò)連接，實(shí)現(xiàn)客戶端和服務(wù)器之間的數(shù)據(jù)傳輸。在Web開發(fā)環(huán)境下，瀏覽器與服務(wù)器之間主要以HTTP協(xié)議進(jìn)行連接，由HTTP客戶端發(fā)起一個(gè)請(qǐng)求，創(chuàng)建一個(gè)到服務(wù)器指定端口（默認(rèn)是80端口）的TCP連接。HTTP服務(wù)器則在那個(gè)端口監(jiān)聽客戶端的請(qǐng)求，一旦收到請(qǐng)求，服務(wù)器會(huì)向客戶端返回一個(gè)狀態(tài)，比如"HTTP/1.1200OK"，以及返回的內(nèi)容，如請(qǐng)求的文件、錯(cuò)誤消息、或者其它信息。HTTP協(xié)議是非持久化的，單向的網(wǎng)絡(luò)協(xié)議，在建立連接后只允許瀏覽器向服務(wù)器發(fā)出請(qǐng)求后，服務(wù)器才能返回相應(yīng)的數(shù)據(jù)。11.1.1WebSocket協(xié)議概述對(duì)于網(wǎng)站上的即時(shí)通訊開發(fā)，如網(wǎng)頁QQ、多人在線聊天系統(tǒng)等，需要維持客戶端與服務(wù)端的實(shí)時(shí)通信。在WebSocket之前，通常采用AJAX輪詢和LongPolling長輪詢技術(shù)。WebSocket是一種在單個(gè)TCP連接上進(jìn)行全雙工通信的協(xié)議。WebSocket的出現(xiàn)使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)。在WebSocket中，只需要服務(wù)器和瀏覽器通過HTTP協(xié)議進(jìn)行一個(gè)握手的動(dòng)作，兩者之間就直接可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。11.1.1WebSocket協(xié)議概述對(duì)于網(wǎng)站上的即時(shí)通訊開發(fā)，如網(wǎng)頁QQ、多人在線聊天系統(tǒng)等，需要維持客戶端與服務(wù)端的實(shí)時(shí)通信。11.1.2WebSocket連接過程為了建立WebSocket連接，客戶端瀏覽器首先要向服務(wù)器發(fā)起一個(gè)HTTP握手請(qǐng)求，這個(gè)請(qǐng)求和通常的HTTP請(qǐng)求不同，包含了一些附加頭信息。11.1.3WebSocketAPI為了建立WebSocket連接，客戶端瀏覽器首先要向服務(wù)器發(fā)起一個(gè)HTTP握手請(qǐng)求，這個(gè)請(qǐng)求和通常的HTTP請(qǐng)求不同，包含了一些附加頭信息。服務(wù)端負(fù)責(zé)響應(yīng)協(xié)議升級(jí)，返回報(bào)文。11.1.3WebSocketAPIWebSocket的實(shí)現(xiàn)分為客戶端和服務(wù)端兩部分。目前，WebSocket服務(wù)端在各個(gè)主流應(yīng)用服務(wù)器廠商中已獲得符合JSR356標(biāo)準(zhǔn)規(guī)范API的支持，通過使用javax.websocket.*的API，可以將一個(gè)普通Java對(duì)象（POJO）使用@ServerEndpoint注釋作為WebSocket服務(wù)器端。11.1.3WebSocketAPI客戶端WebSocketAPI已經(jīng)在各個(gè)主流瀏覽器廠商中實(shí)現(xiàn)了統(tǒng)一，使用標(biāo)準(zhǔn)HTML5定義的WebSocket客戶端的JavaScriptAPI即可。11.1.3WebSocketAPI客戶端通過瀏覽器向聊天服務(wù)器發(fā)起請(qǐng)求，服務(wù)器端解析客戶端發(fā)出的握手請(qǐng)求并產(chǎn)生應(yīng)答信息返回給客戶端，從而在客戶端和服務(wù)器之間建立連接通道。服務(wù)器支持廣播功能，每個(gè)聊天用戶發(fā)送的信息會(huì)實(shí)時(shí)的發(fā)送給所有的用戶，當(dāng)用戶退出聊天室時(shí)，服務(wù)器端需要清理相應(yīng)用戶的連接信息，避免資源的泄漏。基于WebSocket聊天室應(yīng)用組成：WebSocketServer、SocketConnection兩個(gè)核心類。功能：實(shí)現(xiàn)WebSocket握手信息的處理邏輯過程：服務(wù)器端啟動(dòng)一個(gè)套接字，監(jiān)聽來自客戶端的連接請(qǐng)求，服務(wù)器端解析WebSocketUpgrade信息，Sec-WebSocket-Key1，Sec-WebSocket-Key2和[8-bytesecuritykey]頭信息，并根據(jù)WebSocket規(guī)范的要求產(chǎn)生應(yīng)答信息。基于WebSocket聊天室應(yīng)用：服務(wù)器端11.1.3WebSocketAPI基于WebSocket聊天室應(yīng)用：客戶端11.1.3WebSocketAPI11.2XMLHttpRequest11.2.1XMLHttpRequest對(duì)象XMLHttpRequest稱為可擴(kuò)展的超文本傳輸請(qǐng)求，英文縮寫為XHR，它可以在不刷新頁面的情況下更新網(wǎng)頁中的某個(gè)部分，能夠在頁面加載后從服務(wù)器請(qǐng)求或接收數(shù)據(jù)，此外還能夠在后臺(tái)向服務(wù)器發(fā)送數(shù)據(jù)。微軟早在IE5瀏覽器中就引進(jìn)了XMLHttpRequest接口，隨后這一技術(shù)在AJAX中得到了廣泛的應(yīng)用。HTML5規(guī)范發(fā)布后，W3C開始考慮標(biāo)準(zhǔn)化這個(gè)接口，并于2008年2月提出了XMLHttpRequestLevel2草案。11.2.1XMLHttpRequest對(duì)象在Level1版本中，XMLHttpRequest對(duì)象的使用比較簡單，一般包括新建對(duì)象實(shí)例，向遠(yuǎn)程主機(jī)發(fā)送HTTP請(qǐng)求，等待遠(yuǎn)程主機(jī)做出回應(yīng)等操作。11.2.2改進(jìn)的XMLHttpRequest對(duì)象HTML5發(fā)布了XMLHttpRequestLevel2規(guī)范，Level2版本對(duì)Level1進(jìn)行了改進(jìn)，新增了一些功能。為了解決響應(yīng)事件長的問題，增加了timeout屬性，用來設(shè)置HTTP請(qǐng)求的時(shí)限。新增了FormData對(duì)象，該對(duì)象既可以用來獲取網(wǎng)頁表單的值，也可以添加自定義的表單項(xiàng)11.2.2改進(jìn)的XMLHttpRequest對(duì)象新版本的XMLHttpRequest對(duì)象，可以向不同域名的服務(wù)器發(fā)出HTTP請(qǐng)求，即“跨域資源共享”（Cross-originresourcesharing，簡稱CORS）。XMLHttpRequest對(duì)象支持的另一重要特性是從服務(wù)器端獲取二進(jìn)制數(shù)據(jù)。XMLHttpRequest對(duì)象新增了responseType屬性和response屬性。其中responseType屬性用于指定服務(wù)器端返回的數(shù)據(jù)類型，屬性值包括text、arraybuffer、blob、json或document，默認(rèn)取值text。response屬性則根據(jù)responseType屬性值返回對(duì)應(yīng)的服務(wù)端響應(yīng)數(shù)據(jù)。在傳送數(shù)據(jù)時(shí)，新版XMLHttpRequest對(duì)象還提供了progress事件，用來返回進(jìn)度信息。11.3WebWorker11.3.1WebWorker對(duì)象JavaScript語言采用的是單線程模型，也就是說，所有任務(wù)只能在一個(gè)線程上完成，一次只能做一件事。WebWorker的作用，就是為JavaScript創(chuàng)造多線程環(huán)境，允許主線程創(chuàng)建Worker線程，將一些任務(wù)分配給后者運(yùn)行。在主線程運(yùn)行的同時(shí)，Worker線程在后臺(tái)運(yùn)行，兩者互不干擾。等到Worker線程完成計(jì)算任務(wù)，再把結(jié)果返回給主線程。這樣一些計(jì)算密集型或高延遲的任務(wù)，被Worker線程負(fù)擔(dān)了，主線程（通常負(fù)責(zé)UI交互）就會(huì)很流暢，不會(huì)被阻塞或拖慢。11.3.1WebWorker對(duì)象檢測(cè)瀏覽器對(duì)Worker的支持情況。在外部JavaScript中創(chuàng)建worker線程，命名為workerTest.js，子線程監(jiān)聽message事件，當(dāng)收到主線程發(fā)來的數(shù)據(jù)時(shí)，調(diào)用postMessage方法向主線程發(fā)送信息。