zoukankan      html  css  js  c++  java
  • HTML5 WebSocket 权威指南 学习一 (第二章 WebSocket API)

    WebSocket 协议两种URL方案
      ws 客户端和服务器之间的非加密流量
      wss 客户端和服务器之间的加密流量

    WebSocket Secure 表示使用传输层安全性(SSL)的WebSocket连接 采用HTTPS安全机制来保证HTTP连接安全

    1.WebSocket 的构造函数

    var ws = new WebSocket("ws://www.websocket.org");
    

      

    2.WebSocket 对象调度4个不同的事件 open message error close
      处理方法:和所有WebAPI一样 用on<事件名称> 处理程序属性
    a.WebSocket事件 open
      定义:一旦服务器相应了WebSocket的连接请求,open事件触发并建立一个连接。open事件对应的回调函数称为onopen
    代码:

    var ws = new WebSocket("ws://www.websocket.org");
    ws.onopen = function(){ 
      console.log("connect success");
    };

    意义:open事件触发时 WebSocket已经准备好发送和接受数据 应用程序接收到open事件 那么可以确定WebSocket服务器成功处理了连接请求,并且同意与之通信。

    b.WebSocket事件 message
      定义:message事件在接收到消息时触发,对应了该事件的回调函数是onmessage
    代码:

    ws = new WebSocket("ws://127.0.0.1:2346");
    ws.onopen = function() {
      alert("连接成功");
      ws.send('tom');
      alert("给服务端发送一个字符串:tom");
    };
    ws.onmessage = function(e) {
      alert("收到服务端的消息:" + e.data);
    };
    

      

    c.WebSocket事件 error
      定义:error 事件在响应意外故障的时候触发。与该事件对应的回调函数为onerror
      如果接收到一个error事件,可以预期很快就会触发close事件。close事件中的代码和原因有时候会告诉你错误的根源。
    代码:

    ws.onerror = function(e)
    {
      cosole.log("WebSocket Error:",e);
      handleErrors(e);
    };

    d.WebSocket事件 close
    定义:close事件在WebSocket连接关闭时触发 对应的回调函数为onclose 一旦关闭 服务终止
    代码:

    ws.onclose = function(e)
    {
      console.log("connection closed",e);
    };

    3.Websocket有两种方法 send() 和 close()
      a.WebSocket方法: send()
        定义:使用send()方法可以从客户端向服务器发送消息在发送一条或者多条消息之后,可以保持连接打开,或者调用close() 方法终止连接 在调用onopen监视器之后 调用onclose监听器之前 调用send()方法
      代码:

    ws.send("Hello Mark");


      注意:send()方法在连接打开的时候发送数据 如果连接不可用 或者 关闭 它会抛出一个无效连接状态的异常
      要避免试图在连接打开之前发送消息

      捕获js异常

    var ws = new WebSocket("ws://120.77.245.130:2346"); 
    try{
        ws.send('tom');
    }catch(e){
        alert(e);
    }
    javascript Error 对象:
    name: 错误名称
    number: 错误号
    description: 描述信息 
    message: 错误信息 
    fileName: 错误发生的文件 
    stack: 错误发生时的调用堆栈
    

      

        上面这个例子会抛出异常 因为连接尚未打开 要等onopen事件触发了 才能在新构造的WebSocket上发送第一条消息

    var ws = new WebSocket("ws://120.77.245.130:2346"); 
    ws.onopen = function()
    {	
      ws.send('tom'); 
    }


      b.WebSocket方法:close()
        定义:使用close()方法 可以关闭WebSocket连接或者终止连接尝试 如果连接已经关闭,该方法就什么都不做。在调用close()之后,不能在已经关闭的WebSocket上发送任何数据
        参数:close(Param code,Param reason)
            code 数字型的状态代码 reason 一个文本字符串
        传递这两个信息,可以向服务器传递关闭的原因
      代码:

    ws.close(1000,"closing normally");

    4.Websocket的对象特性
      a. readyState 便于了解WebSocket 连接状态
      代码:

    var ws = new WebSocket("ws://120.77.245.130:2346/");
    alert(ws.readyState); //返回0 连接正在进行中 但还未建立 WebSocket.CONNECTING	 
    ws.onopen = function(e){ 
      alert(ws.readyState); 
      //返回1 连接已经建立。消息可以在客户端和服务器之间传递 WebSocket.CONNECTING	 
    };
    //下面不清楚 
    //返回2 连接正在进行关闭握手 WebSocket.CLOSING 
    ws.close();
    alert(ws.readyState); //返回3 连接已经关闭,不能打开 WebSocket.CLOSED 


      b. bufferedAmount 数据在网上的传输速率 WebSocket对象可以告诉你缓存的大小
        bufferedAmount特性检查已经进入队列,但是尚未发送到服务器的字节数
      代码(使用bufferAmount特性每秒发送更新的例子,如过网络无法承受这一速率,它会做相应的调整):

    var THRESHOLD = 10240;
    
    var ws = new WebSocket("ws://120.77.245.130:2346/");
    
    ws.onopen = function(){
    setInterval(function(){
      if(ws.bufferedAmount < THRESHOLD)
      {
        ws.send(getApplicationState());
      }
    },1000)
    }
    

      

      对于限制应用向服务器发送数据的速率,从而避免网络饱和,bufferedAmount特性很有用。

      c. protocol
       在最初的握手之前为空 服务器没有选择客户端提供的哪个协议 该特性也为空值

    5.判断浏览器是否支持WebSocket

    if(window.WebSocket)
    {
      console.log("this browser support WebSocket");
    }else{
      console.log("this browser does not support WebSocket");
    }
    

      

  • 相关阅读:
    安卓开发学习笔记(七):仿写腾讯QQ登录注册界面
    android studio 撤销和恢复
    安卓开发学习笔记(六):如何实现指定图片定时开屏功能?
    JAVA小白开发环境配置(编译器为Idea)
    我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。
    安卓开发学习笔记(五):史上最简单且华丽地实现Android Stutio当中Webview控件https/http协议的方法
    安卓开发学习笔记(四):Android Stuidio无法实现隐式Intent是为什么?
    XML如何添加注释?
    安卓开发学习笔记(三):Android Stuidio无法引用Intent来创建对象,出现cannot resolve xxx
    安卓开发学习笔记(二):如何用Android Stuidio在res资源下创建xml视图文件
  • 原文地址:https://www.cnblogs.com/foreversun/p/6868622.html
Copyright © 2011-2022 走看看