反向Ajax:WebSockets一个强大的解决方案

本文还将讨论在服务器端使用反向 Ajax 技术的一些制约因素。

现在,用户期望可以从 Web 访问快速、动态的应用程序。本 系列 文章展示了如何使用反向 Ajax ">技术开发事件驱动的 Web 应用程序。反向 Ajax,第 1 部分:Comet 简介 介绍了反向 Ajax、轮询、流、Comet 和长轮询。您应该已经了解到,使用 HTTP 长轮询的 Comet 是可靠地实现反向 Ajax 的最佳方式,因为现在所有浏览器都提供了这方面的支持。

通过本文,您将学习如何使用 WebSockets 实现反向 Ajax。代码示例有助于说明 WebSockets、FlashSockets、服务器端的制约因素、请求作用域服务和暂停长期请求。

先决条件

在理想的情况下,如果想最大限度地利用本文,您应该了解 JavaScript 和 Java。本文创建的示例是使用 Google Guice 构建的,Google Guice 是用 Java 编写的依赖项注入框架。要理解本文内容,则需要熟悉依赖项注入框架的概念,比如 Guice、Spring 或 Pico。

要运行本文中的示例,还需要使用最新版的 Maven 和 JDK。

WebSockets

WebSockets 在 HTML5 中出现,是比 Comet 更新的反向 Ajax 技术。WebSockets 支持双向、全双工通信信道,而且许多浏览器(Firefox、Google Chrome 和 Safari)也支持它。连接通过 HTTP 请求(也称为 WebSockets 握手)和一些特殊的标头 (header)。连接一直处于激活状态,您可以用 JavaScript 编写和接收数据,正如您使用原始 TCP 套接字一样。

通过输入 ws:// 或 wss://(在 SSL 上)启动 WebSocket URL。

图 1 中的时间轴展示了如何使用 WebSockets 进行通信。HTTP 握手被发送到带有特定标头的服务器。然后,可在 JavaScript 的服务器或客户端上提供某种类型的套接字。可使用该套接字来通过事件处理器异步接收数据。

图 1. 通过 WebSockets 执行反向 Ajax

在本文的 下载源代码 中有一个 WebSocket 示例。当您运行该示例时,就会到类似于 清单 1 的输出。它显示了事件如何发生在服务器端上,并立即出现在客户端。当客户端发送一些数据时,服务器将其反映在客户端上。

清单 1. 用 JavaScript 编写的 WebSocket 示例

[client] WebSocket connection opened [server] 1 events [event]
ClientID = 0 [server] 1 events [event] At Fri Jun 17 21:12:01 EDT 2011 [server] 1 events [event] From 0 : qqq [server] 1 events [event] At Fri Jun 17 21:12:05 EDT 2011 [server] 1 events [event] From 0 : vv

通常,在 JavaScript 中使用 WebSockets 的方式与 清单 2 中展示的相同(如果您的浏览器支持它)。

清单 2. JavaScript 客户端代码

