一、通信 communication
1.1 WebSockets
WebSockets 是什么？
WebSockets 是一个应用层协议，与 http 协议一样，是基于 TCP 协议的。
与 http 协议的不同之处在于：它是一个双向协议，即既可以从客户端发起请求，也可以从服务端发起请求。而 http 是只能从客户端发起请求的。WebSockets 有什么作用？
从 WebSockets 与 http 协议的不同可以看出，它非常适用于需要客户端与服务端双向发起请求的业务场景。比如说：直播，实时聊天等如何使用 WebSockets？
客户端示例：
let ws = new WebSocket('wss://12.233.233.40')
// 开启webSocket
ws.onopen = function(msg) {
// 发送信息给服务端
ws.send('hello')
}
// 接收服务端信息
ws.onmessage = function(msg) {
console.log('Received message: ' + msg)
// 关闭websocket
ws.close()
}
1.2 跨域通信机制
-
为什么需要跨域通信机制?
- 浏览器有一个“同源政策(same-origin policy)”，限制非同源时，无法获取Cookie、localStorage 等数据、无法获取 dom、无法发送 ajax 请求
- 这种方式会使得一些合理的用途也受到影响。如：两个网站一级域名相同，二级域名不同，也不属于同源，无法共享信息
- 因此需要有一种安全的跨域通信机制来解决这个问题
如何实现跨域通信？
过去已经有一些跨域通信的实现方式，HTML5 又给出了一个解决方案，一个api：postMessage
这是客户端的一个api，允许来自不同源的脚本通信，实现跨域消息传递。如：
发送message：
// postMessage接收两个参数：msg(消息内容)，origin(目标窗口的源，协议+主机+端口号)
window.frame[0].postMessage('hello', 'http://10.283.27.44')
接收message：
// 发送消息会触发 message 事件，监听这个事件就可以获取到发送的 msg
window.addEventListener('message', function(res){
let data = res.data
console.log(data);
})
二、离线 & 存储 storage
2.1 cookie、localStorage、sessionStorage 的区别
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 的应用程序可以离线运行。
- 离线存储的实现方式是为应用页面中的 <html> 元素增加 manifest 属性，值为一个缓存清单文件(后缀为 appcache)
如：
<html manifest="example.appcache">
</html>
- 这个缓存文件里有一系列的 URL 列表，这些 URL 分别指向页面中的 html、css、javascript、图片等相关内容
三、多媒体 media
3.1 audio 和 video
- HTML5 增加了 <video> 和 <audio> 标签，使得开发者可以直接使用 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 获得，包含网络流 API， 点对点连接 API， 数据 API 等
3.3 Camera API
- 通过 Camera API，可以使用手机摄像头拍照，后将拍的照片发送给当前网页。
- 这些操作主要通过一个 input 元素实现，其中 type 属性必须为 file，如：
<input type="file" accept="image/*">
四、3D & 图像
4.1 canvas
- canvas 是一个位图画布
- canvas 是一个可以使用 js 来绘制图形的 html 元素，可以实现绘制图表、动画等
4.2 webGL
- WebGL 是一个 javascript API，用于在任何兼容的浏览器中呈现交互式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 会在加速度传感器检测到设备在方向上发生变化时触发
- devicemotion 会在加速度发生改变时触发
5.3 触控事件
- 触摸事件提供了在触摸屏或在触摸板上解释手指(或触控笔)活动的能力
