HTML5 WebSocket 技术介绍

转载 2013年12月04日 10:30:14

原文:http://www.cnblogs.com/twaver/archive/2012/05/10/2493795.html


WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这是“无法做到”的。

传统服务端推(server push)技术

WebSocket提出之前,为了解决后台推送消息到前台的需求,提出了一些解决方案,这些方案使用已有的技术(如ajax,iframe,flashplayer,java applet …),通过一些变通的处理来实现。

简单轮询

最简单的是前台轮询,每隔一段时间去请求后台,以获取最新状态,这种方式最容易实现,但效果也最差,频繁盲目的调用后台,带来不必要的开销,且实时性无法保障,后台出现更新,前端需要在下一次轮询时才知道。

长轮询

为了解决这些弊端,进化出长轮询技术,轮询请求会在后台阻塞,相当于保持一个长连接,直到后台出现更新或者超时才返回,这样就可以保证更新的及时性,前端得到请求后,重新建立轮询连接,等待后台的更新通知。

其他方案

其他解决方案无外乎保持一个长连接(如Iframe及htmlfile流),实时的从后台获取信息,或者借助第三方插件(flashPlayer, jre),使用的是flash xmlsocket或者java applet socket技术,这些方式都不够纯html,所以这里就不过多介绍了,更多传统server push 技术可参考IBM的文章:http://www.ibm.com/developerworks/cn/web/wa-lo-comet/

WebSocket介绍

webSocket是html5新引入的技术,允许后台随时向前端发送文本或者二进制消息,WebSocket是一种全新的协议,不属于http无状态协议,协议名为”ws”,这意味着一个websocket连接地址会是这样的写法:ws://twaver.com:8080/webSocketServer。ws不是http,所以传统的web服务器不一定支持,需要服务器与浏览器同时支持, WebSocket才能正常运行,目前的支持还不普遍,需要特别的web服务器和现代的浏览器。

浏览器对WebSocket的支持

Google Chrome浏览器最先支持WebSocket,随后是Safari,Firefox,此外最新版本的Opera和IE(Opera11,IE10)也支持WebSocket。
下面是主要浏览器的支持情况,Opera11中默认关闭了WebSocket支持,所以这里没有列出,更多信息可参考:http://en.wikipedia.org/wiki/WebSocket http://caniuse.com/#search=websockets

客户端WebSocket的主要方法

浏览器支持程度各有区别,前面wiki中关于WebSocket的“Browser support”章节有介绍,遵循w3c关于WebSocket API的相关规范,浏览器提供了WebSocket类型,在Firefox中为MozWebSocket,检测浏览器是否支持WebSocket可以使用下面的脚本代码:

检测浏览器是否支持WebSocket

1
2
3
4
5
window.WebSocket = window.WebSocket || window.MozWebSocket;
if (!window.WebSocket){
    alert("WebSocket not supported by this browser");
    return;
}

构造函数 – WebSocket#constructor(url, optional protocols)
第一个参数是请求地址,第二个参数选填,表示协议名
使用示例:

1
var websocket = new WebSocket("ws://127.0.0.1:8080/alarm/alarmServer");

事件 – open/message/close/error
WebSocket#onopen, onmessage, onclose, onerror
连接打开时,回调onopen方法,接收到后台消息时会触发到onmessage事件,后台关闭时调用onclose,出现连接异常时可在onerror中捕获
使用示例:

1
2
3
websocket.onmessage = function(evt){
    var data = evt.data;
}

方法 – send/close
发送消息 – WebSocket#send(data)
关闭连接 – WebSocket#close(optional code, optional reason)
使用示例:

1
websocket.send(JSON.stringify({action: "node.remove", id: "001"}));

服务器对WebSocket的支持

WebSocket不同于http协议,传统的web服务器通常不支持WebSocket,比如tomcat目前就不支持(tomcat 7.0.26 支持WebSocket了),反倒是一些小众的或者更活跃的web server率先支持WebSocket,如jetty,以及基于node.js的WebSocket-Node扩展,基本上各种编程语言都有相应的服务器可以选择,下图是我列举的几种,详细情况参阅:http://en.wikipedia.org/wiki/Comparison_of_WebSocket_implementations

