使用Openfire和Strophe构建基于XMPP的IM简单示例

最新推荐文章于 2024-03-10 13:56:26 发布

franywhy

最新推荐文章于 2024-03-10 13:56:26 发布

阅读量1k

点赞数

分类专栏： xmpp

xmpp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

转载：http://blog.gopersist.com/2017/02/21/xmpp-openfire-strophe/index.html

名词解释

XMPP：Extensible Messaging and Presence Protocol，前称Jabber，是一种以XML为基础的开放式实时通信协议。

Openfire：是开源的，基于XMPP，采用Java开发的即时通讯服务器。

Strophe：一个Javascript版的XMPP类库。

BOSH：Bidirectional-streams Over Synchronous HTTP，为双向同步数据提供一个模拟层，借助这个标准可以建立一个较长的HTTP连接，当有新数据时，马上返回数据并关闭，否则请求失效。无论哪种情况，都会重新建立一个请求。

安装Openfire

以下基于Centos6安装Openfire：

下载openfire-4.1.2-1.x86_64.rpm

http://www.igniterealtime.org/downloads/index.jsp

安装

2行

sudo rpm -ivh openfire-4.1.2-1.x86_64.rpm

Openfire会被安装在/opt/openfire。

启动

2行

sudo /etc/init.d/openfire start

Web界面配置

浏览器访问服务器9090端口，如：http://172.16.218.131:9090/

进入后，语言选『简体中文』，数据库选择『嵌入的数据库』，设置管理员密码，其他默认。最后进入管理界面（使用admin和刚才设置的密码登录）。

在『服务器』-『服务器设置』-『HTTP绑定』-『Script Syntax』中选择『启用』，保存设置。

安装Nginx

使用Nginx作为htto-bind代理，并提供Web服务。

创建源配置文件

3行

sudo vi /etc/yum.repos.d/nginx.repo

# 填入如下内容： [nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/$releasever/$basearch/ gpgcheck=0 enabled=1

安装Nginx

2行

sudo yum install nginx -y

修改配置

3行

sudo vi /etc/nginx/conf.d/default.conf

# 在server节点下增加下列内容： location /http-bind { proxy_pass http://127.0.0.1:7070; }

启动Nginx

2行

sudo nginx

创建HTML和JS

2行

cd /usr/share/nginx/html/

创建HTML

2行

sudo vi imdemo.html

内容如下：

25行

<!DOCTYPE html>
<html>
<head>
    <script src='//cdn.bootcss.com/jquery/1.9.1/jquery.min.js'></script>
    <script src='//cdn.bootcss.com/strophe.js/1.2.12/strophe.min.js'></script>
    <script src='imdemo.js'></script>
</head>
<body>
    JID：<input type="text" id="input-jid">
    <br>
    密码：<input type="password" id="input-pwd">
    <br>
    <button id="btn-login">登录</button>
    <div id="msg" style="height: 400px; width: 400px; overflow: scroll;"></div>
    联系人JID：
    <input type="text" id="input-contacts">
    <br>
    消息：
    <br>
    <textarea id="input-msg" cols="30" rows="4"></textarea>
    <br>
    <button id="btn-send">发送</button>
</body>
</html>

创建JS

2行

sudo vi imdemo.js

内容如下：

92行

// XMPP服务器BOSH地址
var BOSH_SERVICE = '/http-bind/';

// XMPP连接 var connection = null;

// 当前状态是否连接 var connected = false;

// 当前登录的JID var jid = "";

// 连接状态改变的事件 function onConnect(status) { console.log('status: ' + status) if (status Strophe.Status.CONNFAIL) { alert("连接失败！"); } else if (status Strophe.Status.AUTHFAIL) { alert("登录失败！"); } else if (status Strophe.Status.DISCONNECTED) { alert("连接断开！"); connected = false; } else if (status Strophe.Status.CONNECTED) { alert("连接成功，可以开始聊天了！"); connected = true;

7行

    <span class="c1">// 当接收到&lt;message&gt;节，调用onMessage回调函数</span>
    <span class="nx">connection</span><span class="p">.</span><span class="nx">addHandler</span><span class="p">(</span><span class="nx">onMessage</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s1">'message'</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">);</span>

    <span class="c1">// 首先要发送一个&lt;presence&gt;给服务器（initial presence）</span>
    <span class="nx">connection</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">$pres</span><span class="p">().</span><span class="nx">tree</span><span class="p">());</span>
<span class="p">}</span>

}

// 接收到<message> function onMessage(msg) { console.log('--- msg ---', msg);

11行

