每周分享一 之 webSocket

Posted 2020-10-09

一：什么是webSocket ？

　　webSocket是html5出的新协议，WebSocket协议支持，在受控环境中运行不受信任代码的客户端与选择了该代码通信的远程主机之间进行双向通信。

　　简单翻译一下这段话：浏览器发出webSocket请求，服务器做出回应，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

二：相对于传统的http请求的优点

　　熟悉http协议的都知道，服务器是被动的，如果客户端想要多次获取数据就需要不断的向服务器发起request请求，服务器返回response响应，之后就关闭连接，但在http1.1中得到了改进，使得有一个keep-alive，也就是说，在一个HTTP连接中，可以发送多个Request，接收多个Response。但是请记住 Request = Response ， 在HTTP中永远是这样，也就是说一个request只能有一个response。而且这个response也是被动的，不能主动发起。

　　webSocket协议解决了这个问题，当服务器完成协议升级后（HTTP->Websocket），服务端就可以主动推送信息给客户端啦。而且还解决了非常消耗资源的问题。

　　为什么传统的http请求回非常消耗资源呢？

　　其实我们所用的程序是要经过两层代理的，即HTTP协议在nginx等服务器的解析下，然后再传送给相应的Handler（php等）来处理。在Nginx等服务器解析素的还是非常快的，但是在Handler部分处理时往往速度是非常慢的。

三：解析一次完整的webSocket握手

由浏览器发送的webSocket请求：

1. 　　GET /chat HTTP/1.1
2. 　　Host: server.example.com
3. 　　Upgrade: websocket
4. 　　Connection: Upgrade
5. 　　Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
6. 　　Sec-WebSocket-Protocol: chat,superchat
7. 　　Sec-WebSocket-Version: 13
8. 　　Origin: http://example.com

　　其中　　

　　　　　　Upgrade: websocket

　　　　　　Connection: Upgrade

　　这两句话声明这是一个webSocket请求，告诉Nginx，Apache等服务器使用webSocket协议。

　　　　Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
　　　　Sec-WebSocket-Protocol: chat, superchat
　　　　Sec-WebSocket-Version: 13

Sec-WebSocket-Key 是一个Base64 encode的值，这个是浏览器随机生成的，用来发送给服务器，用来验证是否是真的webSocket请求。
Sec_WebSocket-Protocol 是一个用户定义的字符串，用来区分同URL下，不同的服务所需要的协议。
Sec-WebSocket-Version 是告诉服务器所使用的Websocket Draft（协议版本）。

服务器收的webSocket后的响应：

1. 　　HTTP/1.1 101 Switching Protocols
2. 　　Upgrade: websocket
3. 　　Connection: Upgrade
4. 　　Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
5. 　　Sec-WebSocket-Protocol: chat

服务器收到请求后依然返回这两句话

　　　Upgrade: websocket　　Connection: Upgrade

告诉客户端即将升级的是Websocket协议。

Sec-WebSocket-Accept 这个则是经过服务器确认，并且由服务器加密过后返回的的 Sec-WebSocket-Key。
Sec-WebSocket-Protocol 则是表示最终使用的协议。

四：一个实现webSocket的实例

语法：

var ws = new WebSocket(url, [protocol] );
ws.onopen = function(){
　　"webSocket已连接上，使用send（）方法发送数据"
　　ws.send(‘发送数据‘);
}
ws.onmessage = function(evt){
　　"接收数据"
　　var reseved_mes = evt.data;
}
ws.onclose = function(){
　　"关闭webSocket"
}

至于怎么在不支持Websocket的客户端上使用Websocket。。答案是：不能