HTML5 WebSocket API

  Web Sockets是新一代的双向通信技术的Web应用程序运行在一个单一的插座，通过HTML 5兼容的浏览器的JavaScript接口暴露。
  一旦你得到一个Web服务器的网络连接，你可以把数据从浏览器到服务器通过调用一个send()方法和接收数据从服务器到浏览器的onmessage事件句柄。为了建立WebSocket通信，客户端和服务器在初始握手时，将HTTP协议升级到WebSocket协议。
现在WebSocket服务器有很多，还在开发中的更多。有一下几种：

• Asp.Net SignalR：优先使用WebSocket,在不支持的情况下启用长连接
• Kaazing WebSocket Gateway：一种基于Java的WebSocket网关。
• mod_pywebsocket：一种基于Python的Apache HTTP服务器扩展。
• Netty：一种包含WebSocket的Java框架。
• node.js：一种驱动多个WebSocket服务器的服务器端JavaScript框架。

下面是创建一个新的WebSocket对象的API。

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

这里的第一个参数，网址，指定要连接的网址。第二个属性，协议是可选的，如果存在，指定一个子协议，服务器必须支持连接成功。

属性：

1.readyState 

ReadOnly属性readyState代表连接的状态.

ws.CONNECTING：0---尚未建立简介；

ws.OPEN：1---表示连接建立和通信是可能的；

ws.CLOSING：2--表示连接正在通过关闭握手；

ws.CLOSED：3--表示连接已关闭或无法打开；

2.bufferedAmount

ReadOnly属性bufferedamount代表UTF-8文本已列队send()方法使用的字节数。

3.binaryType  发送数据的类型，默认blob

4.url  当前建立简介的服务器url地址

5.protocol 指定的协议名称，默认为空

方法：

1.send(data);

使用建立的链接发送数据

2.close([Number code],[String reason]);

中止现有链接

事件：

1.onopen,当建立链接成功后触发

2.onmessage ，当接收到服务器发送数据时触发

3.onerror， 当通信中出现任何错误时，此事件会发生。

4.onclose,当连接关闭时发生此事件。

实例1，判断浏览器知否支持WebSocket

测试结果说明：IE10及以上浏览器支持，FF，Google也支持

if (window.WebSocket) {
    //console.info(window.WebSocket);   //function WebSocket() { [native code]}
    var url = 'ws://localhost:55373/upload1.ashx';
    var ws = new WebSocket(url);
    console.info(ws);
    console.info(ws.CONNECTING);//0
    console.info(ws.OPEN); //1
    console.info(ws.CLOSING); //2
    console.info(ws.CLOSED); //3
    //ws.protocol  //协议名称
    //ws.url       //服务器url地址
    //ws.binaryType // 发送数据类型 默认blob
    //ws.bufferedAmount //当前缓冲区字节大小
} else {
    alert('不支持WebSocket');
}

实例2，

var url = 'ws://localhost:55373/upload1.ashx';
var ws = new WebSocket(url);
//ws.bufferedAmount  //表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。
ws.onopen = function (e) {
    console.log('链接打开');
    //e  Event 对象
    console.info(e);
    //e.target  --- 当前事件触发对象，也就是 new的WebSocket 对象
    ws.send('hello ws,当前协议：' + e.target.protocol);
}
ws.onmessage = function (e) {
    //e MessageEvent 对象
    //e.data 从服务器发送过来的数据
    console.info(e);
    console.info('接受到数据：' + e.data);
}
ws.onclose = function (e) {
    console.info(e);
    console.log('closed');
}
ws.onerror = function (e) {
    console.info(e);
    console.log('发生异常');
}

更多：

demo源代码

HTML5 WebSocket实例（一）