拖拽，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请求及销毁请求，减少网络带宽资源的占用，同时也节省服务器资源;