码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-01-24 12:07:47      阅读:252      评论:0      收藏:0      [点我收藏+]

标签:服务器   open   实现   事件   时间   eve   cal   cli   url   

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

标签:服务器   open   实现   事件   时间   eve   cal   cli   url   

原文地址:http://www.cnblogs.com/leaf930814/p/6344744.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!