生活随笔
收集整理的這篇文章主要介紹了
使用Strophe连接xmpp，轻松构建web即时聊天工具
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
轉(zhuǎn)自：http://blog.csdn.net/e421083458/article/details/38081419
使用Strophe連接xmpp，輕松構(gòu)建web即時(shí)聊天工具。
實(shí)現(xiàn)原理
實(shí)現(xiàn)webim方法有很多，最關(guān)鍵的問題是保持和服務(wù)端的連接。如何保障會(huì)話的即時(shí)性和連通性。常用的有poll, long poll,? comet等;; 其中poll的方式效果最差，一般都會(huì)有1到2秒的延遲。long poll和comet技術(shù)比較新，因?yàn)閔ttp無狀態(tài)的原因，這種長(zhǎng)連接方式要保持，一般都需要服務(wù)端額外代碼提供支持。像gtalk采用的就是long poll的方式。服務(wù)端常會(huì)使用異步IO等方式來支持高并發(fā)。
本文使用的是XEP標(biāo)準(zhǔn)擴(kuò)展規(guī)范,XEP-0124 提供的方法實(shí)現(xiàn)WebIM. 思路即使用一個(gè)JavaScript的xep-0124的實(shí)現(xiàn)，直接連接xmpp server端。目前xep-0124的實(shí)現(xiàn)，在大部分的xmpp server實(shí)現(xiàn)中都支持，本文使用的是OpenFire 3.6.4 作為Xmpp Server。
XEP 0124規(guī)范定義了一個(gè)比較完整和安全的協(xié)議，具體請(qǐng)參閱相當(dāng)文檔。本文使用javascript端的XEP-0124的實(shí)現(xiàn)為Strophe的js實(shí)現(xiàn)。
另外因?yàn)闉g覽器javascript跨域問題，需要使webim里調(diào)用javascript也是80端口，并同一子域，所以使用Apache或者Nginx 在80端口，并轉(zhuǎn)發(fā)/http-bind請(qǐng)求至Xmpp Server的http-binding端口。本機(jī)使用Nginx. xmpp server 使用使用7070端口。
一、安裝openfire:http://blog.csdn.net/e421083458/article/details/38037373
二、配置apache
??? 我們下載安裝的是httpd-2.2.17-win32-x86-no_ssl.msi，安裝完成后，我們需要配置一下，由于jwchat是用javacript去和openfire進(jìn)行通訊的，所以他們之間的通訊是基于http的，但是由于瀏覽器為了安全性是不允許javascript跨域訪問的。我們必須通過別的技術(shù)來繞過這限制，所以我們采取apache服務(wù)器的重定向功能去突破這個(gè)限制。
???? 安裝完成后進(jìn)入到apache的安裝目找到conf文件夾下的httpd.conf文件，用記事本打開，把下列幾個(gè)配置項(xiàng)放開（默認(rèn)被注釋掉了）
1、LoadModule rewrite_module modules/mod_rewrite.so
2、LoadModule proxy_module modules/mod_proxy.so
3、LoadModule proxy_http_module modules/mod_proxy_http.so
然后再在本配置文件的末尾加入如下幾行配置
? ServerName blzc.com
? <Directory /var/jwchat>
??? Options? +Indexes +MultiViews
? </Directory>
? AddDefaultCharset UTF-8
? RewriteEngine on
? ProxyPass /jwchat/http-bind/ http://blzc.com:7070/http-bind/? ?
在此有必要對(duì)proxyPass的參數(shù)做些說明
“/jwchat/http-bind/”：jwchat就通過訪問http://域名/jwchat/http-bind/地址去和openfire通訊，apache接到請(qǐng)求后就會(huì)重新定向到http://blzc.com:7070/http-bind/
“http://blzc.com:7070/http-bind/”：被重新定向的地址，也就是我們的openfire的http訪問地址。7070端口是openfire的默認(rèn)訪問端口，當(dāng)然我們也可以進(jìn)入openfire進(jìn)行配置。
三、openfire的配置
安裝好openfire后進(jìn)入web式的管理界面，選擇服務(wù)器-》服務(wù)器管理器-》系統(tǒng)屬性
在里邊添加兩個(gè)屬性（記得選擇不加密）
xmpp.httpbind.client.requests.polling = 0
xmpp.httpbind.client.requests.wait = 10
四、創(chuàng)建聊天腳本
創(chuàng)建index.html頁(yè)面：
[html]?view plaincopy print?
<!DOCTYPE?html>?? <html>?? ????<head>?? ????????<title>Latest?content</title>?? ????????<script?type="text/javascript"?src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>?? ????????<script?type="text/javascript"???? src="strophejs/strophe.js"></script>?? ????????<script?type="text/javascript"??? src="pingstream.js"></script>?? ????</head>?? ????<body>?? ??????<div?id='login'?style='text-align:?left'>?? ????????<form?name='cred'>?? ??????????<label?for='jid'>JID:</label>?? ??????????<input?type='text'?id='jid'?value="richard@csdn.shimiso.com"?/><br/>?? ??????????<label?for='pass'>Password:</label>?? ??????????<input?type='password'?id='pass'?value="niuyufu123"?/><br/>?? ??????????<input?type='button'?id='connect'?value='connect'?/>?? ????????</form>?? ??????</div>?? ??????<hr?/>?? ??????<div?style="text-align:?left">?? ??????????<label?for='tojid'>tojid</label>?? ??????????<input?type='text'?id='tojid'?value=""?/><br/>?? ??????????<label?for='msg'>msg:</label>?? ??????????<textarea?id="msg">Hello?world!!!</textarea>?? ??????????<br/>?? ??????????<input?type='button'?id='replay'?value='replay'?/>?? ??????</div>?? ??????<hr?/>?? ??????<div?id='log'></div>?? ????</body>?? </html>??
創(chuàng)建pingstream.js
[javascript]?view plaincopy print?
var?BOSH_SERVICE?=?'/http-bind/';?? var?connection?=?null;?? ?? function?log(msg)??? {?? ????$('#log').append('<div></div>').append(document.createTextNode(msg));?? }?? ?? ? ? ? ?? function?onConnect(status)?? {?? ????if?(status?==?Strophe.Status.CONNECTING)?{?? ????log('Strophe?is?connecting.');?? ????}?else?if?(status?==?Strophe.Status.CONNFAIL)?{?? ????log('Strophe?failed?to?connect.');?? ????$('#connect').get(0).value?=?'connect';?? ????}?else?if?(status?==?Strophe.Status.DISCONNECTING)?{?? ????log('Strophe?is?disconnecting.');?? ????}?else?if?(status?==?Strophe.Status.DISCONNECTED)?{?? ????log('Strophe?is?disconnected.');?? ????$('#connect').get(0).value?=?'connect';?? ????}?else?if?(status?==?Strophe.Status.CONNECTED)?{?? ????log('Strophe?is?connected.');?? ????log('ECHOBOT:?Send?a?message?to?'?+?connection.jid?+??? ????????'?to?talk?to?me.');?? ?????? ????connection.addHandler(onMessage,?null,?'message',?null,?null,??null);??? ????connection.send($pres().tree());?? ????}?? }?? ?? ? ? ? ? ?? function?onMessage(msg)?{?? ????var?to?=?msg.getAttribute('to');?? ????var?from?=?msg.getAttribute('from');?? ????var?type?=?msg.getAttribute('type');?? ????var?elems?=?msg.getElementsByTagName('body');?? ?? ????if?(type?==?"chat"?&&?elems.length?>?0)?{?? ????var?body?=?elems[0];?? ?? ????log('ECHOBOT:?I?got?a?message?from?'?+?from?+?':?'?+??? ????????Strophe.getText(body));?? ?????? ? ? ? ? ? ?? ?????? ?????? ????}?? ????return?true;?? }?? ?? ? ? ? ? ? ?? function?sendMsg(toId,fromId,msg)?{?? ????var?reply?=?$msg({to:?toId,?from:fromId?,?type:?'chat'}).cnode(Strophe.xmlElement('body',?''?,msg));?? ????connection.send(reply.tree());?? ????log('ECHOBOT:?I?sent?'?+?toId?+?':?'?+?msg);?? }?? ?? ? ? ?? $(document).ready(function?()?{?? ????connection?=?new?Strophe.Connection(BOSH_SERVICE);?? ?? ?????? ????connection.rawInput?=?function?(data)?{?console.log('RECV:?'?+?data);?};?? ????connection.rawOutput?=?function?(data)?{?console.log('SEND:?'?+?data);?};?? ?? ?????? ?????? ?? ????$('#connect').bind('click',?function?()?{?? ????var?button?=?$('#connect').get(0);?? ????if?(button.value?==?'connect')?{?? ????????button.value?=?'disconnect';?? ????????connection.connect($('#jid').get(0).value,?? ???????????????????$('#pass').get(0).value,?? ???????????????????onConnect);?? ????}?else?{?? ????????button.value?=?'connect';?? ????????connection.disconnect();?? ????}?? ????});?? ?????? ????$('#replay').bind('click',?function?()?{?? ????????toId?=?$('#tojid').val();?? ????????fromId?=?$('#jid').val();?? ????????msg=$('#msg').val();?? ????????sendMsg(toId,fromId,msg);?? ????});?? });??
用pandian與聊天頁(yè)并行測(cè)試。
成功后的截圖：
代碼下載地址：http://download.csdn.net/detail/e421083458/7672297
總結(jié)
以上是生活随笔為你收集整理的使用Strophe连接xmpp，轻松构建web即时聊天工具的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
