我正在尝试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浏览器访问该版本,则该代码有效,即可以建立服务器连接。
虽然我不太明白,为什么这是一个问题。为什么我不能在本地访问这个工作,并且我能以某种方式使它在本地场景中工作呢?