HTML5之websocket

时间 2019-11-24

标签 html5 html websocket 栏目 HTML5 繁體版

原文原文链接

初识websocket
websocket的应用：构造函数、常量、属性、方法
websocket应用示例

1、初识websocket

1.1Websocket是一种网络协议，是在HTTP基础上作出一些优化的协议，与HTTP无直接关系。WebSocket是HTML5开始提供的一种在单个TCP链接上进行全双工通信的协议。html

1.2HTTP协议相关回顾：web

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

经过webSocket能够创建一个链接只须要一次握手，而后，浏览器和服务器之间就能够直接进行数据交互。这就意味着服务器能够时实向客户端发送数据，而不须要重复的经过客户端来请求。网络

1.4websocket请求报文：socket

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

2、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;（链接已关闭或者没有链接成功）

(关于示例应用，有时间再来补充)