中文字幕在线成人免费看_ WEBIM的簡(jiǎn)單實(shí)現

實(shí)現原理

實(shí)現webim方法有很多，最關(guān)鍵的問(wèn)題是保持和服務(wù)端的連接。如何保障會(huì )話(huà)的即時(shí)性和連通性。常用的有poll, long poll, comet等;; 其中poll的方式效果最差，一般都會(huì )有1到2秒的延遲。long poll和comet技術(shù)比較新，因為http無(wú)狀態(tài)的原因，這種長(cháng)連接方式要保持，一般都需要服務(wù)端額外代碼提供支持。像gtalk采用的就是long poll的方式。服務(wù)端常會(huì )使用異步IO等方式來(lái)支持高并發(fā)。

本文使用的是XEP標準擴展規范,XEP-0124 提供的方法實(shí)現WebIM. 思路即使用一個(gè)javascript的xep-0124的實(shí)現，直接連接xmpp server端。目前xep-0124的實(shí)現，在大部分的xmpp server實(shí)現中都支持，本文使用的是OpenFire 3.6.4 作為Xmpp Server。

XEP 0124規范定義了一個(gè)比較完整和安全的協(xié)議，具體請參閱相當文檔。本文使用javascript端的XEP-0124的實(shí)現為Strophe的js實(shí)現。

另外因為瀏覽器javascript跨域問(wèn)題，需要使webim里調用javascript也是80端口，并同一子域，所以使用Apache或者Nginx 在80端口，并轉發(fā)/http-bind請求至Xmpp Server的http-binding端口。本機使用Nginx. xmpp server 使用使用7070端口。結構為：

Web UI page.html

|| strophe.js Ajax request /http-bind/

Nginx/Apache port: 80 /http-bind/

XMPP Server http-bind port (OF: 7070) /http-bind/

安裝準備

下載OpenFire 3.6.4并安裝。http://www.igniterealtime.org/downloads/index.jsp

下載Strophe的javascript庫 http://code.stanziq.com/cgit/strophe/strophejs/snapshot/strophejs-master.tar.gz

下載Nginx或者Apache并安裝配置。只需一個(gè)，作為80端口服務(wù)的代理轉發(fā)服務(wù)器。

安裝配置

OpenFire的配置

需要打開(kāi)OpenFire的http-binding.具體為登錄后臺管理界面。Server->Server Settings->Http Binding:

這一項打勾 Enabled - Clients can connect to this server using HTTP binding.

下面Script Syntax ：

這一項打勾 Enabled - Allows BOSH clients with limited access to connect to the server

端口按默認的。

Nginx的配置

打開(kāi)nginx的配置文件nginx.conf，增加如下行：

#gzip on;

#增加

upstream bk.openfire {

server 127.0.0.1:7070;

}

location / {

root html;

index index.html index.htm;

}

后面增加：

location /http-bind {

proxy_pass http://bk.openfire;

proxy_buffering off;

proxy_redirect off;

proxy_read_timeout 120;

proxy_connect_timeout 120;

}

黑字為原來(lái)的配置，紅色為需要增加的行。

Apache的配置

在 httpd.conf 中加入下面幾行：

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

ProxyRequests Off
ProxyPass /http-bind http://127.0.0.1:7070/http-bind/
ProxyPassReverse /http-bind http://127.0.0.1:7070/http-bind/

注：需要apache有編譯proxy模塊。

編寫(xiě)WebIM

上面就把服務(wù)器配置好了，下面我們來(lái)開(kāi)發(fā)我們的簡(jiǎn)易版的純WEB的IM.

解壓strophejs-master.tar.gz，后，可以得到 b64.js , md5.js sha1.js strophe.js ，這是我們要用到的幾個(gè)js基礎類(lèi)庫。在我們的頁(yè)面中將引用。里面自帶了一個(gè)examples目錄，也可以學(xué)習里面的例子，以熟悉strophe的語(yǔ)法。

我這個(gè)例子，就從echobot.html這個(gè)example里修改得到。

具體的UI布局部分省略，都是基本的html元素加上幾個(gè)樣式，看代碼就清楚。

