1. 程式人生 > >文件通訊(跨域-不跨域)、時時通訊(websocket)、離線儲存(applicationCache)、開啟多執行緒(web worker)

文件通訊(跨域-不跨域)、時時通訊(websocket)、離線儲存(applicationCache)、開啟多執行緒(web worker)

一、文件間的通訊    postMessage物件
    //不跨域
        1、iframe:obj.contentWindow  [iframe中的window物件]      iframe拿到父級頁面的window:  parent(上一層window)  top(最頂層window)
        2、window.open()  返回值是新視窗的window物件   拿到父級window : window.opener

    //跨域
        3.  目標域的window.postMessage("xxx","目標域");  目標域:監聽message事件,在ev.data中拿到傳送過來的訊息
        4.ajax需要服務端配合:允許我跨域訪問
        5.jsonp

    //無重新整理上傳檔案
        obj.fiels  //獲取檔案列表

        var FD = new FormData();  
        FD.append('name',files[0])   //構建二進位制物件

        //ajax傳送二進位制資料給後臺
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if( xhr.status == 200 ){
                    var res = JSON.parse(xhr.response);
                    alert(res.msg);
                }
            }
        }
        //ajax傳送原始檔
        xhr.open('post','post_file.php',true);
        xhr.setRequestHeader('X-Request-with','XMLHttpRequest');
        xhr.send(FD);

        xhr.upload       //上傳進度物件
            事件:
                onprogress: 上傳事件(上傳過程中連續觸發)
            屬性:
                ev.total(要傳送的總量)
                ev.loaded(已傳送的總量)


二、websocket:通訊協議  -> 與 http類似 (參考阮一峰2012‘網際網路協議入門篇’)
    1.nodejs搭建前後端
    2.使用websocket實現時時傳輸:
        a].安裝socket.io:npm install socket.io  引入sokit.io包


        //服務端
            a].var io = require('socket.io');
               var soket = io.listen(httpServer);
            b].soket.sokets.on('connection',function(socket){
                //socket -> 每個人進來都會產生一個socket
            });  //有人進來的事件監聽,執行回掉
            e]. 服務端->客戶端:socket.emit('hello','資料');
            h]. 監聽客戶端'hellohello'事件:socket.on('hellohello',function(data){
                //data  客戶端過來的資料(資料1)
            });
            i]. socket.broadcast.emit('a','有新人進來了'); //廣播(除了當前的人(剛剛進來的人)接收不到)

        //客戶端
            c].客戶端需要傳送tcp連結,引入client.socket.js檔案 [提供一個io物件。
            d]. var socket = null;socket = io.connect('url');傳送tcp請求
            f]. 客戶端監聽hello事件: socket.on('hello',function(data){
                //data  服務端過來的資料
            });
            g]. 客戶端 -> 服務端:socket.emit('hellohello','資料1');

三、applicationCache 離線儲存
    1、搭建離線應用程式
        //伺服器設定頭資訊
            AddType text/cache-manifest .manifest  //http.comfig中加  nodeJs: 'AddType': 'text/cache-manifest .manifest'
        //html標籤新增屬性:
            manifest='cache.manifest'  //xxx就是離線儲存的清單列表
        //新建cache.manifest檔案
            先寫:
            -CACHE MANIFEST
                -2.png    //就會快取2.png圖片
            -FALLBACK
            -styl1.css  style2.css //第一個網路地址沒有獲取到,就走第二個快取
            -NETWORK:無論快取是否有,都從網路獲取
四、web worker  [開啟多執行緒
    1.使用:
        //主js中:
            var w1 = new Worker('worker1.js');  //開啟多執行緒
            w1.postMessage('wenwen');           //用於傳遞資料
        //worker1.js中:
            self.onmessage = function(ev){  //self == w1 引用此檔案的返回值
                ev.data
            }
        <!-- 
                console.time(1);
                .
                .
                console.timeEnd(1);   
                //計算執行中間的程式碼使用的時間,在控制檯打印出來
         -->
    2.執行環境:
            navigator:appName appVersion userAgent platform
            location:所有屬性只讀
            self: 只想全域性worker物件
            所有的ECMA物件:Objec...
            XMLHttpRequest
            setTimeout setIntercal
            self.close()方法:內部立即停止worker執行  worker.terminate()//外部結束程序
            importScripts('xxx.js')方法引入其他js檔案
五、小功能:
    1、標籤可編輯屬性:contenteditable='true'