协议-【5】Websocket协议

 概念：

        Websocket 是HTML5出的东西（协议），也就是说HTTP协议没有变化，但HTTP是不支持持久连接的（长连接，循环连接的不算）， 

         Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说，可以把 WebSocket 看成是 HTTP 协议为了支持长连接所打的一个大补丁 

Websocket只需要一次HTTP握手，就可以做到源源不断的信息传送了。（在程序设计中，这种设计叫做回调，即：你有信息了再来通知我，而不是我傻乎乎的每次跑来问你）， WebSocket 还是一个双通道的连接，在同一个 TCP 连接上可以多次 发 , 收 信息，由客户主动询问，转换为服务器（推送）有信息的时候就发送（当然客户端还是等主动发送信息过来的。。）

内容拓展：

  HTTP1.0:  每次请求都要创建TCP连接（就是一个Request 对应一个Response）

  HTTP1.1:  进行了改进，它默认开启长连接 keep-alive(使用keep-alive参数来告知服务器端要建立一个长连接） ,也就是说，在一个TCP连接中，可以发送多个Http的Request，接收多个Response（一个TCP连接上可以传送多个HTTP请求和响应）

//在请求头header里，由浏览器/服务器添加
Connection:keep-alive

 备注：但是请记住 Request = Response ， 在HTTP中永远是这样，也就是说一个request只能有一个response。而且这个response 也是 被动的，不能主动发起。

建立持久连接的方式：

1: ajax轮询： 让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。

                      request--->response , request--->response ,  request--->response ........ loop

3: long poll ：采取的是阻塞模型（一直打电话，没收到就不挂电话)

                     request--->。。。。。。。reponse（没有消息，就不返回reponse，等待到有消息的时候，再给你（Response））

                     下个消息获取再次建立连接：request--->。。。。reponse（没有消息，就不返回reponse）

         所谓的 polling 是指从客户端（一般就是浏览器）不断主动的向服务器发 HTTP 请求 查询是否有新数据

上面 两种方式都是在不断地建立HTTP连接，然后等待服务端处理，可以体现HTTP协议的另外一个特点，被动性（服务端不能主动联系客户端，只能有客户端发起）。

3: webscoket： 只需建立一次连接后，就可以一直保持 连接状态， 就可以源源不断 收 ，发 信息了，形成了通道。

<script>
    // 1: 创建初始化一个webScoket 对象
    var ws = new WebSocket("ws://localhost:998/echo");
    // 2: 建立webSocket连接成功， 触发事件
    ws.onopen = function() {
        // 使用send发送数据
        ws.send("发送数据")
        alert("数据发送中。。。。")
    }
    // 3: 接收服务端数据时， 触发事件
    ws.onmessage = function (evt) {
        var received_msg = evt.data
        alert("数据已接收。。。。")
    }
    // 4:断开web socket连接成功， 触发事件
    ws.onclose = function () {
        alert('连接已关闭。。。。。')
    }  
</script>

参考资料：

        https://www.zhihu.com/question/20215561