HTML5之websocket
- 初识websocket
- websocket的应用：构造函数、常量、属性、方法
- websocket应用示例
一、初识websocket
1.1Websocket是一种网络协议，是在HTTP基础上做出一些优化的协议，与HTTP无直接关系。WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。
1.2HTTP协议相关回顾：
HTTP（超文本传输协议）：规定了web浏览器如何从web服务器获取文档和向web服务器提交表单内容，以及web服务器如何响应这些请求和提交返回给浏览器。
HTTP的第一个版本叫做HTTP/0.9是一种为互联网原始数据传输服务的简单协议。由RFC1945[6]定义的HTTP/1.0进一步完善了这个协议。它允许消息以类MIME消息的格式传送，它包括传输数据的辕信息和对请求/响应语义的修饰。
HTTP/1.0没有充分考虑到分层代理，缓存，以及持久连接和虚拟主机的需求的影响。
HTTP/1.1版本对1.0版本做了优化，开始支持长连接和缓存。
1.3为什么需要webSocket？
因为HTTP协议有一个缺陷：通信只能由客户端发起。服务器端不能时实发送最新数据给客户端，如果遇到客户端需要时实获取服务器上的最新数据，就需要使用Ajax轮训来请求最新数据。这种实现方案显然要消耗大量的网络请求资源，对于客户端的定时器触发轮训也是比较大的性能消耗，而服务器还需要处理很多多余的网络请求。
通过webSocket可以建立一个连接只需要一次握手，然后，浏览器和服务器之间就可以直接进行数据交互。这就意味着服务器可以时实向客户端发送数据，而不需要重复的通过客户端来请求。
1.4websocket请求报文：
Request Headers（请求头）
Accept-Encoding:gzip,deflate,sdch（接受编码格式）
Accept-Language:zh-CN,zh,q=0.8（接受语言）
Cache-Control:no-cache（缓存控制：无缓冲）
Connection:Upgrade（连接）
Host:echo.websocket.org（请求的服务器地址：服务器域名/IP 端口）
Origin:file://（请求发起端）
Pragma:no-cache（报文指令）
Sec-WebSocket-Extenslons:permessage-deflate;client_max_window_bits（用户定义的字符串，用来区分同RUL下，不同服务所需要的协议）
Sec-WebSocket-key:8DtPaH9DH2Qsw6BK0q6FCw==（随机字符串，服务器端使用这个数据构造出一个SHA-1的信息摘要。把“Sec-WebSocket-key”加上一个特殊字符串，然后计算SHA-1摘要，之后进行BASE-64编码，将结果作为“Sec-WebSocket-Accept”头的值，返回给客户端。这样操作，可以尽量避免普通HTTP请求被误认为Websocket协议）
Sec-WebSocket-Version:13（表示支持的WebSocket版本，RFC645要求使用的版本是13，之前草案的版本均应当弃用）
Upgrade:websocket（表示希望升级到WebSocket协议）
User-Agent:Mozilla/5.0...（用户代理）
1.5WebSocket特点：
(a)建立在TCP协议之上，服务器端的实现比较容易。
(b)与HTTP协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器。
(c)数据格式比较轻量，性能开销小，通信高效。
(d)可以发送文本，也可以发送二进制数据。
(e)没有同源限制，客户端可以与任意服务器通信。（就是说可以通过websocket实现跨域）
(f)协议标识符为ws（如果加密为wss）服务器网址就是url
1.6浏览器兼容性：
Chrome
Firefox
IE>=10
Sarafi>=6
Android>=4.4
iOS>=8
二、websocket的应用
这里有一篇不错的教程：https://www.cnblogs.com/jingmoxukong/p/7755643.html
2.1WebSocket客户端API
var Socket = new WebSocket(url, [protocol]);
URL：指定连接的URL。
protocol：可选，指定可接受的子协议。
2.2WebSocket的属性：
WebSocket.binaryType：使用二进制的数据类型连接。
WebSocket.bufferedAmount：未发送至服务器的字节数。
WebSocket.extensions：服务器选择的扩展。
WebSocket.onclose：指定连接关闭的回调函数。
WebSocket.onerror：用于指定连接失败后的回调函数。
WebSocket.onmessag：指定当从服务器接受到信息时的回调函数。
WebSocket.onopen：指定连接成功后的回调函数。
WebSocket.readyState：当前连接状态。
WebSocket.url：WebSocket的绝对路径。
2.3WebSocket的方法：
WebSocket.close(code,reason)：关闭当前连接
参数code:一个数字状态码，他解释了连接关闭的原因。如果没有传递这个参数，默认使用1005。关于状态码可以了解：https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent#Status_codes
参数reason:返回关闭原因，字符串类型，UTF-8编码的字符串不能超过123个字节。
WebSocket.send(data)：向服务器发送数据
参数data:可以是USVString（文本字符串）、ArrayBuffer（数组对象发送的底层二进制数据）、Blob类型（将Blob中的原始数据以二进制传输）、ArrayBufferView（二进制帧的形式发送任何JavaScript类数组对象）。
2.4简单的使用websocket
1 var socket = new WebSocket('ws://echo.websocket.org/'); 2 //ws://echo.websocket.org/ 官方开发测试接口，向它发送什么数据它返回什么数据 3 socket.onopen = function(){ //连接成功触发 4 socket.send('hello'); 5 } 6 socket.onmessage = function(e){ //接收到服务器响应触发 7 console.log('message'); 8 console.log(e); 9 console.log(e.data); 10 socket.close(); //关闭连接 11 } 12 socket.onlose = function(e){ //关闭连接后触发 13 console.log('close'); 14 console.log(e); 15 } 16 socket.onerror = function(){ //出现错误时触发 17 console.log('erre'); 18 }
2.5websocket.readyState当前连接状态与WebSocket常量
WebSocket.CONNECTING = 0；（正在连接中）
WebSocket.OPEN = 1；（已经连接并且可以通讯）
WebSocket.CLOSING = 2;（连接正在关闭）
WebSocket.CLOSED = 3;（连接已关闭或者没有连接成功）
(关于示例应用，有时间再来补充)