var ws = new WebSocket('ws://127.0.0.1:
8080/async'); ws.onopen =
function() { // called when connection is opened }; ws.onerror = function(e) { // called in case of error, when connection is broken in example }; ws.onclose = function() { // called when connexion is closed }; ws.onmessage = function(msg) { // called when the server sends a message to the client. // msg.data contains the message. }; // Here is how to send some data to the server ws.send('some data'); // To close the socket:ws.close();

可以发送和接收任何类型的数据。WebSockets 可被看作是 TCP 套接字,因此由客户端和服务器决定要发送的数据类型。这里给出的示例发送的是 JSON 字符串。

在创建了 JavaScript WebSocket 对象后,如果在浏览器的控制台(或 Firebug)深入查看 HTTP 请求中的握手,您应该看到特定于 WebSocket 的包头。

时间: 2024-10-03 01:48:51

反向Ajax:WebSockets一个强大的解决方案的相关文章

开源反向Ajax库:了解Atmosphere和CometD

本 系列 文章向您展示如何使用反向 Ajax 技术开发事件驱动的 Web 程序.第 1 部分 介绍了 Reverse Ajax.轮询.流.Comet 和长轮询.第 2 部分 介绍了如何使用 WebSocket 实现 Reverse Ajax,还讨论了使用 Comet 和 WebSocket 的 Web 服务器的限制.第 3 部分 探讨了当您需要支持多个服务器或提供一个用户可以自己的服务器上部署的独立 Web 应用程序时,您实现自己的 Comet 或 WebSocket 通信系统的过程中会遇到的一

开源反向Ajax库:事件驱动的Web开发

本 系列 文章向您展示如何使用反向 Ajax http://www.aliyun.com/zixun/aggregation/7332.html">技术开发事件驱动的 Web 程序.第 1 部分 介绍了反向 Ajax.轮询.流.Comet 和长轮询.第 2 部分 介绍了如何使用 WebSocket,还讨论了使用 Comet 和 WebSocket 的 Web 服务器的限制.第 3 部分 探讨了当您需要支持多个服务器或提供一个用户可以自己的服务器上部署的独立 Web 应用程序时,您实现自己的

反向Ajax:Comet用于服务器与客户端之间响应通信的流和长轮询

客户端的示例使用的是 jQuery http://www.aliyun.com/zixun/aggregation/33906.html">JavaScript 库.在这首篇文章中,我们探索不同的反向 Ajax 技术,使用可下载的例子来学习使用了流 (streaming) 方法和长轮询 (long polling) 方法的 Comet. Web 开发在过去的几年中有了很大的进展,我们已经远超了把静态网页链接在一起的做法,这种做法会引起浏览器的刷新,并且要等待页面的加载.现在需要的是能够通过

反向Ajax 30分钟快速掌握_AJAX相关

场景1:当有新邮件的时候,网页自动弹出提示信息而无需用户手动的刷新收件箱. 场景2:当用户的手机扫描完成页面中的二维码以后,页面会自动跳转. 场景3:在类似聊天室的环境中有任何人发言,所有登录用户都可以即时看见信息. 与传统的MVC模型请求必须从客户端发起由服务器响应相比,使用反向Ajax能够模拟服务器端主动向客户端推送事件从而提高用户体验.本文将分两个部分讨论反向Ajax技术,包括:Comet和WebSocket.文章旨在演示如何实现以上两种技术手段,Struts2或SpringMVC中的应用

反向Ajax 30分钟快速掌握

场景1:当有新邮件的时候,网页自动弹出提示信息而无需用户手动的刷新收件箱. 场景2:当用户的手机扫描完成页面中的二维码以后,页面会自动跳转. 场景3:在类似聊天室的环境中有任何人发言,所有登录用户都可以即时看见信息. 与传统的MVC模型请求必须从客户端发起由服务器响应相比,使用反向Ajax能够模拟服务器端主动向客户端推送事件从而提高用户体验.本文将分两个部分讨论反向Ajax技术,包括:Comet和WebSocket.文章旨在演示如何实现以上两种技术手段,Struts2或SpringMVC中的应用

奇怪,为什么我问了一个ajax的一个问题,会被删除?

问题描述 奇怪,为什么我问了一个ajax的一个问题,会被删除? 是因为ajax的问题不能问,还是什么原因?难道是涉及一些法律问题,还是什么? 解决方案 一个奇怪的问题一个很奇怪的问题

php-如何退出死循环?反向ajax的优势在哪里?

问题描述 如何退出死循环?反向ajax的优势在哪里? 以PHP为例,我在用反向ajax时使用死循环,在关闭浏览器后,我在数据库中手动插入数据,却发现插入后的数据自动被更新(与进入死循环后产生的效果一致). 然后我再一看内存占用率,开始意识到,死循环无法靠关闭浏览器退出. 于是我就不明白了, 1.反向ajax为什么要用死循环,内存不会炸?其优势在哪里? 2.死循环如何才能退出? 解决方案 WebSocket 就 WebSocket,干嘛制造的乖名词? 在这个应用中,php 充当了 WebSocke

数据-ajax 根据一个下拉框的值的不同 另一个下拉框对应显示的值也不同

问题描述 ajax 根据一个下拉框的值的不同 另一个下拉框对应显示的值也不同 图片就是这样的,项目的类别有商户和银行两种,我要根据选择商户还是银行,让下边对应的选择已有商户 的下拉框中显示不同的数据,数据都需要通过后台去数据库里查的. 这个是不是要ajax啊?谁能告诉告诉我怎么写 .急急急 ..在线等好心人..... 解决方案 html代码 <tr> <td style="width:15%"> 一级 </td> <td style="

Ajax跨域的完美解决方案

公司要做一个活动页面,在其过程中发现所有的接口,ajax请求跨域.这里对跨域做个简单介绍以及提供几种解决办法. 由于浏览器实现的同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,所以AJAX是不允许跨域的.这里提供自己常用的三种方法: 1.jsonp访问 JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问: 实现方式 1) <