转载: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
- 进入Nginx页面根目录
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">// 当接收到<message>节,调用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">// 首先要发送一个<presence>给服务器(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">// 解析出<message>的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">&&</span> <span class="nx">elems</span><span class="p">.</span><span class="nx">length</span> <span class="o">></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">":<br>"</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">"<br>"</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">// 创建一个<message>元素并发送</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">":<br>"</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">"<br>"</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的页面可立即看到消息。