現(xiàn)代Web開發(fā)與應(yīng)用課件 第二章-BS架構(gòu)HTML5進(jìn)階

現(xiàn)代Web開發(fā)與應(yīng)用B/S架構(gòu)與HTML5進(jìn)階

C/S系統(tǒng)與B/SC/S：客戶/服務(wù)器B/S:瀏覽器/服務(wù)器瀏覽器

B/S-瘦客戶端基本含義在客戶/服務(wù)器的應(yīng)用中，被設(shè)計(jì)得很小以至于大多數(shù)的數(shù)據(jù)操作均在服務(wù)器端進(jìn)行的客戶稱為瘦客戶優(yōu)點(diǎn)很容易部署很容易使用通過集中管理使系統(tǒng)管理更容易通過集中管理和監(jiān)督可以很容易地發(fā)現(xiàn)問題在服務(wù)器端進(jìn)行問題的解決新版本的軟件只需安裝在服務(wù)器上因?yàn)閺?fù)雜的處理在服務(wù)器端進(jìn)行，所以瘦客戶使用的客戶端資源很少

C/S-胖客戶端基本含義在本地執(zhí)行大多數(shù)的數(shù)據(jù)處理，只有數(shù)據(jù)本身存儲(chǔ)在服務(wù)器上的客戶稱為胖客戶優(yōu)點(diǎn)提供給終端用戶更多的功能，使得終端用戶根據(jù)自己的需要配置應(yīng)用程序，因?yàn)榕挚蛻魴C(jī)可以存儲(chǔ)客戶系統(tǒng)的大部分個(gè)人數(shù)據(jù)；可以減少服務(wù)器的負(fù)擔(dān)，因?yàn)閺?fù)雜的計(jì)算操作是由客戶端自己完成缺陷需要更多的可能導(dǎo)致錯(cuò)誤的安裝過程使用起來需要教育培訓(xùn)對(duì)新版本的軟件需要重新安裝需要較多的客戶端資源（如內(nèi)存和CPU處理能力）

C/Svs.B/SC/S的缺點(diǎn)系統(tǒng)整合性差配置和維護(hù)成本高對(duì)客戶機(jī)要求高用戶培訓(xùn)時(shí)間長伸縮性差軟件復(fù)用性差C/S的優(yōu)點(diǎn):交互性強(qiáng)性能網(wǎng)絡(luò)負(fù)載安全用戶狀態(tài)的維護(hù)

C/Svs.B/SWeb架構(gòu)較C/S架構(gòu)的優(yōu)點(diǎn)標(biāo)準(zhǔn)化開發(fā)代價(jià)低客戶端“零花費(fèi)”發(fā)布升級(jí)容易可以穿透防火墻易于在異構(gòu)平臺(tái)上配置集成降低客戶培訓(xùn)費(fèi)用……Web架構(gòu)較C/S架構(gòu)的缺點(diǎn)界面開發(fā)不如C/S方便速度慢,難以滿足實(shí)時(shí)系統(tǒng)要求

RichInternetApplication技術(shù)Web的不足現(xiàn)在的Web應(yīng)用程序?qū)ν瓿蓮?fù)雜應(yīng)用方面卻始終跟不上步伐Web模型是基于頁面的模型，缺少客戶端智能機(jī)制幾乎無法完成復(fù)雜的用戶交互（如傳統(tǒng)的C/S應(yīng)用程序和桌面應(yīng)用程序中的用戶交互）

RIA的應(yīng)用程序模型RIA中的RichClient（豐富客戶端）提供可承載已編譯客戶端應(yīng)用程序（以文件形式用HTTP傳遞）的運(yùn)行環(huán)境，客戶端應(yīng)用程序使用異步客戶/服務(wù)器架構(gòu)連接現(xiàn)有的后端應(yīng)用服務(wù)器。

RichInternetApplication技術(shù)RIA的優(yōu)勢(shì)數(shù)據(jù)模型的豐富用戶界面可以顯示和操作更為復(fù)雜的嵌入在客戶端的數(shù)據(jù)模型用戶界面的豐富提供了靈活多樣的界面控制元素，這些控制元素可以很好的與數(shù)據(jù)模型相結(jié)合最好的通訊模式無刷新頁面之下提供快捷的界面響應(yīng)時(shí)間雙向互動(dòng)聲音和圖像。

RichInternetApplication技術(shù)RIA應(yīng)用示例基于WebGL的NVEKataspace:browser-basedvirtualworldsbuiltwithWebGLandHTML5

