一、通信 communication
1.1 WebSockets
WebSockets 是什么刹前？
WebSockets 是一個應用層協(xié)議两入，與 http 協(xié)議一樣，是基于 TCP 協(xié)議的溉箕。
與 http 協(xié)議的不同之處在于：它是一個雙向協(xié)議，即既可以從客戶端發(fā)起請求悦昵，也可以從服務端發(fā)起請求肴茄。而 http 是只能從客戶端發(fā)起請求的。WebSockets 有什么作用旱捧？
從 WebSockets 與 http 協(xié)議的不同可以看出独郎，它非常適用于需要客戶端與服務端雙向發(fā)起請求的業(yè)務場景。比如說：直播枚赡，實時聊天等如何使用 WebSockets氓癌？
客戶端示例：
let ws = new WebSocket('wss://12.233.233.40')
// 開啟webSocket
ws.onopen = function(msg) {
// 發(fā)送信息給服務端
ws.send('hello')
}
// 接收服務端信息
ws.onmessage = function(msg) {
console.log('Received message: ' + msg)
// 關閉websocket
ws.close()
}
1.2 跨域通信機制
-
為什么需要跨域通信機制?
- 瀏覽器有一個“同源政策(same-origin policy)”，限制非同源時贫橙，無法獲取Cookie贪婉、localStorage 等數(shù)據(jù)、無法獲取 dom卢肃、無法發(fā)送 ajax 請求
- 這種方式會使得一些合理的用途也受到影響疲迂。如：兩個網(wǎng)站一級域名相同，二級域名不同莫湘，也不屬于同源尤蒿，無法共享信息
- 因此需要有一種安全的跨域通信機制來解決這個問題
如何實現(xiàn)跨域通信？
過去已經(jīng)有一些跨域通信的實現(xiàn)方式幅垮，HTML5 又給出了一個解決方案腰池，一個api：postMessage
這是客戶端的一個api，允許來自不同源的腳本通信忙芒，實現(xiàn)跨域消息傳遞示弓。如：
發(fā)送message：
// postMessage接收兩個參數(shù)：msg(消息內(nèi)容)，origin(目標窗口的源呵萨，協(xié)議+主機+端口號)
window.frame[0].postMessage('hello', 'http://10.283.27.44')
接收message：
// 發(fā)送消息會觸發(fā) message 事件奏属，監(jiān)聽這個事件就可以獲取到發(fā)送的 msg
window.addEventListener('message', function(res){
let data = res.data
console.log(data);
})
二、離線 & 存儲 storage
2.1 cookie潮峦、localStorage囱皿、sessionStorage 的區(qū)別
31DE8088-3002-45D9-AC2F-AA7357DC6405.png
2.2 localStorage
Window.localStorage.setItem('name', 'kris')
Window.localStorage.getItem('name') // kris
2.3 sessionStorage
Window.sessionStorage.setItem('name', 'kris')
Window.sessionStorage.getItem('name') // kris
2.4 離線存儲
- 離線存儲指HTML5提供一種緩存機制，使得基于 web 的應用程序可以離線運行跑杭。
- 離線存儲的實現(xiàn)方式是為應用頁面中的 <html> 元素增加 manifest 屬性铆帽，值為一個緩存清單文件(后綴為 appcache)
如：
<html manifest="example.appcache">
</html>
- 這個緩存文件里有一系列的 URL 列表，這些 URL 分別指向頁面中的 html德谅、css爹橱、javascript、圖片等相關內(nèi)容
三、多媒體 media
3.1 audio 和 video
- HTML5 增加了 <video> 和 <audio> 標簽愧驱，使得開發(fā)者可以直接使用 HTML 在 web 中嵌入音頻和視頻
- HTML5 還增加了一些 js 的 api慰技，用于對音頻和視頻進行控制，如：
function dealVideo() {
let video = document.getElementByTagName('video')
if (video.paused) {
video.play()
} else {
video.paused()
}
}
3.2 實時通信
- WebRTC 中的 RTC 指實時通信组砚，它是一種支持在瀏覽器客戶端之間語音/視頻交流的技術吻商。
- WebRTC 組件通過 Javascript API 獲得，包含網(wǎng)絡流 API糟红， 點對點連接 API艾帐， 數(shù)據(jù) API 等
3.3 Camera API
- 通過 Camera API，可以使用手機攝像頭拍照盆偿，后將拍的照片發(fā)送給當前網(wǎng)頁柒爸。
- 這些操作主要通過一個 input 元素實現(xiàn)，其中 type 屬性必須為 file事扭，如：
<input type="file" accept="image/*">
四捎稚、3D & 圖像
4.1 canvas
- canvas 是一個位圖畫布
- canvas 是一個可以使用 js 來繪制圖形的 html 元素，可以實現(xiàn)繪制圖表求橄、動畫等
4.2 webGL
- WebGL 是一個 javascript API今野，用于在任何兼容的瀏覽器中呈現(xiàn)交互式3D和2D圖形，無需使用插件
- WebGL 也可在 <canvas> 元素中使用
五罐农、設備訪問
5.1 使用地理位置定位
- HTML5 允許請求位置信息条霜，若用戶同意，瀏覽器就會返回位置信息涵亏。
- 地理位置 API 通過 navigator.geolocation 提供蛔外，如果該對象存在，那么地理位置服務可用
獲取地理位置舉例：
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude, position.coords.longitude)
})
5.2 檢測設備方向
- 基于 web 的設備越來越多地能夠確定設備的方向
- 有兩種 js 事件負責處理設備方向信息：deviceorientation 和 devicemotion
- deviceorientation 會在加速度傳感器檢測到設備在方向上發(fā)生變化時觸發(fā)
- devicemotion 會在加速度發(fā)生改變時觸發(fā)
5.3 觸控事件
- 觸摸事件提供了在觸摸屏或在觸摸板上解釋手指(或觸控筆)活動的能力
