HTML5提供支持
HTML5提供WebSocket。因此支持HTML5的浏览器均能支持。
我们提供一个小例子,浏览器连接server,建立websocket连接,发送Hello消息,server收到消息后,返回一个Hello,同时每个1秒发送一个消息,发送3次后,server关闭连接。
小例子代码
完整代码如下,我们再分片段学习。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Chapter 10: WebSocket</title>
<script language="javascript" type="text/javascript">
var output;
function init() {
output = document.getElementById("output");
}
function testWebSocket(){
var connection = new WebSocket('ws://' + window.location.host + '/chapter10/test/mytest');
connection.onopen = function(/*event*/) {
writeToScreen('CONNECTED');
connection.send("Hello");
}
connection.onclose = function(event) {
if(!event.wasClean)
writeToScreen('<span style="color: red;">Abnormal disconnected:</span> '
+ event.code + ': ' + event.reason);
else
writeToScreen('DISCONNECTED');
}
connection.onerror = function(event) {
writeToScreen('<span style="color: red;">ERROR:</span> '+ event.data);
}
connection.onmessage = function(event) {
writeToScreen('<span style="color: blue;">RESPONSE: '+ event.data+'</span>');
}
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
</head>
<body>
<a href="javascript:void 0;" οnclick="testWebSocket();">Test WebSocket</a><br />
<div id="output"></div>
</body>
</html>
例子很短,除了testWebScoket()之外,其余的是提供一个添加内容的显示。
发起WebSocket
/* 如果是本地测试,下面的语句将发起一个URL为ws://localhost:8080/chapter10/test/mytest的webSocket。*/
var connection = new WebSocket('ws://' + window.location.host + '/chapter10/test/mytest');
/* 同时给出Sec-WebSocket-Protocol: chat */
var connection = new WebSocket('ws://www.example.com/chat', 'chat');
/* 设置Sec-WebSocket-Protocol: chat.v1,char.v2 */
var connection = new WebSocket('ws://www.example.com/chat', {'chat.v1','chat.v2'});
状态触发
WebSocket提供readyState状态来获取连接状态,分别是CONNECTING (0), OPEN (1),CLOSING (2) 或 CLOSED (3)if(connection.readyState == WebSocket.OPEN) {
//do something
}
但很少采用这种方式,一般使用状态触发,也就是例子中的:
//onopen是readyState从CONNECTING转为OPEN时触发,参数event没有任何实质有效的信息,可以不写
connection.onopen = function(event) { }
/* onclose是状态readyState从CLOSING转包为CLOSED时触发,event包括wasClean, code,和reason。
code可以在 RFC 6455的7.4中查看(http://tools.ietf.org/html/rfc6455#section-7.4)
code=1000是正常,其他均是异常
*/
connection.onclose = function(event) { }
/* onerror的event的data是错误的对象,通常是String, error只包括客户端的错误,protocol errors和连接关闭的错误 */
connection.onerror = function(event) { }
/* onmessage的event也包含data属性,对于data:
如果是消息是text就是String,
如果消息是二进制,如果webSocket的binaryType是blob则是Blob;如果binaryType是arraybuffer则是Arraybuffer
我们可应在创建WebSocket对象后设置binaryType,如:
var connection = new WebSocket('ws://www.example.net/chat');
connection.binaryType = 'arraybuffer';
*/
connection.onmessage = function(event) { }
发送和关闭
WebSocket对象提供send()和close()两个方法进行发送和关闭。
对于send(),内容可以是string, Blob, ArrayBuffer或者ArrayBufferView。下面是一个browser定期发送消息的例子
/* send: 单一参数,可以是 string, Blob, ArrayBuffer, or ArrayBufferView
* WebSocket有一个参数bufferedAmount表示之前的send仍有多少数据等待发送给server(TCP的特性),
* 我们可以选择不理会,继续send,或者等待上次全部send完再send。
* 下面的例子是定期每50ms发送更新内容,如果webSocket的状态发生变化,停止定期处理,如果webSocket上次仍有内容在等待发送,就再等50ms。
*/
connection.onopen = function() {
var intervalId = window.setInterval(function() {
if(connection.readyState != WebSocket.OPEN) {
window.clearInterval(intervalId);
return;
}
if(connection.bufferedAmount == 0)
connection.send(updatedModelData);
}, 50);
}
close可以带有可选的close code,缺省为1000(正常关闭),和一个可选的string reason(第二个参数,缺省为blank)