RichInternetApplication技術(shù)Ajax

RichInternetApplication技術(shù)Ajax

RichInternetApplication技術(shù)Ajax

RichInternetApplication技術(shù)Ajax

RichInternetApplication技術(shù)1.發(fā)生一個(gè)客戶端事件Ajax

RichInternetApplication技術(shù)

2.創(chuàng)建一個(gè)XMLHttpRequest對(duì)象Ajax

RichInternetApplication技術(shù)3.一個(gè)XMLHttpRequest對(duì)象被配置具有一個(gè)回調(diào)函數(shù)Ajax

RichInternetApplication技術(shù)回調(diào)函數(shù)：當(dāng)滿足一定條件后才執(zhí)行的函數(shù)。AjaxsetTimeout(function(){console.log('執(zhí)行了回調(diào)函數(shù)');},3000)

console.log('111');

RichInternetApplication技術(shù)同步任務(wù)：在主線程上排隊(duì)執(zhí)行，只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行下一個(gè)任務(wù)。異步任務(wù)：不進(jìn)入主線程，而是進(jìn)入異步隊(duì)列，前一個(gè)任務(wù)是否執(zhí)行完畢不影響下一個(gè)任務(wù)的執(zhí)行。Ajax

RichInternetApplication技術(shù)回調(diào)地獄：為是實(shí)現(xiàn)代碼順序執(zhí)行而出現(xiàn)的一種操作，回調(diào)函數(shù)中又包含回調(diào)函數(shù)，多層這樣的回調(diào)，導(dǎo)致代碼可讀性非常差，后期不好維護(hù)。Ajax比較

RichInternetApplication技術(shù)4.XMLHttpRequest對(duì)象發(fā)起一個(gè)異步請(qǐng)求URL被設(shè)為validate?id=gregAjax

RichInternetApplication技術(shù)5.服務(wù)器端的ValidateServlet返回一個(gè)包含結(jié)果的XML文檔Ajax

RichInternetApplication技術(shù)6.XMLHttpRequest對(duì)象調(diào)用回調(diào)函數(shù)并處理結(jié)果varmessage=req.responseXML.getElementsByTagName("valid")[0].childNodes[0].nodeValue;Ajax

RichInternetApplication技術(shù)7.更新HTMLDOMAjax

RichInternetApplication技術(shù)總結(jié)流程Ajax//1.創(chuàng)建XmlHttpRequest對(duì)象varxhr=newXMLHttpRequest()//2.調(diào)用open方法設(shè)置基本請(qǐng)求信息xhr.open('get','/some/url',true)//3.設(shè)置發(fā)送的數(shù)據(jù)，發(fā)送請(qǐng)求xhr.responseType='json';xhr.send()//4.監(jiān)聽返回值，對(duì)頁面進(jìn)行更新xhr.onreadystatechange=function(){if(xhr.status=200&&xhr.readyState==4){console.log(xhr.response)}}

RichInternetApplication技術(shù)使用Jquery使用查詢參數(shù)zipcode=97201

調(diào)用服務(wù)器端

/api/getWeather，

并使用返回的文本替換元素

#weather-temp的html代碼.

Ajax

RichInternetApplication技術(shù)使用JqueryAjax

RichInternetApplication技術(shù)使用JqueryAjax

RichInternetApplication技術(shù)使用Axios：通過Promise實(shí)現(xiàn)對(duì)ajax技術(shù)的一種封裝Ajax

RichInternetApplication技術(shù)Promise進(jìn)行異步操作的一種解決方案，可以有效的避免回調(diào)地獄的產(chǎn)生,ES6原生提供了Promise。Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)稱為起始函數(shù)。起始函數(shù)包含兩個(gè)參數(shù)：resolve在異步操作成功時(shí)調(diào)用reject在異步操作失敗時(shí)調(diào)用

RichInternetApplication技術(shù)PromisePromise實(shí)例具有以下幾個(gè)方法：then：用于處理Promise成功狀態(tài)的回調(diào)函數(shù)。catch：用于處理Promise失敗狀態(tài)的回調(diào)函數(shù)。finally：無論P(yáng)romise是成功還是失敗，都會(huì)執(zhí)行的回調(diào)函數(shù)。

promise.then(function(value){<!--成功的回調(diào)處理-->},function(error){<!--失敗的回調(diào)處理-->})//亦可用.catch來捕獲失敗/錯(cuò)誤