<span class="c1">// 解析出&lt;message&gt;的from、type属性，以及body子元素</span>
<span class="kd">var</span> <span class="nx">from</span> <span class="o">=</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">'from'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">type</span> <span class="o">=</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s1">'type'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">elems</span> <span class="o">=</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'body'</span><span class="p">);</span>

<span class="k">if</span> <span class="p">(</span><span class="nx">type</span> <span class="o">==</span> <span class="s2">"chat"</span> <span class="o">&amp;&amp;</span> <span class="nx">elems</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">body</span> <span class="o">=</span> <span class="nx">elems</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="nx">$</span><span class="p">(</span><span class="s2">"#msg"</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">from</span> <span class="o">+</span> <span class="s2">":&lt;br&gt;"</span> <span class="o">+</span> <span class="nx">Strophe</span><span class="p">.</span><span class="nx">getText</span><span class="p">(</span><span class="nx">body</span><span class="p">)</span> <span class="o">+</span> <span class="s2">"&lt;br&gt;"</span><span class="p">)</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">true</span><span class="p">;</span>

}

$(document).ready(function() {

34行

<span class="c1">// 通过BOSH连接XMPP服务器</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#btn-login'</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="nx">connected</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'jid: '</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#input-jid"</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'pwd: '</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#input-pwd"</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
        <span class="nx">connection</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Strophe</span><span class="p">.</span><span class="nx">Connection</span><span class="p">(</span><span class="nx">BOSH_SERVICE</span><span class="p">);</span>
        <span class="nx">connection</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">"#input-jid"</span><span class="p">).</span><span class="nx">val</span><span class="p">(),</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#input-pwd"</span><span class="p">).</span><span class="nx">val</span><span class="p">(),</span> <span class="nx">onConnect</span><span class="p">);</span>
        <span class="nx">jid</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#input-jid"</span><span class="p">).</span><span class="nx">val</span><span class="p">();</span>
    <span class="p">}</span>
<span class="p">});</span>

<span class="c1">// 发送消息</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#btn-send"</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">connected</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">"#input-contacts"</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="o">==</span> <span class="s1">''</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">alert</span><span class="p">(</span><span class="s2">"请输入联系人！"</span><span class="p">);</span>
            <span class="k">return</span><span class="p">;</span>
        <span class="p">}</span>

        <span class="c1">// 创建一个&lt;message&gt;元素并发送</span>
        <span class="kd">var</span> <span class="nx">msg</span> <span class="o">=</span> <span class="nx">$msg</span><span class="p">({</span>
            <span class="na">to</span><span class="p">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#input-contacts"</span><span class="p">).</span><span class="nx">val</span><span class="p">(),</span>
            <span class="na">from</span><span class="p">:</span> <span class="nx">jid</span><span class="p">,</span> 
            <span class="na">type</span><span class="p">:</span> <span class="s1">'chat'</span>
        <span class="p">}).</span><span class="nx">c</span><span class="p">(</span><span class="s2">"body"</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#input-msg"</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
        <span class="nx">connection</span><span class="p">.</span><span class="nx">send</span><span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">tree</span><span class="p">());</span>

        <span class="nx">$</span><span class="p">(</span><span class="s2">"#msg"</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">jid</span> <span class="o">+</span> <span class="s2">":&lt;br&gt;"</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#input-msg"</span><span class="p">).</span><span class="nx">val</span><span class="p">()</span> <span class="o">+</span> <span class="s2">"&lt;br&gt;"</span><span class="p">);</span>
        <span class="nx">$</span><span class="p">(</span><span class="s2">"#input-msg"</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="s1">''</span><span class="p">);</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="nx">alert</span><span class="p">(</span><span class="s2">"请先登录！"</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">});</span>

});

Openfire添加用户

进入Openfire管理控制台，『用户/用户群』-『用户』-『新建用户』，创建两个用户，用户名为one和two，密码都为111111。

测试

打开浏览器，输入imdemo.html的地址，如：http://172.16.218.131/imdemo.html。

『JID』输入one@localhost，『密码』输入111111，登录。

再打开一个Tab，同样的网址，『JID』输入two@localhost，输入密码后登录。

在登录one的页面中，『联系人JID』输入two@localhost，并输入『消息』后发送。two的页面可立即看到消息。同样，在two的页面，『联系人JID』输入one@localhost，并输入『消息』后发送。one的页面可立即看到消息。

franywhy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Openfire和Strophe构建基于XMPP的IM简单示例

转载：http://blog.gopersist.com/2017/02/21/xmpp-openfire-strophe/index.html名词解释XMPP：Extensible Messaging and Presence Protocol，前称Jabber，是一种以XML为基础的开放式实时通信协议。Openfire：是开源的，基于XMPP，采用Java开发的即时通讯服务器。...
复制链接

扫一扫