我正在嘗試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瀏覽器訪問該版本,則該代碼有效,即可以建立服務器連接。
雖然我不太明白,爲什麼這是一個問題。爲什麼我不能在本地訪問這個工作,並且我能以某種方式使它在本地場景中工作呢?