Html5 WebSocket 技术介绍

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/WebSockethttp://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组件结合的实例…  

时间: 2024-10-11 04:56:10

Html5 WebSocket 技术介绍的相关文章

打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如下图所示: 一.对Socket Server的要求 我们可以尝试让Socket Server透明地支持WebSocket客户端,所谓透明的意思是,服务端开发人员不用关心客户端究竟是什么类型,而是可以统一的接收数据.处理数据.发送数据.为了做到这一点,我们可以构建一个服务端框架,让框架完成透明化的工作

Demo源码放送:打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如下图所示: 一.对Socket Server的要求 我们可以尝试让Socket Server透明地支持WebSocket客户端,所谓透明的意思是,服务端开发人员不用关心客户端究竟是什么类型,而是可以统一的接收数据.处理数据.发送数据.为了做到这一点,我们可以构建一个服务端框架,让框架完成透明化的工作

使用 HTML5 WebSocket 构建实时 Web 应用

作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等等.这其中有"Web 的 TCP "之称的 WebSocket 格外吸引开发人员的注意.WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能,从而在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道.Web 开发人员可以非常方便地使用 WebSocket 构建实时 web 应用,开发人员的手中从此又多了一柄神兵利器.本文首先介绍

WebSocket简单介绍

Java后端WebSocket的Tomcat实现 一.WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功能,使服务端也能主动向客户端发送数据. 我们知道,传统的HTTP协议是无状态的,每次请求(request)都要由客户端(如 浏览器)主动发起,服务端进行处理后返回response结果,而服务端很难主动向客户端发送数据:

基于构建实时WEb应用的HTML5 WebSocket协议<一>

前言 作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等等.这其中有"Web 的 TCP "之称的 WebSocket格外吸引开发人员的注意.WebSocket 的出现使得浏览器提供对 Socket 的支持成为可能,从而在浏览器和服务器之间提供了一个基于 TCP 连接的双向通道.WebSocket是html5新增加的一种通信协议,目前流行的浏览器都支持这个协议,Web 开发人员可以非常方便地使用 WebS

基于构建实时WEb应用的HTML5 WebSocket协议<二>

前面说了那么多的理论,我们来看下代码学习. WebSocketAPI简介 首先看一段简单的javascript代码,该代码调用了WebSockets的API. var ws = new WebSocket("ws://echo.websocket.org"); ws.onopen = function(){ws.send("Test!"); }; ws.onmessage = function(evt){console.log(evt.data);ws.close(

HTML5新手入门介绍

HTML5的发展越来越迈向成熟,很多的应用已经逐渐出现在你我日常生活中了,不只让传统网站上的互动Flash逐渐的被HTML5的技术取代,更重要的是可以透过HTML5的技术来开发跨平台的手机软件,让许多开发者感到十分兴奋! 当你开始想要学习.试图想要投入相关的开发时,由于HTML5的技术还在持续发展.进化当中,学习的资源也都比较零散,较难有一个整体的方向.在本篇文章中,笔者将会介绍HTML5的主要技术组成,并且提供一些学习资源让大家参考. HTML5到底是什么? 一般广义而言的HTML5则包含了H

[转]使用 HTML5 WebSocket 构建实时 Web 应用

HTML5 WebSocket 简介和实战演练 本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新,并通过一个 WebSocket 服务器和客户端的案例来充分展示 WebSocket 的强大和易用. 作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket 等等.这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意.WebSocket 的出现使得浏

《Getting Started with WebRTC》第二章 WebRTC技术介绍

本章作WebRTC的技术介绍,主要讲以下的概念: .  如何建立P2P的通信 .  有效的信令选项 .  关键API的关系 2.1 设置通信 尽管WebRTC通信的基础是P2P的, 但设置这个通信的初始步骤是要求一些协作的. 这些动作通常由Web服务器和/或信令服务器提供. 这个协作可以允许两个或多个WebRTC设备或端找到彼此,交换通信的细节, 协商定义了他们如何通信的会话, 最后建立它们之间的直播P2P媒体流. 2.2 一般流程 应用场景其实是很多的,从简单的页面DEMO到多方会议. 这里只