2014-09-04 21 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文件。

相關問題