RichInternetApplication技術(shù)PromisePromise的then方法示例

RichInternetApplication技術(shù)PromisePromise的then()中傳入的函數(shù)會(huì)依次執(zhí)行。

RichInternetApplication技術(shù)Promise將前續(xù)例子改為以下寫法，更加清晰。

RichInternetApplication技術(shù)Promise使用ECMAScript2017中的異步函數(shù)（asyncfunction）。

RichInternetApplication技術(shù)Fetch瀏覽器原生提供FetchAPI，用于訪問和操縱HTTP的請(qǐng)求和響應(yīng)。fetch()使用Promise，不使用回調(diào)函數(shù)。fetch()接受一個(gè)URL字符串作為參數(shù)，默認(rèn)向該網(wǎng)址發(fā)出GET請(qǐng)求，返回一個(gè)Promise對(duì)象。

fetch(‘/some/url‘,{//url(必須)method:‘get‘//options(可選)}).then(function(response){}).catch(function(err){//出錯(cuò)處理});

RichInternetApplication技術(shù)FetchFetch示例

RichInternetApplication技術(shù)fetch和ajax的主要區(qū)別當(dāng)接收到一個(gè)代表錯(cuò)誤的HTTP狀態(tài)碼時(shí)，從fetch()返回的Promise不會(huì)被標(biāo)記為reject。fetch()可以接受跨域cookies，也可以使用fetch()建立起跨域會(huì)話。fetch默認(rèn)不會(huì)發(fā)送cookies。

PWAProgressiveWebApps（PWA）Google提出并推廣，眾多能讓W(xué)EB產(chǎn)品APP化的能力的一個(gè)集合。目標(biāo)：具有原生Apps所具有的離線體驗(yàn)，消息通知推送等功能。

PWAProgressiveWebApps（PWA）其核心技術(shù)為ServiceWorker類APP交互：MaterialDesign的設(shè)計(jì)風(fēng)格；appcacheshell（分模塊加載）、添加到桌面、全屏瀏覽、任務(wù)切換器中以單獨(dú)任務(wù)存在等；消息推送:不依賴于瀏覽器和頁面本身是否打開,直接通過Android底層的通道觸達(dá)用戶，并且整個(gè)消息的展示和點(diǎn)擊流程和app幾乎一樣。離線緩存:內(nèi)容緩存在本地，優(yōu)化用戶的弱網(wǎng)及斷網(wǎng)體驗(yàn)。

HTML5關(guān)鍵技術(shù)Web

Storage簡(jiǎn)介提供了一種比cookie(4K)更加方便地本地存儲(chǔ)機(jī)制,一般能存儲(chǔ)最小5MBsessionStorage:將數(shù)據(jù)保存在session對(duì)象中，臨時(shí)保存。localStorage：將數(shù)據(jù)保存在客戶端本地的硬件設(shè)備，永久保存。

HTML5關(guān)鍵技術(shù)Web

StoragesessionStorage保存數(shù)據(jù)讀取數(shù)據(jù)

HTML5關(guān)鍵技術(shù)Web

StoragelocalStorage保存數(shù)據(jù)讀取數(shù)據(jù)

HTML5關(guān)鍵技術(shù)Web

Storage示例數(shù)據(jù)轉(zhuǎn)換成JSON對(duì)象：vardata=JSON.parse(str);將對(duì)象轉(zhuǎn)換成JSON格式的文本數(shù)據(jù)：varstr=JSON.stringify(data);

HTML5關(guān)鍵技術(shù)Web

Storage利用storage事件實(shí)時(shí)監(jiān)視WebStorage中的數(shù)據(jù)通過對(duì)window對(duì)象的storage事件進(jìn)行監(jiān)聽并指定其事件處理函數(shù)觸發(fā)事件的事件對(duì)象（event參數(shù)值）具有如下幾個(gè)屬性?！vent.key：屬性值為在session或localStorage中被修改的數(shù)據(jù)鍵值?！vent.oldValue：屬性值為在sessionStorage或localStorage中被修改前的值?！vent.newValue：屬性值為在sessionStorage或localStorage中被修改后的值?！vent.url：屬性值為修改sessionStorage或localStorage中值的頁面URL地址?！vent.storageArea：屬性值為被變動(dòng)的sessionStorage對(duì)象或localStorage對(duì)象。

HTML5關(guān)鍵技術(shù)Web

Worker特征允許JavaScript創(chuàng)建多個(gè)線程，子線程完全受主線程控制。不得操作DOM，不能訪問全局變量（window、document之類的瀏覽器全局變量）或是全局函數(shù)，不能調(diào)用alert()之類函數(shù)。兩種webworker

專用線程dedicated

web

worker:只能被創(chuàng)建它的頁面訪問,隨當(dāng)前頁面的關(guān)閉而結(jié)束；共享線程Shared

web

worker：可以被多個(gè)頁面訪問。

Web

Workerdedicatedwebworker

主線程與worker線程都是通過postMessage(data)方法來發(fā)送消息，以及監(jiān)聽message、error事件來接收消息。主線程子線程HTML5關(guān)鍵技術(shù)

Web

Workerdedicatedwebworker

onMessage:有消息時(shí)觸發(fā)該事件,消息內(nèi)容可通過事件對(duì)象的data來獲取error：出錯(cuò)處理。錯(cuò)誤信息：e.message，e.filename，e.linenoHTML5關(guān)鍵技術(shù)主線程中myWorker.addEventListener('error',err=>{ console.log(err.message);});

Web

Workerdedicatedwebworker

terminate()：主線程中終止子線程close()：子線程自己關(guān)閉HTML5關(guān)鍵技術(shù)//主線程中constmyWorker=new

Worker(‘/worker.js’);//創(chuàng)建子線程

myWorker.terminate();//關(guān)閉子線程//子線程中self.close();//

直接執(zhí)行close方法

Web

Workerdedicatedwebworker

線程可以嵌套，將一些任務(wù)通過進(jìn)一步開出子線程來完成。HTML5關(guān)鍵技術(shù)main.html調(diào)用script.jsscript.js調(diào)用worker2.js

Web

Workerdedicatedwebworker

通過主線程，多個(gè)子線程也可以協(xié)同工作。HTML5關(guān)鍵技術(shù)main.html調(diào)用script.jsscript.js調(diào)用worker1.js和worker2.js

Web

WorkerSharedwebworker

多個(gè)頁面可以共用一個(gè)SharedWorker線程，該線程可以起到提供后臺(tái)服務(wù)的作用。當(dāng)SharedWorker對(duì)象被創(chuàng)建時(shí)，一個(gè)MessagePort對(duì)象也同時(shí)被創(chuàng)建；可以通過SharedWorker對(duì)象的port屬性值來訪問該對(duì)象，該對(duì)象代表頁面通信時(shí)需要使用的端口?！ostMessage方法：用于向另一個(gè)頁面發(fā)送消息?！tart方法：用于激活端口，開始監(jiān)聽端口是否接收到消息?！lose方法：用于關(guān)閉并停用端口。HTML5關(guān)鍵技術(shù)

Web

WorkerSharedwebworker

可以通過MessagePort對(duì)象的postMessage方法從端口向共享的后臺(tái)線程發(fā)送消息?？梢酝ㄟ^監(jiān)聽MessagePort對(duì)象的message事件并指定事件處理函數(shù)，來指定在該端口接收到消息時(shí)所做的處理。HTML5關(guān)鍵技術(shù)

Web

WorkerSharedwebworker

當(dāng)某個(gè)頁面通過SharedWorker對(duì)象與共享后臺(tái)線程開始通信時(shí)，會(huì)觸發(fā)后臺(tái)線程對(duì)象的connect事件。HTML5關(guān)鍵技術(shù)

Web

Workerwebworker的Ajax調(diào)用可以使用XMLHttpRequest與服務(wù)端通信適合MVVM模式HTML5關(guān)鍵技術(shù)

Service

Worker前端緩存概述HTML5關(guān)鍵技術(shù)

應(yīng)用程序緩存（ApplicationCache）

web應(yīng)用可進(jìn)行緩存，并可在沒有因特網(wǎng)連接時(shí)進(jìn)行訪問。在文檔的<html>標(biāo)簽中包含manifest屬性，則該頁面在被訪問時(shí)會(huì)被緩存。manifest文件的建議的文件擴(kuò)展名是：".appcache"。HTML5關(guān)鍵技術(shù)

應(yīng)用程序緩存（ApplicationCache）

Manifest文件CACHEMANIFEST

-在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存NETWORK

-在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存FALLBACK

-在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面（比如404頁面）HTML5關(guān)鍵技術(shù)CACHEMANIFEST

#2023-02-21v1.0.0

/theme.css

/logo.gif

/main.js

NETWORK:

login.php

FALLBACK:

/html//offline.html

Service

Worker充當(dāng)Web應(yīng)用程序與瀏覽器之間的代理服務(wù)器。是一個(gè)被注冊(cè)在指定源和路徑下的事件驅(qū)動(dòng)Worker。必須采用https協(xié)議，本地服務(wù)器情況下可以使用http協(xié)議。支持離線應(yīng)用程序攔截網(wǎng)絡(luò)請(qǐng)求并根據(jù)網(wǎng)絡(luò)是否可用來采取適當(dāng)?shù)奶幚硗扑屯ㄖ昂笈_(tái)同步HTML5關(guān)鍵技術(shù)

Service

Worker注冊(cè)和安裝可以從chrome：//serviceworker-internals/頁面中查看該ServiceWorkerHTML5關(guān)鍵技術(shù)

Service

Worker緩存服務(wù)器端資源使用ServiceWorkerAPI中的CacheAPI;使用caches引用一個(gè)CacheStorage對(duì)象。HTML5關(guān)鍵技術(shù)

Service

Worker生命周期總結(jié)HTML5關(guān)鍵技術(shù)傳統(tǒng)輪詢?yōu)g覽器定時(shí)發(fā)送數(shù)據(jù)請(qǐng)求服務(wù)器查找數(shù)據(jù)返回?cái)?shù)據(jù)給客戶端長輪詢?yōu)g覽器發(fā)送數(shù)據(jù)請(qǐng)求,服務(wù)器持有該請(qǐng)求，等待新數(shù)據(jù)返回?cái)?shù)據(jù)給客戶端長連接瀏覽器嵌入一個(gè)隱蔵iframe，并設(shè)置src屬性設(shè)為對(duì)一個(gè)長連接的請(qǐng)求服務(wù)器端發(fā)現(xiàn)新數(shù)據(jù)時(shí)告知瀏覽器瀏覽器發(fā)起新數(shù)據(jù)請(qǐng)求WebSocket瀏覽器發(fā)起連接請(qǐng)求服務(wù)器與客戶端建立連接服務(wù)器推送數(shù)據(jù)客戶端接收展示HTML5關(guān)鍵技術(shù)Web

