2014-09-04 56 views
0

我正在尝试Jack Moffit的书中的示例:使用JavaScript和jQuery进行专业XMPP编程。具体来说,我正在尝试第3章中的hello world app,它应该通过使用bosh的web界面登录到xmpp服务器。我已经下载了http://media.wiley.com/product_ancillary/10/04705407/DOWNLOAD/9780470540718_Professional%20XMPP_Code%20Download.zip所需的全部代码。Strophejs XMPP如果JS代码没有托管在服务器上(CORS?),Hello World无法连接到服务器

当我在Chrome中打开文件Hello.html并打开JavaScript控制台时,没有问题,因此似乎文件中引用的脚本和css文件已成功加载。

这是的Hello.html文件:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
       "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
     <head> 
     <title>Hello - Chapter 3</title> 

     <link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/cupertino/jquery-ui.css'> 
     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script> 
     <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script> 
     <script src='../scripts/strophe.js'></script> 
     <script src='../scripts/flXHR.js'></script> 
     <script src='../scripts/strophe.flxhr.js'></script> 

     <link rel='stylesheet' href='hello.css'> 
     <script src='hello.js'></script> 
     </head> 
     <body> 
     <h1>Hello</h1> 

     <div id='log'> 
     </div> 

     <!-- login dialog --> 
     <div id='login_dialog' class='hidden'> 
      <label>JID:</label><input type='text' id='jid'> 
      <label>Password:</label><input type='password' id='password'> 
     </div> 
     </body> 
    </html> 

这是hello.js:

 var Hello = { 
     connection: null, 
     start_time: null, 

     log: function (msg) { 
      $('#log').append("<p>" + msg + "</p>"); 
     }, 

     send_ping: function (to) { 
      var ping = $iq({ 
       to: to, 
       type: "get", 
       id: "ping1"}).c("ping", {xmlns: "urn:xmpp:ping"}); 

      Hello.log("Sending ping to " + to + "."); 

      Hello.start_time = (new Date()).getTime(); 
      Hello.connection.send(ping); 
     }, 

     handle_pong: function (iq) { 
      var elapsed = (new Date()).getTime() - Hello.start_time; 
      Hello.log("Received pong from server in " + elapsed + "ms."); 

      Hello.connection.disconnect(); 

      return false; 
     } 
    }; 

    $(document).ready(function() { 
     $('#login_dialog').dialog({ 
      autoOpen: true, 
      draggable: false, 
      modal: true, 
      title: 'Connect to XMPP', 
      buttons: { 
       "Connect": function() { 
        $(document).trigger('connect', { 
         jid: $('#jid').val(), 
         password: $('#password').val() 
        }); 

        $('#password').val(''); 
        $(this).dialog('close'); 
       } 
      } 
     }); 
    }); 

    $(document).bind('connect', function (ev, data) { 
     var conn = new Strophe.Connection(
      "http://bosh.metajack.im:5280/xmpp-httpbind"); 
     conn.connect(data.jid, data.password, function (status) { 
      if (status === Strophe.Status.CONNECTED) { 
       $(document).trigger('connected'); 
      } else if (status === Strophe.Status.DISCONNECTED) { 
       $(document).trigger('disconnected'); 
      } 
     }); 

     Hello.connection = conn; 
    }); 

    $(document).bind('connected', function() { 
     // inform the user 
     Hello.log("Connection established."); 

     Hello.connection.addHandler(Hello.handle_pong, null, "iq", null, "ping1"); 

     var domain = Strophe.getDomainFromJid(Hello.connection.jid); 

     Hello.send_ping(domain); 

    }); 

    $(document).bind('disconnected', function() { 
     Hello.log("Connection terminated."); 

     // remove dead connection object 
     Hello.connection = null; 
    }); 

基本上,它的作用是通过BOSH服务运行连接到XMPP服务器在http://bosh.metajack.im:5280/xmpp-httpbind。当它连接时,它使用jQuery将“建立连接”打印到html文件。

但是,我不能让它连接到服务器。我已检查http://bosh.metajack.im:5280/xmpp-httpbind的波什服务已启动并正在运行。我在alpha-labs.net和jabber.de上创建了xmpp帐户。这两个帐户都可以在Windows机器上使用pidgin IM。但是我不能使用这个例子登录这些账户。

当我输入我的jid如[email protected]和相应的密码时,没有任何内容被打印到屏幕上。

我已经发布到该书的出版商论坛,但它并不是经常光顾的地方,所以我想我会在这里尝试。

感谢您的帮助!

Ç

编辑:所以伊夫范围缩小一点,并与其他一些人的帮助,已经确定这可能是一个CORS问题。到目前为止,我一直在本地使用file:///在我的Web浏览器中访问Hello.html。在这种情况下,我无法连接到任何服务器。但是,如果我在服务器上托管Hello.html/hello.js,然后通过使用http的Web浏览器访问该版本,则该代码有效,即可以建立服务器连接。

虽然我不太明白,为什么这是一个问题。为什么我不能在本地访问这个工作,并且我能以某种方式使它在本地场景中工作呢?

回答

0

要启用CORS功能,您必须从Web服务器运行本地站点,而不是从文件运行。

Here's a relevant SO answer which explains why

基本上,因为您的网站的起源是一个文件而不是一个网址,所以当CORS机制试图确定请求是否被允许时,它将与null进行比较。看来,这个问题可能只会影响一些浏览器(chrome)。显然,简单的修复就是从本地Web服务器运行你的html文件。

相关问题