服务器端编程语言各不相同,具体实现自然也不相同,即使是同一种语言,实现类和接口函数也有很大的差别,比如jetty和netty都是基于java语言,但他们的实现类几乎没有相同命名的,下面我以jetty(http://www.eclipse.org/jetty)为例,简单介绍WebSocket相关的类和方法:

jetty对WebSocket的实现

WebSocketServlet基于servlet标准,增加了doWebSocketConnect(…)方法,为客户端请求创建一个后台对应的WebSocket实例

1
2
3
4
org.eclipse.jetty.websocket.WebSocketServlet
{
WebSocket doWebSocketConnect(HttpServletRequest request, String protocol)
}

后台WebSocket类,与客户端WebSocket类对应,能监听open, message, close等状态变化事件,并包含一个Connection属性,用于向客户端发送消息

1
2
3
4
5
6
7
org.eclipse.jetty.websocket.WebSocket
org.eclipse.jetty.websocket.WebSocket.OnTextMessage
{
void onOpen(Connection connect);
void onClose(int code, String message);
void onMessage(String message);
}

WebSocket.Connection 后台连接类,包含于WebSocket对象中,用于向客户端推送消息

1
2
3
4
org.eclipse.jetty.websocket.WebSocket.Connection
{
void sendMessage(String message);
}

本篇先做介绍,后续将介绍一个WebSocket与TWaver组件结合的实例…  

HTML5技术简介

1. 介绍 HTML是超文本标记语言的英文缩写,这是一种标记语言,不需要进行编译,直接由浏览器执行。HTML文件是一个文本文件,包含了一些HTML元素、标签等。目前HTML语言最新版本为4,W3C发...
  • aa_moon
  • aa_moon
  • 2016年12月02日 15:49
  • 1442

浅谈HTML5 WebSocket的机制

回顾上一章      在上一章《为什么我们需要HTML5 WebSocket》中,我简单的介绍了下WebSocket的前世今生。相信大家已对WebSocket有了初步的了解。那么今天我们继续深入学习W...
  • xmt1139057136
  • xmt1139057136
  • 2016年03月22日 15:05
  • 4469

websocket全双工通信简介

本文摘自百度百科和《Spring实战》: 简介 websocket protocol是html5的一种新的协议,它实现了浏览器和服务器的全双工通信(full-duplex),它能够实现web浏览器和...
  • xiaohan2826
  • xiaohan2826
  • 2016年12月02日 07:46
  • 356

学习html5的WebSocket连接

转自:http://www.cnblogs.com/shizhouyu/p/4975409.html 1、什么是WebSocket WebSocket 是一种自然的全双工、双向...
  • xxx9001
  • xxx9001
  • 2016年09月09日 14:41
  • 2375

一篇 介绍 Socket 和 WebSocket 的很好的帖子

原文链接:http://zengrong.net/post/2199.htm 1. 概述¶ 选择了 WebSocket 技术之后,不可避免的,我要将它和其他协议以及技术做一下比较。最常见的...
  • su_sai
  • su_sai
  • 2016年09月17日 14:37
  • 1920

使用 HTML5 WebSocket 构建实时 Web 应用

原文地址http://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/         作为下一代的 Web 标准,...
  • l863784757
  • l863784757
  • 2013年10月30日 09:55
  • 1750

WebSocket技术在html5中的应用

在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法...
  • huangxin0102
  • huangxin0102
  • 2015年11月21日 12:39
  • 313

使用 WebSockets 进行 HTML5 视频直播

使用 WebSockets 进行 HTML5 视频直播
  • andyliulin
  • andyliulin
  • 2015年05月14日 10:15
  • 18016

HTML5 WebSocket的使用及例子

WebSocket protocol 是HTML5一种新的协议(protocol)。它是实现了浏览器与服务器全双工通信(full-duplex)。 现在,很多网站为了实现即时通讯(real-time...
  • huangwuyi
  • huangwuyi
  • 2013年10月21日 16:13
  • 53089

HTML5的WebSocket的介绍及应用

http://www.haorooms.com/post/html5_websocket  感谢分享 前言 最近项目中用到视频直播技术,弹幕用WebSocket制作再合适不过了,上一篇文章讲了h...
  • qq_32963841
  • qq_32963841
  • 2017年11月27日 11:32
  • 57
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5 WebSocket 技术介绍
举报原因:
原因补充:

(最多只允许输入30个字)