拖拽，FileReader，Web Socket

drag&drop

1. 常用於各種拖動操作中
2. 創建可拖動元素

<div id="drag" draggable="true"></div>

拖拽相關的事件

• dragstart 被拖拽元素 開始被拖拽時觸發
• dragend 被拖拽元素 拖拽完成時
• dragenter 目標元素 拖曳元素進入目標元素
• dragover 目標元素 拖拽元素在目標元素上移動
• drop 目標元素 被拖拽的元素在目標元素上同時鼠標放開觸發的事件 e.dataTransfer.getData(“data”)
• 需要阻止dragover的默認行爲纔會觸發drop事件

ele.addEventListener('dragover', function (e) {
    e.preventDefault();//默認事件取消
drag.addEventListener('drop',function(){
	console.log('drop')})

DragEvent事件對象

e.dataTransfer.setData("data",e.target.id)//傳入
e.dataTransfer.getData("data")//取值

使用拖拽上傳文件

ele.addEventListener('dragover', function (e) {
    e.preventDefault();//取消默認事件
}, false);
ele.addEventListener('drop', function (e) {
    //調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以鏈接形式打開）
    e.preventDefault();
    console.log(e)
    var dt = e.dataTransfer;
    var files = dt.files;
    console.log(files);
}, false)

FileReader 讀取文件

方法

• abort() 終止讀取
• readAsBinaryString(file) 將文件讀取爲二進制編碼
• readAsDataURL(file) 將文件讀取爲DataURL編碼
• readAsText(file, [encoding]) 將文件讀取爲文本
• readAsArrayBuffer(file)​​​​​​​ 將文件讀取爲arraybuffer 通過不同的方式讀取文件

事件

• onloadstart 讀取開始時觸發
• onprogress 讀取中
• onloadend 讀取完成觸發，無論成功或失敗
• onload 文件讀取成功完成時觸發
• onabort 中斷時觸發
• onerror 出錯時觸發

獲取讀取的結果

fr.onload = function() {  
    this.result;  
}; 

Web Socket

• WebSocket 對象提供了一組 API，用於創建和管理 WebSocket 連接, ​​​​​​​以及通過連接發送和接收數據.
• Websocket 其實是一個新協議，跟HTTP協議基本沒有關係，只是爲了兼容現有瀏覽器的握手規範而已.借用了HTTP的協議來完成握手

產生原因

• 在 HTTP/1.0 中,大多實現爲每個請求/響應交換使用新的連接
• 在 HTTP/1.1 中,一個連接可用於一次或多次請求/響應交換
• HTTP協議中，服務端不能主動聯繫客戶端，只能有客戶端發起。
• webSoket服務器和客戶端均可主動發送數據

建立連接

當Web應用程序調用new WebSocket(url)接口時，Browser就開始了與地址爲url的WebServer建立握手連接的過程。

1. Browser與WebSocket服務器通過TCP握手建立連接，如果這個建立連接失敗，那麼後面的過程就不會執行，Web應用程序將收到錯誤消息通知。
2. 在TCP建立連接成功後，Browser通過http協議傳送WebSocket支持的版本號，協議的字版本號，原始地址，主機地址等等一些列字段給服務器端。
3. WebSocket服務器收到Browser發送來的請求後，如果數據包數據和格式正確，客戶端和服務器端的協議版本號匹配等等，就接受本次握手連接，並給出相應的數據回覆，同樣回覆的數據包也是採用http協議傳輸。
4. Browser收到服務器回覆的數據包後，如果數據包內容、格式都沒有問題的話，就表示本次連接成功，觸發onopen消息，此時Web開發者就可以在此時通過send接口向服務器發送數據。否則，握手連接失敗，Web應用程序會收到onerror消息，並且能知道連接失敗的原因。

三次握手

• 第一次握手：建立連接時，客戶端A發送SYN包（SYN=j）到服務器B，並進入SYN_SEND狀態，等待服務器B確認。
• 第二次握手：服務器B收到SYN包，必須確認客戶A的SYN（ACK=j+1），同時自己也發送一個SYN包（SYN=k），即SYN+ACK包，此時服務器B進入SYN_RECV狀態。
• 第三次握手：客戶端A收到服務器B的SYN＋ACK包，向服務器B發送確認包ACK（ACK=k+1），此包發送完畢，客戶端A和服務器B進入ESTABLISHED狀態，完成三次握手。
  完成三次握手，客戶端與服務器開始傳送數據

var Socket = new WebSocket(url);//創建
Socket.send(data)//傳輸數據
Socket.close()//終止連接

Web Socket 事件

WebSocket.org 提供了一個專門用來測試WebSocket的服務器"ws://echo.websocket.org"

    <script>
        var socket = new WebSocket('ws://echo.websos')
        socket.onopen = function() {
            socket.send('hello');
        }
        socket.onmessage = function(e) {
            console.log('message');
            console.log(e)
            console.log(e.data)
            console.log()
        }
        socket.onclose = function(e){
            console.log('close');
            console.log(e);
        }
        socket.onerror = function () {
            console.log('error');
        }
    </script>

WebSocket的優點

1. 客戶端與服務器都可以主動傳送數據給對方;
2. 不用頻率創建TCP請求及銷燬請求，減少網絡帶寬資源的佔用，同時也節省服務器資源;