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