一、WebSocket 介绍

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连贯上进行全双工通信的协定。

WebSocket 协定在2008年诞生，2011年成为国际标准。所有浏览器都曾经反对了。

WebSocket 使得客户端和服务器之间的数据交换变得更加简略，容许服务端被动向客户端推送数据。浏览器和服务器只须要实现一次握手，两者之间就间接能够创立持久性的连贯，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只须要做一个握手的动作，而后，浏览器和服务器之间就造成了一条快速通道。两者之间就间接能够数据相互传送。

很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。（定时器+Ajax），由浏览器对服务器收回HTTP申请，而后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很显著的毛病，即浏览器须要一直的向服务器发出请求，然而HTTP申请可能蕴含较长的头部，其中真正无效的数据可能只是很小的一部分，显然这样会节约很多的带宽等资源。

HTML5 定义的 WebSocket 协定，能更好的节俭服务器资源和带宽，并且可能更实时地进行通信。

它的最大特点就是，服务器能够被动向客户端推送信息，客户端也能够被动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

其余特点包含：

  • 建设在 TCP 协定之上，服务器端的实现比拟容易。
  • 与 HTTP 协定有着良好的兼容性，默认端口也是80和443。
  • 数据格式比拟轻量，性能开销小，通信高效。
  • 能够发送文本，也能够发送二进制数据。
  • 没有同源限度，客户端能够与任意服务器通信。
  • 协定标识符是ws（如果加密，则为wss），服务器网址就是 URL。
wss://echo.websocket.org

二、WebSocket API

  • WebSocket 构造函数

    WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。

    var Socket = new WebSocket('wss://echo.websocket.org');

    执行下面语句之后，客户端就会与服务器进行连贯。

  • webSocket.readyState

      CONNECTING：值为0，示意正在连接。  OPEN：值为1，示意连贯胜利，能够通信了。  CLOSING：值为2，示意连贯正在敞开。  CLOSED：值为3，示意连贯曾经敞开，或者关上连贯失败。

    上面是一个示例。

    switch (Socket.readyState) {case WebSocket.CONNECTING:  console.log('正在连接！')  break;case WebSocket.OPEN:  console.log('连贯胜利！')  break;case WebSocket.CLOSING:  console.log('连贯正在敞开！')  break;case WebSocket.CLOSED:  console.log('连贯曾经敞开！')  break;default:  // this never happens

}

* ** WebSocket 事件**| 事件     | 事件处理程序         | 形容                     ||----------|---------------------|--------------------------|| open     | Socket.onopen       | 连贯建设时触发            || message  | Socket.onmessage    | 客户端接管服务端数据时触发 || error    | Socket.onerror       | 通信产生谬误时触发        || close    | Socket.onclose      | 连贯敞开时触发            |实例对象的 `onopen` 属性，用于指定连贯胜利后的回调函数。

Socket.onopen = function () {

  console.log('Hello Word!');

};

如果要指定多个回调函数，能够应用 `addEventListener` 办法。

Socket.addEventListener('open', function (event) {

  console.log('Hello Word!');

});

* ** WebSocket 办法**| 办法            | 形容                 ||-----------------|---------------------|| Socket.send()   | 应用连贯发送数据     || Socket.close()  | 敞开连贯            |发送文本的例子。

Socket.send('your message');

发送 Blob 对象的例子。

var file = document.querySelector('input[type="file"]').files[0];

Socket.send(file);
### 三、WebSocket 利用* 即时聊天* 天气* 后盾统计数据更新* 音讯推送（抢购、秒杀揭示）* 商城后盾商品编辑是锁定### 四、扩大- ** EventSource 服务端与客户端通信**EventSource 是 HTML5 中 Server-sent Events 标准的一种技术实现。EventSource 接口用于接管服务器发送的事件。它通过HTTP连贯到一个服务器，以text/event-stream 格局接管事件, 不敞开连贯。通过 EventSource 服务端能够被动给客户端发现音讯，应用的是 HTTP协定，单项通信，只能服务器向浏览器发送； 与 WebSocket 相比轻量，应用简略.- ** Webpack 热更新性能**Node 通过中间件 `webpack-hot-middleware/middleware.js`实现Node端通信，关上 webpack-hot-middleware/client.js 的代码实现：
  source = new window.EventSource(options.path);  source.onopen = handleOnline;  source.onerror = handleDisconnect;  source.onmessage = handleMessage;
批改文件保留后，发现控制台 Webpack 马上从新编译了，UI 无刷新更新了。1.这时候会发现 Webpack 编译后果多了两个update的文件， 而且文件名蕴含下面的 hash 信息。

4.73c528ba5b06e7e9ab26.hot-update.js
73c528ba5b06e7e9ab26.hot-update.json

2.同时，chrome-dev-tool 申请面板下多了两个申请，其中 hot-update.json 为 ajax申请， hot-update.js 为 GET 申请， 也就是插入 script 链接到文档中的script 申请。3.页面内容插入了 `4.73c528ba5b06e7e9ab26.hot-update.js` script文件进行屡次热更新后，能够发现服务端发送的音讯(EventStrean) 的 hash 将作为下次 hot-update.json 和 hot-update.js 文件的 hash。