web前端优秀程序员分享WebSocket协议，WebSocket协议介绍一。WebSocket协议介绍1. WebSocket是html5规范新引入的功能。用于解决浏览器与后台服务器的双向通信问题。采用WebSocket技术，后台可以随时向前端推送消息，保证前后台状态的统一。在传统的无状态HTTP协议中，这是“做不到的”。 2。在WebSocket出现之前，传统的从服务器向浏览器推送消息的技术有：ajax、flash、comet、javaapplet等，这些技术无一例外都是采用longroundrobin，即每请求一次后台在一段时间内获取最新状态。长轮询的方式实现起来容易，但是效果也差。频繁盲目调用后台会带来不必要的开销，实时性得不到保证。如果后台有更新，前端要等到下一次轮询才会知道。 3。WebSocket协议支持在服务器和浏览器之间建立长连接。双方可以随时向对方发送数据，而不是由客户端控制的问答方式。在实现推送功能时，服务端主要是向客户端发送数据。 4。以前的网站为了实现推送功能，都是采用轮询的方式。所谓轮询就是在特定的时间间隔（比如1秒）从浏览器向服务器发送一个Http请求，然后服务器将最新的数据返回给客户端浏览器，从而给人一种真实的错觉服务器时间推送。由于HttpRequest的Header（请求头）很长，而传输的数据可能很短，只占用一点点，所以每次请求消耗的带宽大部分消耗在Header上。从网上的资料得知，有一种改进的轮询方式叫做Comet，使用的是Ajax。不过，这种技术虽然可以实现双向通信。二。WebSocket原理 基于longroundrobin（polling）和websocketpush的浏览器（browser）和服务器（Server）的交互对比图如下： 由于WebSocket协议是基于http协议的，所以两者之间有很多相似之处。实际上，在使用websocket协议时，浏览器与服务器首先建立http连接，然后将协议由http转为websocket。协议转换的过程称为握手（handshake），意思是服务端和客户端都同意建立websocket协议。需要注意的是，由于websocket是一个新的协议，只有浏览器和web服务器都支持的情况下才能成功建立连接。一般情况下，当连接建立后，浏览器会向服务器发送一个HTTP请求，通过包含一些额外的信息来表明它希望将协议从HTTP转换为WebSocket。这个附加信息其实就是一个请求头的更新，如下图：熟悉HTTP的童鞋们可能会发现这个类似HTTP的握手请求里面有这么多东西。这是WebSocket的核心，告诉Apache、Nginx等服务器：注意，我发起的请求必须使用WebSocket协议，请帮我找对应的助手来处理~而不是老土的HTTP。首先，Sec-WebSocket-Key是一个Base64编码的值，由浏览器随机生成，告诉服务器：Peat，别骗我，我要验证你是不是真的WebSocket小助手。那么，Sec_WebSocket-Protocol就是一个用户自定义的字符串，用来区分同一个URL下不同服务所需要的协议。简单理解：今晚我要服务A，别搞错了~最后，Sec-WebSocket-Version告诉服务端使用的WebSocketDraft（协议版本）。一开始WebSocket协议还处于Draft阶段，各种奇奇怪怪的协议，还有很多奇怪的东西，为什么Firefox和Chrome不使用同一个版本等等。WebSocket协议太多了一开始，这是个大问题。不过现在好了，搞定了~大家用的都是同一个版本：服务员，我要13岁的→_→然后服务器会返回如下内容，表示接受请求，WebSocket建立成功！可以在以下网址查看目前支持websocket协议的主流浏览器及版本： 支持html5的浏览器一般都会提供一个内置的js对象Websocket，开发者可以使用这个对象与服务器建立websocket连接.具体在Firefox中，这个对象在Firefox中是MozWebSocket。 可以通过下面的js代码查看浏览器是否支持websocket Websocket对象也提供了几个回调方法 //创建连接成功时回调 myWebSocket.onopen=function(evt){alert("连接打开...");}; //收到服务器消息回调 myWebSocket.onmessage=function(evt){alert("ReceivedMessage:"+evt.data);}; //连接关闭时的回调 myWebSocket.onclose=function(evt){alert("Connectionclosed.");};
