進行身份驗證
使用的庫： jQuery, jQuery UI, Strophe, flXHR
Strophe.js is an XMPP library for JavaScript. Its primary purpose is to enable web-based, real-time XMPP applications that run in any browser. (created)
flXHR (and its parent project "flensed") is an open-source project using flash+javascript to create a drop-in replacement of the XMLHTTPRequest object for cross-domain Ajax. (forked)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Hello = { //hello, namespace | |
| 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; | |
| } | |
| }; | |
| //文档就绪事件（当 HTML 文档就绪可用时） | |
| $(document).ready(function () { | |
| $('#login_dialog').dialog({ | |
| autoOpen: true, | |
| draggable: false, | |
| modal: true, | |
| title: 'Connect to XMPP', | |
| buttons: {//new button | |
| "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; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: Helvetica; | |
| } | |
| h1 { | |
| text-align: center; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| #log { | |
| padding: 10px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
沒有留言:
張貼留言