web领域的实时推送技术-WebSocket

Posted 2020-08-29 leaf930814

WebSocket protocol 是html5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)，即是所谓的及时推送技术。

在此之前，很多网站为了实现及时推送技术通常采用的是轮询(polling)。轮询就是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的方法大量消耗服务器带宽和资源。针对这种情况，HTML5定义WebSocket运营而生。

一、websoket说白了就是一项新协议，对比HTTP协议，他们两者有什么联系和区别呢？

联系：websoket借用http协议来完成一次握手。

区别：

1、http是非持的协议。websocket是一个持久化协议。

2、http是被动的，不能主动发起。websocket可以实时交互。

二、原理

利用WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

一旦取得 Web 服务器上的 Web Socket 连接之后，就可以通过调用 send() 方法从浏览器发送数据到服务器上，通过onmessage 事件处理程序从服务器接收数据到浏览器中。

创建一个新的webSocket对象的API方法如下

 var Socket = new WebSocket(url, [protocal] );

参数一:指定连接的URL。参数二：端口

属性：Socket.readyState  值     0|尚未链接  1|已经连接可以通信 2|在关闭 3|已经关闭或者不能打开

事件：Socket.send()|使用连接传输数据 

        Socket.close()|终止现有的任何连接

连接：

GET /chat HTTP/1.1    
Host: server.example.com
Upgrade: websocket        //说明发起的是webSocket协议
Connection: Upgrade      
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com　　

连接OK之后，接下来就可以使用webSoket API

// 创建一个Socket实例
var socket = new WebSocket(‘www.xxx.com‘); 
socket.onopen = function(event) {                           // 打开Socket 
  // 发送一个初始化消息
  socket.send(‘I am the client and I\‘m listening!‘); 
  socket.onmessage = function(event) {                      // 监听消息
    console.log(‘Client received a message‘,event); 
  }; 
  socket.onclose = function(event) {                        // 监听Socket的关闭
    console.log(‘服务连接关闭‘); 
  }; 
  socket.close()                                            // 关闭Socket.... 
};