一、websocket概要:
websocket是基于TCP传输层协议实现的一种标准协议(关于网络协议,可以看看文末的图片),用于在客户端和服务端双向传输数据
传统的客户端想要知道服务端处理进度有两个途径:
1)通过ajax不断轮询,由于http的无状态性,每次轮询服务器都需要去解析http协议,对服务器压力也很大
2)采用long poll的方式,服务端不给客户端反馈,客户端就一直等待,服务就一直被挂起,此阶段一直是阻塞状态
而当服务器完成升级(http-->websocket)后,上面两个问题就得到解决了:
1)被动性,升级后,服务端可以主动推送消息给客户端,解决了轮询造成的同步延迟问题
2)升级后,websocket只需要一次http握手,服务端就能一直与客户端保持通信,直到关闭连接,这样就解决了服务器需要反复解析http协议,减少了资源的开销
二、websocket通信过程:
websocket目前基本主流浏览器都已经支持,IE10以下不支持。
1、建立连接
在客户端,new WebSocket实例化一个新的WebSocket客户端对象,连接类似 ws://yourdomain:port/path 的服务端 WebSocket URL, WebSocket 客户端对象会自动解析并识别为 WebSocket 请求,从而连接服务端接口,执行双方握手过程,客户端发送数据格式类似:
1)客户端请求报文:
GET / HTTP/1.1 Upgrade:websocket #line1 Connection:Upgrade #line2 :与http请求报文比,多了line1和line2这两行,它告诉服务器此次发起的是websocket协议,而不是http协议了,记得要升级哦 Host:example.com Origin:http://example.com Sec-WebSocket-Key:sN9cRrP/n9NdMgdcy2VJFQ== # line3:这个是浏览器随机生成的一个base64加密值,提供基本的防护,告诉服务器,我有提供的密码的,我会做验证的,防止恶意或无意的连接 Sec-WebSocket-Version:13 #line4 :告诉服务器使用的websocket版本,如果服务器不支持该版本,会返回一个Sec-WebSocket-Versionheader,里面包含服务器支持的版本号
客户端创建websocket连接
var ws = new websocket("ws:127.0.0.1:8000")
完整客户端代码如下:
- <script type="text/javascript">
- var ws;
- var box = document.getElementById("box");
-
- function startWS(){
- ws = new websocket("ws:127.0.0.1:8000");
- ws.onopen = function(msg){
- console.log("websocket opened!");
- }
- ws.onomessage = function(message){
- console.log("receive message:"+message.data);
- box.insertAdjacentHTML("beforeend", "<p>"+message.data+"</p>");
- }
- ws.onerror = function(err){
- console.log("error:"+err.name+err.number);
- }
- ws.onclose = function(){
- console.log("websocket closed!")
- }
- }
-
- function sendMsg(){
- console.log("sending a message...");
- var text = document.getElementById("text");
- ws.send(text.value);
- }
-
- window.o