XMPPHP+StropheJS+OpenFire(xmpp协议)构建Web通知系统 | rin部落-web前端开发-主流web技术分享博客

我们要实现的目的：

该次只用于实现，目的要达到一个在线实时通知系统，此次实现后可根据实验结果开发WebIM系统或者在线游戏系统；

“当客户端打开浏览器并登录到指定网址的后，服务器主动下发通知到客户端的浏览器，达到实时通知的目的。”

我们要准备的：

本次采用PHP来实现，所以需要一个php的服务端，只搭建实验场景推荐使用如下配置：

1.PHP环境：xampp,wampsever等都可以

2.支持PHP的XMPP服务协议：XMPPHP

3.支持XMPP的JS库：StropheJS

4.jQuery：jQuery

5.XMPP服务器：OpenFire

有了这些我们就可以开始我们的计划了。

开始入手：

首先服务器的架设我就不说了，下面就说一下要注意的地方。我采用的是xampp，如何使用，可以到官网了解一下。

先安装OpenFire，其实只要一直下一步就可以了，安装后要修改的地方如下，我的使用的是中文的3.9.3，所以如下：

enter image description here

然后建立两个用户test与message，密码都为111111

要修改apache的httpd.conf文件下的内容如下：

LoadModule proxy_http_module modules/mod_proxy_http.so
LoadModule proxy_module modules/mod_proxy.so

找到上面两处，将前面的#号去掉，然后拉到文件最下面增加下面内容：

# XMPP proxy rule
ProxyRequests Off
ProxyPass /xmpp-httpbind http://127.0.0.1:7070/http-bind/
ProxyPassReverse /xmpp-httpbind http://127.0.0.1:7070/http-bind/

这样，基本上就架设完毕了。

下面编辑一个index.html文件等待接收通知内容：

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="content-type">
        <title>content</title>
        <script type="text/javascript" src="jquery-1.6.3.min.js"></script>
        <script type="text/javascript" src="strophejs/strophe.min.js"></script>
        <script type="text/javascript" src="message.js"></script>
    </head>
    <body>
        <h1>Content:</h1>
        <div id="notifications"></div>
    </body>
</html>

上面用到的js文件放到指定位置。但是有一个需要手动编写的message.js文件，内容如下：

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

function notifyUser(msg) 
{
    var elems = msg.getElementsByTagName('body');
    var body = elems[0];
    $('#notifications').append(Strophe.getText(body));
    return true;
}
function log(msg){    
    $('#notifications').append('<p class="welcome">'+msg+'</p>');
}
function onConnect(status)
{    
    if (status == Strophe.Status.CONNECTING) {
        log('Strophe is connecting.');
    } else if (status == Strophe.Status.CONNFAIL) {
        log('Strophe failed to connect.');
    } else if (status == Strophe.Status.DISCONNECTING) {
        log('Strophe is disconnecting.');
    } else if (status == Strophe.Status.DISCONNECTED) {
        log('Strophe is disconnected.');
    } else if (status == Strophe.Status.CONNECTED) {
        log('Strophe is connected.');
        $('#notifications').append('<p class="welcome">'+connection.jid+'连接成功,等待消息</p>');
        connection.addHandler(notifyUser, null, 'message', null, null,  null);
        connection.send($pres().tree());
    }
}

$(document).ready(function () {
    connection = new Strophe.Connection(BOSH_SERVICE);    
    connection.connect('message@127.0.0.1','111111',onConnect);
});

注意：有些教程中将上面的connection.connect()的参数中第一个参数只写了用户名而没有填写域，这样会造成一直在连接中，或者连接成功，但是接收不到通知的情况，一定要完整的填写域。

客户端这样就可以了，下面我们来制作一个发送通知的页面：

创建一个send.php文件，内容如下：

<?php

require_once('XMPPHP/XMPP.php');

$conn = new XMPPHP_XMPP('192.168.1.248',5222, 'test','111111','xmpphp','192.168.1.248');
$conn->useEncryption(false);
$conn->connect(10);
$conn->processUntil('session_start');
$conn->presence();
$conn->message('sendinguser@192.168.1.248', 'send message!!!');
$conn->disconnect();

我想不用我说太多各个文件的存放位置吧？如果想要了解该内容的那么肯定需要懂html，js，php，了解语法与相关函数的作用，所以，根据代码也能知道相关文件的存放路径吧。

发布项目后通过浏览器浏览index.html页面，然后等到出现提示连接成功的信息后打开send.php页面，你就会发现index.html页面出现了通知内容

enter image description here

测试代码：下载

2014-09-12