一、WebSocket简介WebSocket是HTML5开始提供的一种在单TCP连接上进行全双工通信的协议。WebSocket协议诞生于2008年，2011年成为国际标准，所有浏览器都已经支持。WebSocket使得客户端和服务器之间的数据交换更加容易，允许服务器主动向客户端推送数据。浏览器和服务器只需要完成一次握手，两者之间就可以直接建立持久连接，进行双向数据传输。在WebSocketAPI中，浏览器和服务器只需要进行一次握手，浏览器和服务器之间就形成了一个快速通道。两者之间可以直接传输数据。许多网站为了实现推送技术，使用了Ajax轮询。(Timer+Ajax)，浏览器向服务器发送HTTP请求，然后服务器返回最新的数据给客户端的浏览器。这种传统模式带来的弊端很明显，就是浏览器需要不断向服务器发送请求，但是HTTP请求可能包含很长的header，真正有效的数据可能只有一小部分，显然是浪费了很多带宽和其他资源。HTML5定义的WebSocket协议可以更好的节省服务器资源和带宽，实现更实时的通信。它最大的特点是服务端可以主动向客户端推送信息，客户端也可以主动向服务端发送信息。是真正的双向平等对话，属于服务器推送技术的一种。其他特点包括：建立在TCP协议之上，服务器端的实现相对容易。对HTTP协议有很好的兼容性，默认端口也是80和443。数据格式比较轻量级，性能开销小，通信效率高。可以发送文本或二进制数据。没有同源限制，客户端可以与任何服务器通信。协议标识符是ws（如果加密则为wss），服务器地址是URL。wss://echo.websocket.org2.WebSocketAPIWebSocketConstructorWebSocket对象被用作构造函数来创建一个新的WebSocket实例。varSocket=newWebSocket('wss://echo.websocket.org');执行完上面的语句后，客户端会连接到服务器。webSocket.readyStateCONNECTING：值为0，表示正在连接。OPEN：值为1，表示连接成功，可以通信。CLOSING：值为2表示正在关闭连接。CLOSED：值为3，表示连接已经关闭，或者打开连接失败。下面是一个例子。开关（Socket.readyState）{caseWebSocket.CONNECTING:console.log('Connecting!')break;caseWebSocket.OPEN:console.log('连接成功！')break;caseWebSocket.CLOSING:console.log('连接正在关闭！')break;caseWebSocket.CLOSED:console.log('连接已关闭！')break;default://这永远不会发生break;}WebSocket事件事件事件处理器描述openSocket.onopen连接建立时触发messageSocket.onmessage连接建立时触发errorSocket.onerror，客户端接收到服务端数据时触发closeSocket.onclose，并触发实例对象，用于指定连接成功后的回调函数。Socket.onopen=function(){console.log('HelloWord!');};如果要指定多个回调函数，可以使用addEventListener方法。Socket.addEventListener('open',function(event){console.log('HelloWord!');});WebSocket方法方法说明Socket.send()使用连接发送数据Socket.close()关闭连接发送文本示例。Socket.send('你的信息');发送Blob对象的示例。varfile=document.querySelector('input[type="file"]').files[0];套接字发送（文件）；3、WebSocket应用实时聊天天气后台统计数据更新消息推送（抢购、秒杀提醒）商城后台商品编辑锁定4、扩展EventSourceServer-client通信EventSource是Server-sentEvents规范的技术实现在HTML5中。EventSource接口用于接收服务器发送的事件。它通过HTTP连接到服务器，接收文本/事件流格式的事件，并且不关闭连接。服务端可以通过EventSource主动发现消息给客户端，使用HTTP协议，单次通信，只能从服务端发送到浏览器；与WebSocket相比，它轻量级且易于使用。webpack热更新功能Node通过中间件webpack-hot-middleware/middleware.js实现Node端通信，打开webpack-hot-middleware/client.js的代码实现：source=newwindow.EventSource(options.path);source.onopen=handleOnline;source.onerror=handleDisconnect;来源.onmessage=handleMessage;修改文件保存后，发现consolewebpack立马重新编译，UI没有刷新就更新了。1、这时候你会发现webpack编译结果中多了两个update文件，文件名中包含了上面的hash信息。4.73c528ba5b06e7e9ab26.hot-update.js73c528ba5b06e7e9ab26.hot-update.json2。同时chrome-dev-tool请求面板下多了两个请求，其中hot-update.json是ajax请求，hot-update.js是GET请求，也就是脚本请求，插入文档中的脚本链接。3、在多次热更新的页面内容中插入4.73c528ba5b06e7e9ab26.hot-update.js脚本文件后，可以发现服务端发送的消息（EventStrean）的hash将作为下次热更新。json和hot-update.js文件的哈希值。
