zoukankan      html  css  js  c++  java
  • 【HTML5 WebSocket】WebSocket对象特性和方法

    《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 连接已关闭
    <br>
    

    以下是演示样例:

        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 < limit){
                var a = []
                for(var i=0;i<1000;i++){
                    a.push(1);
                }
                ws.send(a);
            }
        },10);
        setInterval(function(){
            console.log(ws.bufferedAmount);
        },500)
    }
    

    c. protocol

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

  • 相关阅读:
    declare handler 声明异常处理的语法
    mysql存储过程获取sqlstate message_text
    mongoTemplate操作内嵌文档
    mysql索引之七:组合索引中选择合适的索引列顺序
    mongoDB的操作总结
    explain之三:MYSQL EXPLAIN语句的extended 选项学习体会,分析诊断工具之二
    状态模式
    代码重构----使用java有限状态机来消除太多的if else判断
    断路器(CircuitBreaker)设计模式
    断路器之一:Hystrix 使用与分析
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/7295670.html
Copyright © 2011-2022 走看看