浅谈WebSocket技术

WebSocket是H5新增的一个通讯协议，这个协议使得客户端与服务器之间的数据交互更为简单，并允许服务器主动向客户端发送数据。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
现在大家大多数都在用ajax技术进行数据交互，但用ajax技术浏览器每获取一次数据就需要发送http请求向服务器获取数据，这种传统的模式下，显然有很多缺点，比如说浏览器发送的http请求可能包含较长的请求头，而真正有效的数据可能是只有一小部分，所以就大大浪费了带宽资源。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求后，客户端和服务器端就可以通过 TCP 连接直接交换数据，我想这也是很多人都乐意看到的。

下面是创建 WebSocket 对象，第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议

var Socket = new WebSocket(url, [protocol] );

如果使用了以上代码创建了 Socket 对象，会看到readyState 这个只读属性，表示当前连接状态：
0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。

下面来看看WebSocket 的事件：

open		连接建立时触发
message		客户端接收服务端数据时触发
error		通信发生错误时触发
close		连接关闭时触发

而使用连接发送数据，就需要调用Socket.send()方法来发送数据，关闭连接则是Socket.close()

为了让客户端和服务器两者之间建立联系，客户端首先向服务器发起一个http请求，这个请求并非普通http请求，里面包含一些附加头信息，其中"Upgrade: WebSocket"表示这是一个申请协议升级的 HTTP 请求，这样两者之间就建立连接，如果不是人为主动断开，则一直会进行连接。

测试一下你的浏览器支持不支持WebSocket，如：

 function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }

<div id="sse">
    <a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>