Socket實(shí)現(xiàn)服務(wù)器端推送的方法HTML5關(guān)鍵技術(shù)Web

SocketAjax輪詢與Websockets

HTML5關(guān)鍵技術(shù)Web

Socket基于TCP，實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，即允許服務(wù)器主動(dòng)發(fā)送信息給客戶端。客戶端瀏覽器首先要向服務(wù)器發(fā)起一個(gè)HTTP請(qǐng)求，附加頭信息"Upgrade:WebSocket"表明這是一個(gè)申請(qǐng)協(xié)議升級(jí)。長連接全雙工有狀態(tài)主動(dòng)推HTML5關(guān)鍵技術(shù)Web

Socket一次典型的Websocket握手客戶端請(qǐng)求服務(wù)器回應(yīng)

HTML5關(guān)鍵技術(shù)Web

SocketWebSocket上的屬性、方法和事件：方法描述Socket.send()使用連接發(fā)送數(shù)據(jù)Socket.close()關(guān)閉連接屬性描述Socket.readyState表示連接狀態(tài)，可以是以下值：0-表示連接尚未建立。1-表示連接已建立，可以進(jìn)行通信。2-表示連接正在進(jìn)行關(guān)閉。3-表示連接已經(jīng)關(guān)閉或者連接不能打開。Socket.bufferedAmount已被send()放入正在隊(duì)列中等待傳輸，但是還沒有發(fā)出的UTF-8文本字節(jié)數(shù)。事件事件處理程序描述openSocket.onopen連接建立時(shí)觸發(fā)messageSocket.onmessage客戶端接收服務(wù)端數(shù)據(jù)時(shí)觸發(fā)errorSocket.onerror通信發(fā)生錯(cuò)誤時(shí)觸發(fā)closeSocket.onclose連接關(guān)閉時(shí)觸發(fā)

