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

最新推荐文章于 2024-05-12 16:02:14 发布

恺风

最新推荐文章于 2024-05-12 16:02:14 发布

阅读量1.4k

点赞数 1

分类专栏： JAVA 读书笔记愷风（Wei）之Java for Web学习笔记

本文链接：https://blog.csdn.net/flowingflying/article/details/65938959

版权

读书笔记同时被 3 个专栏收录

256 篇文章 10 订阅

订阅专栏

JAVA

150 篇文章 2 订阅

订阅专栏

愷风（Wei）之Java for Web学习笔记

143 篇文章 193 订阅

订阅专栏

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）

恺风

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Java for Web学习笔记（四五）：WebSocket（2）JavaScript Client

HTML5提供支持HTML5提供WebSocket。因此支持HTML5的浏览器均能支持。我们提供一个小例子，浏览器连接server，建立websocket连接，发送Hello消息，server收到消息后，返回一个Hello，同时每个1秒发送一个消息，发送3次后，server关闭连接。小例子代码完整代码如下，我们再分片段学习。Chapter 10: WebSo
复制链接

扫一扫

专栏目录