【HTML5 WebSocket】WebSocket对象特性和方法

2021-06-10 16:02

阅读:540

《HTML5 WebSocket权威指南》学习笔记&3

WebSocket方法的对象特性

1. WebSocket方法


a. send方法

send方法用于在WebSocket连接建立后,client向服务端发送消息。

可分为发送两种消息,一种是普通文本信息,一种是二进制数据。

需注意的是,send方法必须在连接建立以后才干使用。也就是在onopen里使用才不会出错。

发送普通消息

这个比較简单,在上一篇学习WebSocket事件时就用到了,仅仅须要send(message)就可以。

发送二进制数据

在Web应用中,我们还须要发送图片、音频、视频等二进制数据,这就须要Blob类的配合。Blod是二进制大对象。

以下是一个综合演示样例:

   ws = WebSocket("ws://echo.websocket.org/echo",[]);

    /*
    open事件触发表明协议握手成功,WebSocket以及准备好接收和发送数据
    */
    ws.onopen = function(e){
        console.log("start..");
        //发送文本消息
        ws.send("Hello World");
        //发送二进制对象
        var data = new Blob("blob object");
        ws.send(data);
    }

   /*
    message消息在client接收到消息时触发
    */
    ws.onmessage = function(e){
        console.log("收到信息例如以下:");
        if(typeof e.data == "string"){
            console.log("文本消息:",e,e.data);
        }else{
            console.log("非文本消息:",e,e.data);
        }
        ws.close();
    }

b. close方法|

close方法用于关闭连接,它能够不带參数表示直接关闭。也能够带上两个參数(code,reason)向服务端提交关闭连接的原因:
    1.  ws.close()
    2.  ws.close(1000,"close normally")

2. 对象特性


在学习了WebSocket的方法后,接下来学习一下WebSocket提供的对象特性,这些特性提供了关于WebSocket对象的很多其它信息:readyState、bufferedCount
和protocol。英文稍好的话事实上由字面就可知道这三个对象分别相应着WebSocket的什么特性。

以下一一介绍一下:

a. readyState

WebSocket通过仅仅读特性readyState报告其连接状态。连接状态共同拥有四个,使用者能够依据这个特性推断此时的连接状态,然后再进行下一步行动。以下是四个连接状态列表:

特性常量 取值 状态
WebSocket.CONNECTING 0 连接正在进行中。但还未建立
WebSocket.OPEN 1 连接已建立。消息能够開始传递
WebSocket.CLOSING 2 连接正在进行关闭
WebSocket.CLOSED 3 连接已关闭

以下是演示样例:

    var ws = new WebSocket("ws://echo.websocket.org/echo",[]);
    if(ws.readyState == WebSocket.CONNECTING){
        console.log("连接正在建立");
    }
    ws.onopen = function(e){
        if(ws.readyState == WebSocket.OPEN){
            console.log("连接已打开!

"

); } }

b. bufferedAmount

当client向服务端发送大量数据时。浏览器会先将数据缓存到浏览器的发送队列里,然后逐段地向server发送。bufferedAmount这个特性就是告诉client如今队列里还有多少已经缓存了但没发送的数据。

示比例如以下:

var limit = 10240;
var ws = new WebSocket("ws://echo.websocket.org",[]);

/*
open事件触发表明协议握手成功,WebSocket以及准备好接收和发送数据
*/
ws.onopen = function(e){
    console.log("start..");
    setInterval(function(){
        if(ws.bufferedAmount var a = []
            for(var i=0;i1000;i++){
                a.push(1);
            }
            ws.send(a);
        }
    },10);
    setInterval(function(){
        console.log(ws.bufferedAmount);
    },500)
}

c. protocol

protocol特性包括在打开握手期间WebSocketserver选择的协议名,换句话说,protocol特性告诉你特定WebSocket上使用的协议。

上一篇:webpack安装

下一篇:HTML-CSS相关(2)


评论


亲,登录后才可以留言!