Strophe是一個(gè)優(yōu)秀的xep-0124類(lèi)庫，使用它非常方便地就集成了。

Strophe建立連接

以下代碼在echobot.js中。

代碼1：使用Strophe建立服務(wù)端連接

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.');

connection.addHandler(onMessage, null, 'message', null, null, null);

connection.send($pres().tree());

}

connection = new Strophe.Connection(BOSH_SERVICE);

connection.rawInput = rawInput;

connection.rawOutput = rawOutput;

//Strophe.log = function (level, msg) { log('LOG: ' + msg); };

$('#connect').bind('click', function () {

var button = $('#connect').get(0);

if (button.value == 'connect') {

button.value = 'disconnect';

fromId = $('#jid').val();

toId = $('#tojid').val();

log(fromId);

log(toId);

connection.connect($('#jid').get(0).value,

$('#pass').get(0).value,

onConnect);

} else {

button.value = 'connect';

connection.disconnect();

}

});

以上代碼說(shuō)明：

BOSH_SERVICE ：這是xmpp server 的http binding的url地址。注:Openfire為: http://127.0.0.1:7070/http-bind/ 我們需要使用Apache或者nginx作Proxy轉發(fā)，所以這里配置是 "/http-bind/" 。

使用Connection.connect方法連接OF服務(wù)器，傳入用戶(hù)名、密碼、以及連接成功的回調函數onConnect三個(gè)參數。

connection.addHandler(onMessage, null, 'message', null, null, null);

這是連接成功后，增加一個(gè)處理消息的回調函數。當收到消息時(shí)，會(huì )調用onMessage函數。

代碼2：onMessage()函數

function onMessage(msg) {

to = msg.getAttribute('from');

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];

appendToHis(new Date().toLocaleTimeString() + ' ' + from + ' say: ' + Strophe.getText(body));

}

// we must return true to keep the handler alive.

// returning false would remove it after it finishes.

return true;

}

這里，msg是收到的消息，使用Strophe.getText(body) 這行，返回了收到的IM消息。

msg里還有一些其它的內容，如果你關(guān)心，可以接著(zhù)處理它。

Strophe發(fā)送消息

msg=$('#msg').val();

toId = $('#tojid').val();

var reply = $msg({to: toId, from: fromId , type: 'chat'}).cnode(Strophe.xmlElement('body', '' ,msg));

connection.send(reply.tree());

也非常簡(jiǎn)單，先組裝好一個(gè)消息，然后調用

調用connection.send() 發(fā)送消息即可。

Strophe關(guān)閉連接

connection.disconnect();

Strophe的日志和調試

你可以通過(guò)編寫(xiě)一行日志處理函數，來(lái)跟蹤strophe.

把這行注釋去掉，并在函數實(shí)現里寫(xiě)你的日志處理就可以。

//Strophe.log = function (level, msg) { log('LOG: ' + msg); };

本例子中用的log()函數：

function log(msg)

{

$('#log').append('<div></div>').append(document.createTextNode(msg));

}

直接把內容輸出到本頁(yè)的一個(gè)log div里，注：使用的是jquery的語(yǔ)法。

另外你還可以定義rawInput,rawOutput函數來(lái)監控connection上的IO內容，可以看例子中的代碼。

connection.rawInput = rawInput;

connection.rawOutput = rawOutput;

...

function rawInput(data)

{

log('RECV: ' + data);

}

function rawOutput(data)

{

log('SENT: ' + data);

}

本例子中，把發(fā)送和接收的內容，也輸出到log中。

另外，你還可以使用Firefox的firebug插件來(lái)調試Javascript。

運行效果

本文完整Source下載

//TODO

GOOGLE DOCS 不提供上傳文件功能？我得找個(gè)地址。。。

webimclient.zip

參考手冊

[1] XEP 0124 http://xmpp.org/extensions/xep-0124.html

[2] The homepage for Strophe is http://code.stanziq.com/strophe

[3] Strophe 的API Doc http://people.chesspark.com/~jack/strophe-preview/doc/files/strophe-js.html

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久