HTML5關(guān)鍵技術(shù)Web

Socket創(chuàng)建WebSocket對(duì)象：Websocket使用ws或wss的統(tǒng)一資源標(biāo)志符創(chuàng)建對(duì)象后的發(fā)送和接受通過

send()

方法來向服務(wù)器發(fā)送數(shù)據(jù)。通過

onmessage

事件來接收服務(wù)器返回的數(shù)據(jù)。ws:///wsapiwss:///var

Socket

=

new

WebSocket(url,

[protocol]

);

HTML5關(guān)鍵技術(shù)Web

Socket服務(wù)器端示例代碼

HTML5關(guān)鍵技術(shù)Web

Socket客戶端示例代碼

HTML5關(guān)鍵技術(shù)Web

Socket示例

HTML5關(guān)鍵技術(shù)Socket.io是一個(gè)WebSocket庫，包括了客戶端的js和服務(wù)器端的nodejs。自動(dòng)根據(jù)瀏覽器從WebSocket、AJAX長輪詢、Iframe流等等各種方式中選擇最佳的方式來實(shí)現(xiàn)網(wǎng)絡(luò)實(shí)時(shí)應(yīng)用。https://socket.io/

HTML5關(guān)鍵技術(shù)Socket.ioSocket.io分為服務(wù)端和客戶端兩部分。服務(wù)端由Node.js加載后偵聽某個(gè)服務(wù)端口;客戶端加載Socket.io的客戶端庫，然后調(diào)用io.connect();即可與服務(wù)端連接上。

