Java for Web学习笔记（四五）：WebSocket（2）JavaScript Client

来源：互联网发布：java最新面试题及答案编辑：程序博客网时间：2024/06/05 07:42

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;" onclick="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）

相关链接：我的Professional Java for Web Applications相关文章

0 0