WebストレージAPIとsocketプロトコル

2752 ワード

WebストレージAPI
  • は、任意のプログラムにとって、データストレージを実現するために必須の機能の1つであり、必要に応じてデータを提供することができる.しかし、従来のWebクライアントでは、データストレージをサポートできる有効なメカニズムはなく、クッキーはクライアントに少量の情報を格納するために使用されていたが、その性質に制限され、クッキーは短い文字列しか格納できなかった.
  • は、cookieの上に強化されたWebストレージAPIをHTML 5に提供する.このAPIでは、ユーザーのハードディスク(HDD)にデータを格納し、後でこれらのデータを使用することができます.
  • APIは2つの部分に分けることができる:
    1.               —sessionStorage
    
                ,      
    
    2.                 —localStorage
    
               ,      
                
    
  • sessionStorageという部分のAPIは、セッションクッキーの代替のようなものです.1.設定データ
     sessionStorage.setItem(key,value);
    
     sessionStorage     window     
     key -            ,key     
     value -        (number/string)
    
    2.         
    
     var value = sessionStorage.getItem(key);
    
    3.          
    
      sessionStorage.removeItem(key);
    
    4.             
    
      sessionStorage.clear();
    
  • localStorageが提供する属性と方法はsessionstorageと一致する

  • ソケットプロトコル
  • HTTPとSOCKETの長所と短所HTTPプロトコル-現在インターネットの中で最も広範なプロトコルSOCKETプロトコル-リアルタイムインスタント通信に応用
  • HTTPプロトコルの問題
       
    
            ,               
    
       
    
               ,       ,       ,      ,               。
    
  • web Socketの特徴
        HTTP                      
    
    1.         ,     
    2.            
    3.               
    4.                     
    
  • Webソケットの使用
  • WebSocketオブジェクトのコンストラクタを呼び出してサーバとの通信接続
    var webSocket = new WebSocket (“ws://127.0.0.1: 8005/socket”) ;
    
        (url)    http://  ,Web Sockets    (url   )
    
    ws:// - Web Socket   
    wss:// -       
    
  • を確立する.
  • WebSocketオブジェクトのsend()メソッドを使用してサーバにデータ
    webSocket.send (“data”);
    
    send()           。,  JSON     JavaScript,              。 
    
  • を送信する.
  • WebSocketオブジェクトのclose()メソッドによりsocketを閉じ、通信接続を切断する:
    webSocket.close( ) ;
    
  • Web Socketイベント
    1)     onmessage             :
    
     webSocket.onmessage = function( event ){
    
         var data = event.data ;
     }
    
    2)     onopen       socket      :
    
     webSocket.onopen = function( event ){
     
     }
    
    3)    onclose     socket      :
    
     webSocket.onclose = function( event ){
         
     }
    
    4)  onerror  ,              
    
     webSocket.onerror = function( event ){
         
     }
    
  • 次は、長い接続var webSocket=new WebSocket(「ws://127.0.0.1:2346/socket」)を確立する里例です.
    //      
    webSocket.onopen = function  () {
      alert("    ");
      
      document.getElementById("btn").onclick = function () {
          webSocket.send("   ");
      }
    }
    
    //          
    webSocket.onmessage = function () {
      alert(even.data);
    }
    
    //    
    document.getElementById("close").onclick = function () {
      webSocket.close();
    }
    
    // socket        
    webSocket.onclose = function () {
      alert("     ");
    }