`
mineral
  • 浏览: 290799 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

WebIM Client简单实现

nginxJavaScriptCometApache配置管理 
阅读更多

WEBIM的简单实现

Authors: bm888888@gmail.com
Copyright:没有限制,拷后留着作者名即可.
Abstract: 本文描述了使用javascript直接连接xmpp server的方法和详细配置，使用XEP-0124和xmpp server无缝接合。从而实现webim的实时性和高效性。


实现原理

    实现webim方法有很多，最关键的问题是保持和服务端的连接。如何保障会话的即时性和连通性。常用的有poll, long poll,  comet等;; 其中poll的方式效果最差，一般都会有1到2秒的延迟。long poll和comet技术比较新，因为http无状态的原因，这种长连接方式要保持，一般都需要服务端额外代码提供支持。像gtalk采用的就是long poll的方式。服务端常会使用异步IO等方式来支持高并发。

    本文使用的是XEP标准扩展规范,XEP-0124 提供的方法实现WebIM. 思路即使用一个javascript的xep-0124的实现，直接连接xmpp server端。目前xep-0124的实现，在大部分的xmpp server实现中都支持，本文使用的是OpenFire 3.6.4 作为Xmpp Server。
  
    XEP 0124规范定义了一个比较完整和安全的协议，具体请参阅相当文档。本文使用javascript端的XEP-0124的实现为Strophe的js实现。

    另外因为浏览器javascript跨域问题，需要使webim里调用javascript也是80端口，并同一子域，所以使用Apache或者Nginx 在80端口，并转发/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
    下载Nginx或者Apache并安装配置。只需一个，作为80端口服务的代理转发服务器。

安装配置

   OpenFire的配置
    需要打开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的配置
    打开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;
}

黑字为原来的配置， 红色为需要增加的行。

   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模块。

编写WebIM

    上面就把服务器配置好了，下面我们来开发我们的简易版的纯WEB的IM.

    解压strophejs-master.tar.gz，后，可以得到 b64.js , md5.js sha1.js strophe.js ，这是我们要用到的几个js基础类库。在我们的页面中将引用。里面自带了一个examples目录，也可以学习里面的例子，以熟悉strophe的语法。

    我这个例子，就从echobot.html这个example里修改得到。

    具体的UI布局部分省略，都是基本的html元素加上几个样式，看代码就清楚。

    Strophe是一个优秀的xep-0124类库，使用它非常方便地就集成了。


    Strophe建立连接

    以下代码在echobot.js中。
    

    代码1：使用Strophe建立服务端连接

    
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();
}
    });
    
以上代码说明：

BOSH_SERVICE ： 这是xmpp server 的http binding的url地址。注:Openfire为: http://127.0.0.1:7070/http-bind/  我们需要使用Apache或者nginx作Proxy转发，所以这里配置是  "/http-bind/" 。

使用Connection.connect方法连接OF服务器，传入用户名、密码、以及连接成功的回调函数onConnect三个参数。

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

这是连接成功后，增加一个处理消息的回调函数。当收到消息时，会调用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里还有一些其它的内容，如果你关心，可以接着处理它。


  Strophe发送消息

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

toId = $('#tojid').val();
var reply = $msg({to: toId, from: fromId , type: 'chat'}).cnode(Strophe.xmlElement('body', '' ,msg));
connection.send(reply.tree());
 
也非常简单，先组装好一个消息，然后调用
调用connection.send() 发送消息即可。


Strophe关闭连接


connection.disconnect();

   Strophe的日志和调试

   你可以通过编写一行日志处理函数，来跟踪strophe.

    把这行注释去掉，并在函数实现里写你的日志处理就可以。

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

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

      
function log(msg)
{
    $('#log').append('<div></div>').append(document.createTextNode(msg));
}
 
   直接把内容输出到本页的一个log div里，注：使用的是jquery的语法。


另外你还可以定义rawInput,rawOutput函数来监控connection上的IO内容，可以看例子中的代码。

    connection.rawInput = rawInput;
    connection.rawOutput = rawOutput;

...
function rawInput(data)
{
    log('RECV: ' + data);
}

function rawOutput(data)
{
    log('SENT: ' + data);
}

本例子中，把发送和接收的内容，也输出到log中。

另外，你还可以使用Firefox的firebug插件来调试Javascript。

 

运行效果


本文完整Source下载


参考手册

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

 

 

4
顶
0
踩
分享到：
| 服务器时间同步
评论
3 楼 di1984HIT 2014-08-01  
xiexie~~
2 楼 wjilx2008 2012-12-11  
您好，我把demo载下来，配置好openfire和apache服务器，登陆时报错：NS_ERROR_DOM_BAD_URI: Access to restricted URI denied
[在此错误处中断]

req.xhr.send(req.data);

登陆的回调函数onConnect的state值为1即：Strophe.Status.CONNECTING
请问，这种错误是怎么回事？
1 楼 除了你无可取代 2012-08-06  
demo 能不能发我一份呢？ 谢谢喽
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    webim实现含src

    WebIM Client简单实现 本文描述了使用javascript直接连接xmpp server的方法和详细配置，使用XEP-0124和xmpp server无缝接合。从而实现webim的实时性和高效性。

    实现webim得用ajax

    实现WebIM的关键技术之一是Ajax（Asynchronous JavaScript and XML），它是一种使用JavaScript异步与服务器交换数据并更新部分网页的技术，而无需刷新整个页面。在本文中，我们将深入探讨如何利用Ajax实现WebIM系统...

    基于XMPP的webIm 实现

    基于XMPP协议的WEBIM 简单实现，如有开发openfire+spark/jwchat的可以参考

    WEBIM网站开发用途

    Sample.Client.rar这样的资源对于开发者来说是一份宝贵的实践材料，通过学习和利用，开发者可以快速掌握WEBIM的实现方式，并将其成功地应用于自己的项目中。无论是在团队协作还是用户交流场景下，WEBIM都是提升网站...

    webim

    WebIM，全称为Web即时通讯，是一种基于Web技术实现的在线聊天系统，它允许用户在浏览器中进行实时的文本、语音甚至视频通信，无需安装额外的客户端软件。WebIM的核心是利用WebSocket等现代网络通信协议，提供低延迟...

    免费下载WEBIM java pushlet .net php

    - `client.php`可能是PHP实现的客户端部分，处理用户界面和与服务器的交互。 - `leavemessage.php`可能涉及留言或消息留功能。 - `thread.php`可能处理聊天线程或会话管理。 - `button.php`、`mail.php`、`...

    WEBIM之Continuation方式实现

    【标题】"WEBIM之Continuation方式实现"主要探讨的是在网络通信中，特别是Web即时通讯（WebIM）场景下，如何利用Continuation技术优化数据传输和处理的方式。Continuation是一种编程模式，它允许将一个操作分阶段...

    openfire+smack开发webim笔记

    【标题】：“openfire+smack开发webim笔记”涉及的知识点详解 【一】XMPP（可扩展消息处理...WebIM的实现方式多样化，包括Ajax、Pushlet、Comet等技术，而知名厂商的成功案例则为开发者提供了丰富的实践经验和参考。

    WebIM_Ajax框架

    本 WebIM 系统采用 B/S 模式，使用浏览器 ajax 实现即时聊天。 服务器端采用 MC 设计模式，Controler 分为组包拆包模块（编码子模块、加密解密子模块、序列化/反序列化子模块）和主处理模块（包含：Manager、DAO）；...

    WebIM研究整理

    WebIM研究集合帖，绝对有所值 1.WebIM目录对应http://blog.csdn.net/zwdsmileface/article/details/45111111和http://blog.csdn.net/ibm_hoojo/article/details/7850540 2个帖子集合可以，但是后一篇帖子的jsjac.js...

    在线客服服务支持系统webim163

    在线客服服务支持系统WebIM163是一款专为网站提供实时交流功能的解决方案，它能够帮助企业或组织构建高效、便捷的在线客户服务系统。通过这款系统，访客可以在网站上直接与客服人员进行实时对话，提高客户满意度并...

    WebOS试探+WebIM简单演示

    《WebOS探索与WebIM简易实现》 在数字化时代的洪流中，WebOS（Web操作系统）作为一种基于浏览器的、无需本地安装的操作系统，为用户提供了一种全新的交互方式。它通过互联网将应用程序和服务整合到一起，使得用户...

    webim,即时通信软件,php

    WebIM是一款基于PHP和MySQL开发的即时通信软件，专门用于实现网页端的实时通信功能。在互联网应用中，即时通信已经成为提升用户体验、增强互动性的重要工具，尤其在社交平台、在线客服、协作工具等领域有着广泛的...

    webim(web即时通)学习文档

    WebIM（Web即时通讯）是一种基于网页的实时通信技术，它允许用户在浏览器上实现即时消息的发送和接收，无需安装额外的客户端软件。WebIM技术通常基于WebSocket、Long Polling、Server-Sent Events等现代浏览器支持的...

    webim-for-thinkphp

    WebIM（Web即时通讯）是一种在网页上实现即时通信功能的技术，常用于在线客服、社交应用等场景。它允许用户无需安装额外软件即可在浏览器中进行实时对话。本项目是WebIM的ThinkPHP集成版本，专为商城建站和企业网站...

    WebQQ WebIM WebSocket

    【描述】在现代互联网技术中，WebQQ WebIM WebSocket是一种实现即时通讯（Instant Messaging，IM）的方式，它利用WebSocket协议来实现在Web端进行实时双向通信。WebSocket协议是HTML5的一个重要特性，旨在提供低延迟...

    在线聊天WEBIM.rar

    WebIM，全称为Web即时通讯，是指通过Web浏览器实现的即时通讯功能，它允许用户无需安装额外软件即可进行实时交流。这个“在线聊天WEBIM.rar”压缩包很可能包含了构建一个WebIM系统的相关资源和代码。 在WebIM系统中...

    Webim for 记事狗插件

    WebIM-for-记事狗插件是为记事狗微博社区开发的站内即时消息系统，实现记事狗微博社区好友间的即时聊天。 NexTalk采用跨域WebSocket或JSONP，有效避免了Webim对社区站点本身资源占用，以支持大规模的同时在线用户。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics