使用 XMPP 构建一个基于 web 的通知工具(6)_H5之家

现在您需要创建用户界面来接收通知。Strophe.js 是用于通过 BOSH 发送和接收 XMPP 数据的常用 JavaScript 库。对于 Pingstream 中的目的，您只需接收数据，尽管有一点是显而易见的：双向通信允许您快速构建丰富的协作环境。

尽管有几个版本，但 Strophe 的 JavaScript 版本作为一个基于浏览器的 XMPP 客户端对您而言是最有用的。下载压缩包（参见）并将其解压缩到 pingstream 的 strophejs 文件夹中。

jQuery JavaScript 框架极大地简化了事件处理和 DOM 操作。本文提供的 Strophe.js 示例广泛使用该框架，这两者简直是 “天生一对”。下载 jQuery（参见中的链接）并将这个缩微版放到 pingstream 中的 jquery 文件夹中。

新建一个 index.html 文件。在该文件中包含对刚才下载的 Strophe 和 jQuery 库的引用，以及对稍后即将定义的 pingstream.js 库的引用。在 body 元素中，添加一个 ID 为 notifications 的 div 元素，如所示：

清单 23. 客户端 HTML 页面

<!DOCTYPE html> <html> <head> <title>Latest content</title> <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="strophejs/strophe.js"></script> <script type="text/javascript" src="pingstream.js"></script> </head> <body> <h1>Latest content:</h1> <div></div> </body> </html>

创建 JavaScript 文件 — pingstream.js — 您刚才在中引用的。在 pingstream.js 的顶端，定义此前在 Apache 中配置的 BOSH 代理端点，如所示：

清单 24. 设置 BOSH 端点

var BOSH_SERVICE = '/xmpp-httpbind'; var connection = null;

当页面完全加载后，您想自动连接到 XMPP 服务器。您可以使用 jQuery 的 $(document).ready 调用实现这个目标；其中，您新建一个 strophe.js Strophe.Connection 对象并用它连接到服务器，如所示：

清单 25. 建立一个通过 BOSH 的连接

$(document).ready(function () { connection = new Strophe.Connection(BOSH_SERVICE); connection.connect( "sendinguser@127.0.0.1", "sendingpass", onConnect); });

更健壮的选项

对于本教程的目的，您正在使用此前定义的发送方。对于一个更健壮的应用程序，更好的方法可能是为每个注册应用程序用户创建一个新用户，并将每个用户订阅到一个 “发布-订阅” 界面。或者，如果您将用户名和密码留空并将 XMPP 服务器配置为接受这种类型的连接，那么 Strophe.js 可以匿名登录。在这些情况下，将针对每个匿名用户动态创建一个 JID；这些 JID 必须受到管理。最后，您还可以扩展 XMPP 聊天室。

在中，Strophe.Connection.connect 方法包含一个对 onConnect 函数的引用，作为它的一个参数。onConnect 将在连接建立后立即启动。您可以利用这个机会来为入向消息添加一个通知处理程序；您在这里注册了一个名为 notifyUser 函数。随后，您发送了一个简单的联机状态节。

要确保您可以连接并接收新消息，您还需向用户发送一个友好通知。

将中的代码添加到您的 JavaScript 文件中的 $(document)ready 调用上方：

清单 26. 处理入向 XMPP 消息

function onConnect(status) { $('#notifications').html('<p>Hello! Any new posts will appear below.</p>'); connection.addHandler(notifyUser, null, 'message', null, null, null); connection.send($pres().tree()); }

最后，由于您注册了通知处理程序，因此，只要 XMPP 客户端接收到消息节，Strophe.js 就会调用 notifyUser(msg) 函数。msg 参数是 XML 节本身的一个表示，可以如所示查询：

清单 27. 查询 msg 参数

var elems = msg.getElementsByTagName('body'); var body = elems[0]; $('#notifications').append(Strophe.getText(body));

理想情况下，您希望对消息进行限制，以便只显示您的服务器端发送用户发送的消息。您可以将它封装到构成 notifyUser 函数主体的一个 if 语句中，如所示：

清单 28. notifyUser 函数

function notifyUser(msg) { if (msg.getAttribute('from') == "testuser@127.0.0.1/pingstream") { var elems = msg.getElementsByTagName('body'); var body = elems[0]; $('#notifications').append(Strophe.getText(body)); } return true; }

这个函数应位于在中定义的 onConnect 函数上方。

最终效果

在一个 web 浏览器中打开您的 index.html 文件。您应该会看到一个简单的标题和一条消息，该消息称更新将在下面显示（这可能会使您回想起您发给自己的测试通知，称 XMPP 连接正在成功运行）。

现在加载 backend.php。就像变戏法一样，来自 IBM developerWorks Web development 专区的最新更新将显示在您的页面上。其他带有 RSS 提要的示例源包括 Twitter 帐户、通讯社、以及来自服务器监控软甲的更新提要。

这是开发一个强大平台的简单起点。Strophe.js 能够促进应用程序的双向通信，尽管更简单的方法是使用标准的 jQuery HTTP 回拨来将用户输入送入系统，从而避免为您的应用程序编写一个 XMPP 后台监控进程的麻烦。更令人兴奋的是，当您 web 服务器用作 BOSH 代理时，完全无需太多来自服务器端 web 应用程序的输入，两个或更多 web 客户端就能通过 XMPP 相互通信。这种技术将对从办公室协作软件到游戏的很多软件产生深远影响。

结束语

本教程讨论了实时 web 应用程序的必要性，以及 XMPP 如何克服现有技术的缺点。为展示这种方法的效果，您使用 XMPPHP、Last RSS、Strophe.js、Openfire 和 PHP 开发了一个简单的 RSS 更新通知应用程序。

尽管需要一个附加服务器层和一些 JavaScript 新技术，但 XMPP 比传统 Ajax 轮询模型更加适合实时 web 应用程序。XMPP 更快，在开发和系统基础设置方面需要的开销更少，并且使用一个强大的新兴 web 开发标准。

下载

描述名字大小

Pingstream 源代码pingstream.zip238KB