需求描述：

最近做项目有这样一个需求：后台需要实时的将数据推送到前端进行显示，且实现数据在多个终端进行接受。

最初实现方式：

由于前端项目是基于vue框架进行开发的，所以起初采用 定时器 和 vue-resource 实现轮询的去访问后台数据。

问题描述

由于后台的数据接口定义方式为：采用 pop 的方式将最新的数据推送给前端，且只要数据被读取成功后，该接口的数据将被清空。这样就导致了前端只能由一个用户进行数据的读取，无法实现多用户共享数据功能，且采用轮询的方式去请求后台，最大问题是，当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常低效的实时方案，网络负载比较大。

问题解决方式

基于以上问题，通过查询网上资料，发现HTML5 推出的WebSocket完全能满足以上功能。

WebSocket 简介

HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术，使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。因为 WebSocket 连接本质上就是一个 TCP 连接，所以在数据传输的稳定性和数据传输量的大小方面，和轮询以及 Comet 技术比较，具有很大的性能优势。

WebSocket 规范

WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

WebSocket 握手协议

客户端到服务端： 
GET /demo HTTP/1.1 
Host: example.com 
Connection: Upgrade 
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 
Upgrade: WebSocket 
Sec-WebSocket-Key1: 4@1 46546xW%0l 1 5 
Origin: http://example.com 
[8-byte security key] 
 
服务端到客户端：
HTTP/1.1 101 WebSocket Protocol Handshake 
Upgrade: WebSocket 
Connection: Upgrade 
WebSocket-Origin: http://example.com 
WebSocket-Location: ws://example.com/demo 
[16-byte hash response]

WebSocket 实战( Vue中进行使用 )

<template>
    <div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                websock: null,
            }
        },
　　created(){
           //页面刚进入时开启长连接
            this.initWebSocket()
       },
　　destroyed: function() {
　　　　//页面销毁时关闭长连接
　　　　this.websocketclose();
　　},
　　methods: { 
   	//初始化weosocket
　　　　initWebSocket(){  　　　
　　　　　　const wsuri = process.env.WS_API + "/websocket/threadsocket";//ws地址
　　　　　　this.websock = new WebSocket(wsuri); 
　　　　　　this.websocket.onopen = this.websocketonopen;
　　　　　　this.websocket.onerror = this.websocketonerror;
　　　　　　this.websock.onmessage = this.websocketonmessage; 
　　　　　　this.websock.onclose = this.websocketclose;
　　　　}, 
　　　　websocketonopen() {
　　　　　　console.log("WebSocket连接成功");
　　　　},
　　　　websocketonerror(e) { //错误
 　　　　　 console.log("WebSocket连接发生错误");
　　　　},
　　　　websocketonmessage(e){ //数据接收 
　　　　　　const redata = JSON.parse(e.data);
　　　　　　console.log(redata.value); 
　　　　}, 
　　　　websocketsend(agentData){//数据发送 
　　　　　　this.websock.send(agentData); 
　　　　}, 
　　　 websocketclose(e){ //关闭 
　　　　　console.log("connection closed (" + e.code + ")"); 
　　　},
　　}, 
　}
 </script>

参考文档：

https://www.cnblogs.com/fuqiang88/p/5956363.html
https://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/
http://www.runoob.com/html/html5-websocket.html