HTML5技术

websocket初探 - 2778085001

字号+ 作者:H5之家 来源:博客园 2016-07-16 15:11 我要评论( )

应用背景 首先我们了解一下什么是WebSocket。WebSocket是HTML5的重要特性,其通信协议实现的是基于浏览器的远程socket,实现了浏览器和服务器全双工通信(full-duplex)。 在websocket之前,为了实现即时通信,所用的技术都是轮询,在特定的时间间隔内,由浏

应用背景

首先我们了解一下什么是WebSocket 。WebSocket 是HTML5的重要特性,其通信协议实现的是基于浏览器的远程socket,实现了浏览器和服务器全双工通信(full-duplex)。

在websocket之前,为了实现即时通信,所用的技术都是轮询,在特定的时间间隔内,由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客户端的浏览器,这样,浏览器需要对服务器不断发出请求,会占用很多带宽。

在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。它解决了web实时化的问题,相比传统http有如下好处:

1)一个WEB客户端只建立一个TCP连接

2)Websocket服务端可以推送(push)数据到web客户端.

3)有更加轻量级的头,减少数据传送量

websocket原理

我们可以把websocket应用看做有两个部分,客户端和服务端。在客户端会实例化一个websocket对象,如:

ws = new WebSocket( “ws://yourdomain:port/path” );

websocket对象会自动解析这段字符串,发送到指定的服务器端口,接着客户端与服务端会建立握手。客户端发送的数据格式类似:

GET /echo HTTP/1.1 
Upgrade: WebSocket 
Connection: Upgrade 
Host: :8080 
Origin: 

服务端应该返回的信息为:

HTTP/1.1 101 Web Socket Protocol Handshake 
Upgrade: WebSocket 
Connection: Upgrade 
WebSocket-Origin:  
WebSocket-Location: ws:// :8080/echo

客户端握手成功后,会触发webscoket对象的onopen事件,告诉客户端连接已经成功建立。

客户端一共绑定了四个事件。

clip_image002

1)onopen 建立连接后触发

2)onmessage 收到消息后触发

3)onerror 发生错误时触发

4)onclose 关闭连接时触发

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • net.sz.framework 框架 轻松搭建服务---让你更专注逻辑功能---初探 - 失足程序员

    net.sz.framework 框架 轻松搭建服务---让你更专注逻辑功能---初探 -

    2017-04-02 10:11

  • HTML5 学习笔记(五)——WebSocket与消息推送 - SeeYouBug

    HTML5 学习笔记(五)——WebSocket与消息推送 - SeeYouBug

    2016-12-05 10:00

  • HTML5_07之WebSocket - Jupiter258

    HTML5_07之WebSocket - Jupiter258

    2016-11-20 12:00

  • 结合WebSocket编写WebGL综合场景示例 - ljzc002

    结合WebSocket编写WebGL综合场景示例 - ljzc002

    2016-11-07 12:00

网友点评
e