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

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....

};

秒客网

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

相关文章