HTML5關(guān)鍵技術(shù)Socket.io廣播消息：只需要在emit和send方法前面加上broadcast標(biāo)志即可。

HTML5關(guān)鍵技術(shù)Socket.io聊天室示例

client：

server：建立連接：發(fā)送/接收消息：socket.emit('chat','xxxxxx');socket.on('chat',message=>{//dosomething});

HTML5關(guān)鍵技術(shù)Socket.io聊天室示例ClientServerOtherClientsocket.emit('chat','xxxxxx');io.on('connection',socket=>{socket.on('chat',message=>{io.emit('chat',message);});});socket.on('chat',...);//printonscreen,etc

HTML5關(guān)鍵技術(shù)Socket.io聊天室示例ClientServerOtherClientsocket.emit('chat','xxxxxx');io.on('connection',socket=>{socket.on('chat',message=>{io.emit('chat',message);});});socket.on('chat',...);//printonscreen,etcHTML5關(guān)鍵技術(shù)WebRTCWebReal-timeCommunication，網(wǎng)頁即時(shí)通訊技術(shù)。由Google發(fā)起的一個(gè)的實(shí)時(shí)通訊解決方案,支持快速地實(shí)現(xiàn)一個(gè)基于Web的音視頻通訊應(yīng)用。2021年,正式成為W3C和IETF標(biāo)準(zhǔn)。HTML5關(guān)鍵技術(shù)WebRTC涵蓋了音視頻采集、通訊的建立、信息傳輸、音視頻顯示等整套的實(shí)現(xiàn)方案。HTML5關(guān)鍵技術(shù)WebRTC架構(gòu)：兩個(gè)WebRTC終端、一個(gè)信令服務(wù)器、一臺(tái)中繼服務(wù)器（STUN/TURN）和兩個(gè)NAT。HTML5關(guān)鍵技術(shù)WebRTC通信流程：HTML5關(guān)鍵技術(shù)WebRTC信令服務(wù)器實(shí)現(xiàn)業(yè)務(wù)層的管理，如用戶創(chuàng)建房間，加入房間，退出房間等。讓通信的雙方彼此交換信息，其中最常見的是交換通信雙方的IP地址和端口。HTML5關(guān)鍵技術(shù)WebRTC信令時(shí)序HTML5關(guān)鍵技術(shù)WebRTC內(nèi)網(wǎng)設(shè)備訪問內(nèi)網(wǎng)設(shè)備（P2P）——通過NAT穿透（UDP/TCP打洞）打洞服務(wù)器（STUN服務(wù)器）穿越二者間的防火墻/家庭(NAT)路由器,讓兩個(gè)同處于私有網(wǎng)絡(luò)里的計(jì)算機(jī)能夠通訊起來HTML5關(guān)鍵技術(shù)WebRTCWebRTC實(shí)例化連接RTCPeerConnection對(duì)象是WebRTC的核心，它是WebRTC暴露給用戶的統(tǒng)一接口，其內(nèi)部由多個(gè)模塊組成，如網(wǎng)絡(luò)處理模塊、服務(wù)質(zhì)量模塊、音視頻引擎模塊，等等。在configuration里配置STUN服務(wù)器信息HTML5關(guān)鍵技術(shù)WebRTC通過WebRTC的getUserMedia（）接口采集音視頻數(shù)據(jù)https://webrtc.github.io/samples/sr