Merge branch 'master' into gh-pages
This commit is contained in:
JC Brand
commit
093a7ecc4f
@ -12,6 +12,8 @@ Changelog
|
||||
- Fixed user status handling, which wasn't 100% according to the
|
||||
spec. [jcbrand]
|
||||
- Separate messages according to day in chats. [jcbrand]
|
||||
- Add support for specifying the BOSH bind URL as configuration setting.
|
||||
[jcbrand]
|
||||
|
||||
|
||||
0.2 (2013-03-28)
|
||||
|
||||
72
converse.js
72
converse.js
@ -1864,27 +1864,35 @@
|
||||
'<li><a class="current" href="#login">Sign in</a></li>'),
|
||||
template: _.template(
|
||||
'<form id="converse-login">' +
|
||||
'<label>XMPP ID:</label>' +
|
||||
'<label>XMPP/Jabber Username:</label>' +
|
||||
'<input type="text" id="jid">' +
|
||||
'<label>Password:</label>' +
|
||||
'<input type="password" id="password">' +
|
||||
'<label>BOSH Service URL:</label>' +
|
||||
'<input type="text" id="bosh_service_url">' +
|
||||
'<input type="submit" name="submit"/>' +
|
||||
'</form">'),
|
||||
|
||||
authenticate: function (ev) {
|
||||
bosh_url_input: _.template(
|
||||
'<label>BOSH Service URL:</label>' +
|
||||
'<input type="text" id="bosh_service_url">'),
|
||||
|
||||
authenticate: $.proxy(function (ev) {
|
||||
ev.preventDefault();
|
||||
var $form = $(ev.target),
|
||||
$bsu_input = $form.find('input#bosh_service_url'),
|
||||
bosh_service_url = $bsu_input.val(),
|
||||
$jid_input = $form.find('input#jid'),
|
||||
jid = $jid_input.val(),
|
||||
$pw_input = $form.find('input#password'),
|
||||
password = $pw_input.val(),
|
||||
connection = new Strophe.Connection(bosh_service_url);
|
||||
$bsu_input = null,
|
||||
errors = false;
|
||||
|
||||
var errors = false;
|
||||
if (! this.bosh_service_url) {
|
||||
$bsu_input = $form.find('input#bosh_service_url');
|
||||
this.bosh_service_url = $bsu_input.val();
|
||||
if (! this.bosh_service_url) {
|
||||
errors = true;
|
||||
$bsu_input.addClass('error');
|
||||
}
|
||||
}
|
||||
if (! jid) {
|
||||
errors = true;
|
||||
$jid_input.addClass('error');
|
||||
@ -1893,43 +1901,38 @@
|
||||
errors = true;
|
||||
$pw_input.addClass('error');
|
||||
}
|
||||
if (! bosh_service_url) {
|
||||
errors = true;
|
||||
$bsu_input.addClass('error');
|
||||
}
|
||||
if (errors) { return; }
|
||||
// Clear the form's fields, so that it can't be submitted twice
|
||||
$bsu_input.val('');
|
||||
if ($bsu_input) {
|
||||
$bsu_input.val('');
|
||||
}
|
||||
$jid_input.val('');
|
||||
$pw_input.val('');
|
||||
|
||||
var connection = new Strophe.Connection(this.bosh_service_url);
|
||||
connection.connect(jid, password, $.proxy(function (status) {
|
||||
if (status === Strophe.Status.CONNECTED) {
|
||||
console.log('Connected');
|
||||
converse.onConnected(connection);
|
||||
this.onConnected(connection);
|
||||
} else if (status === Strophe.Status.DISCONNECTED) {
|
||||
console.log('Disconnected');
|
||||
this.$feedback.text('Unable to communicate with chat server').css('background-image', "url(images/error_icon.png)");
|
||||
this.giveFeedback('Disconnected').css('background-image', "url(images/error_icon.png)");
|
||||
} else if (status === Strophe.Status.Error) {
|
||||
console.log('Error');
|
||||
this.giveFeedback('Error');
|
||||
} else if (status === Strophe.Status.CONNECTING) {
|
||||
console.log('Connecting');
|
||||
this.$feedback.text('Connecting to chat...');
|
||||
this.giveFeedback('Connecting');
|
||||
} else if (status === Strophe.Status.CONNFAIL) {
|
||||
console.log('Connection Failed');
|
||||
this.giveFeedback('Connection Failed');
|
||||
} else if (status === Strophe.Status.AUTHENTICATING) {
|
||||
console.log('Authenticating');
|
||||
converse.giveFeedback('Authenticating');
|
||||
this.giveFeedback('Authenticating');
|
||||
} else if (status === Strophe.Status.AUTHFAIL) {
|
||||
console.log('Authenticating Failed');
|
||||
converse.giveFeedback('Authentication failed');
|
||||
this.giveFeedback('Authentication Failed');
|
||||
} else if (status === Strophe.Status.DISCONNECTING) {
|
||||
console.log('Disconnecting');
|
||||
this.giveFeedback('Disconnecting');
|
||||
} else if (status === Strophe.Status.ATTACHED) {
|
||||
console.log('Attached');
|
||||
}
|
||||
}, this));
|
||||
},
|
||||
}, converse));
|
||||
}, converse),
|
||||
|
||||
remove: function () {
|
||||
this.$parent.find('#controlbox-tabs').empty();
|
||||
@ -1938,7 +1941,11 @@
|
||||
|
||||
render: function () {
|
||||
this.$parent.find('#controlbox-tabs').append(this.tab_template());
|
||||
this.$parent.find('#controlbox-panes').append(this.$el.html(this.template()));
|
||||
template = this.template();
|
||||
if (! this.bosh_url_input) {
|
||||
template.find('form').append(this.bosh_url_input);
|
||||
}
|
||||
this.$parent.find('#controlbox-panes').append(this.$el.html(template));
|
||||
return this;
|
||||
}
|
||||
});
|
||||
@ -1973,7 +1980,7 @@
|
||||
};
|
||||
|
||||
converse.giveFeedback = function (message) {
|
||||
$('.conn-feedback').text(message);
|
||||
return $('.conn-feedback').text(message);
|
||||
}
|
||||
|
||||
converse.onConnected = function (connection) {
|
||||
@ -2028,12 +2035,7 @@
|
||||
};
|
||||
|
||||
converse.initialize = function (settings) {
|
||||
this.prebind = settings.prebind;
|
||||
this.fullname = settings.fullname;
|
||||
this.xhr_user_search = settings.xhr_user_search;
|
||||
this.auto_subscribe = settings.auto_subscribe;
|
||||
this.animate = settings.animate;
|
||||
|
||||
_.extend(this, settings);
|
||||
this.chatboxes = new this.ChatBoxes();
|
||||
this.chatboxesview = new this.ChatBoxesView({model: this.chatboxes});
|
||||
$('a.toggle-online-users').bind(
|
||||
|
||||
@ -9,14 +9,14 @@ Converse.js configuration variables:
|
||||
Prebind
|
||||
========
|
||||
|
||||
Use this option if you don't want to render the login form on the chat control
|
||||
box.
|
||||
Use this option when you want to attach to an existing XMPP connection that was
|
||||
already authenticated (usually on the backend before page load).
|
||||
|
||||
When set to true, the onConnected method needs to be called manually, together
|
||||
with a Strophe connection object.
|
||||
This is useful when you don't want to render the login form on the chat control
|
||||
box with each page load.
|
||||
|
||||
The most likely usecase is if you want to already authenticate on the backend
|
||||
and merely attach to that connection in the browser.
|
||||
When set to true, you'll need to make sure that the onConnected method is
|
||||
called, and passed to it a Strophe connection object.
|
||||
|
||||
Besides requiring the back-end to authenticate you, you'll also
|
||||
have to write a Javascript snippet to attach to the set up connection::
|
||||
@ -24,16 +24,28 @@ have to write a Javascript snippet to attach to the set up connection::
|
||||
$.JSON({
|
||||
'url': 'mysite.com/xmpp-authenticate',
|
||||
'success': function (data) {
|
||||
connection = new Strophe.Connection(data.BOSH_SERVICE_URL);
|
||||
connection = new Strophe.Connection(bosh_service_url);
|
||||
connection.attach(data.jid, data.sid, data.rid, converse.onConnected);
|
||||
}
|
||||
|
||||
The backend must authenticate for you, and then return a SID (session ID) and
|
||||
RID (Request ID), which you use when you attach to the connection.
|
||||
|
||||
fullname
|
||||
========
|
||||
|
||||
If you are using prebinding, you need to specify the fullname of the currently
|
||||
logged in user.
|
||||
|
||||
bosh_service_url
|
||||
================
|
||||
|
||||
Connections to an XMPP server depend on a BOSH connection manager which acts as
|
||||
a middle man between HTTP and XMPP.
|
||||
|
||||
See `here`_ for more information.
|
||||
|
||||
|
||||
xhr_user_search
|
||||
===============
|
||||
|
||||
@ -55,3 +67,7 @@ animate
|
||||
=======
|
||||
|
||||
Show animations, for example when opening and closing chat boxes.
|
||||
|
||||
.. _`here`: http://metajack.im/2008/09/08/which-bosh-server-do-you-need/l
|
||||
|
||||
|
||||
|
||||
71
index.html
71
index.html
@ -29,24 +29,41 @@
|
||||
<!-- MAIN CONTENT -->
|
||||
<div id="main_content_wrap" class="outer">
|
||||
<section id="main_content" class="inner">
|
||||
<p><strong>Converse.js</strong> is a web based <a href="http://xmpp.org" target="_blank">XMPP/Jabber</a> instant messaging client.</p>
|
||||
<p>It is used by <a href="http://github.com/collective/collective.xmpp.chat" target="_blank">collective.xmpp.chat</a>, which is a <a href="http://plone.org" target="_blank">Plone</a> instant messaging add-on.</p>
|
||||
<p>The ultimate goal is to enable anyone to add chat functionality to their websites, independent of any backend.
|
||||
You will however need an XMPP server to connect to, either your own, or a public one.</p>
|
||||
<p><strong>Converse.js</strong> is an open source, web based, <a href="http://xmpp.org" target="_blank">XMPP/Jabber</a> chat client, similar to
|
||||
<a href="https://www.facebook.com/sitetour/chat.php" target="_blank">Facebook chat</a>, except for the added support of multi-user chatrooms.</p>
|
||||
|
||||
<p>It is a Javascript application that you can include in your
|
||||
website, thereby providing it with instant messaging functionality.</p>
|
||||
|
||||
<p>You will however need access to an XMPP/Jabber server.</p>
|
||||
|
||||
<p>You can connect to any public, federated XMPP server, or you could set one up
|
||||
yourself, thereby maintaining stricter control of the user data (XMPP servers
|
||||
usually don't archive chat messages).</p>
|
||||
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li>Manually or automically subscribe to other users.</li>
|
||||
<li>Single and multi-user chat</li>
|
||||
<li>Contact rosters</li>
|
||||
<li>Manually or automically subscribe to other contacts</li>
|
||||
<li>Roster item exchange (<a href="http://xmpp.org/extensions/tmp/xep-0144-1.1.html">XEP 144</a>)</li>
|
||||
<li>Accept or decline contact requests</li>
|
||||
<li>Chat statuses (online, busy, away, offline)</li>
|
||||
<li>Custom status messages</li>
|
||||
<li>Typing notifications</li>
|
||||
<li>Third person messages (/me )</li>
|
||||
<li>Multi-user chat in chatrooms</li>
|
||||
<li>Multi-user chat in chatrooms (<a href="http://xmpp.org/extensions/xep-0045.html">XEP 45</a>)</li>
|
||||
<li>Chatroom Topics</li>
|
||||
<li>vCard support</li>
|
||||
<li>vCard support (<a href="http://xmpp.org/extensions/xep-0054.html">XEP 54</a>)</li>
|
||||
</ul>
|
||||
|
||||
<h2>CMS Integration</h2>
|
||||
|
||||
<p><strong>Converse.js</strong> is available as an add-on for the <a href="http://plone.org" target="_blank">Plone</a> CMS, called <a href="http://github.com/collective/collective.xmpp.chat" target="_blank">collective.xmpp.chat</a>.</p>
|
||||
|
||||
<p>If you have integrated Converse.js into any other CMS or framework,
|
||||
<a href="http://opkode.com/contact" target="_blank">please let me know</a> and I'll mention it on this page.</p>
|
||||
|
||||
<h2>Screencasts</h2>
|
||||
<ul>
|
||||
<li><a href="http://opkode.com/media/blog/instant-messaging-for-plone-with-javascript-and-xmpp" target="_blank">Screencast 1</a>:
|
||||
@ -58,40 +75,28 @@
|
||||
</ul>
|
||||
|
||||
<h2>Demo</h2>
|
||||
<p>
|
||||
The code in Converse.js is pretty solid and already used in production
|
||||
in Plone installations. It's however not yet 100% ready for prime-time
|
||||
as a standalone client.
|
||||
</p>
|
||||
<p>
|
||||
Nevertheless, you can try out the current functionality on this page.
|
||||
</p>
|
||||
<p>
|
||||
<a href="#" class="chat toggle-online-users">Click this link</a> or
|
||||
click the link on the bottom right corner.
|
||||
click the link on the bottom right corner of this page.
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
Besides providing valid credentials for an XMPP/Jabber account, you'll also have to provide
|
||||
the details of a <a target="_blank" href="http://metajack.im/2008/09/08/which-bosh-server-do-you-need">BOSH Connection Manager</a>.
|
||||
I intend to set up a connection manager for people to play with in the
|
||||
near future, but for the moment I unfortunately can't help you there.
|
||||
</p>
|
||||
<p>
|
||||
You can create a Jabber/XMPP account at any of these providers:
|
||||
You can log in with any existing federated Jabber/XMPP account, or create a new one at any of these providers:
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://jabber.org" target="_blank">jabber.org</a>
|
||||
</li>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://jappix.com" target="_blank">jappix.com</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://gmail.com" target="_blank">gmail.com</a>
|
||||
</li>
|
||||
<li><a href="http://jabber.org" target="_blank">jabber.org</a></li>
|
||||
<li><a href="https://jappix.com" target="_blank">jappix.com</a></li>
|
||||
<li><a href="https://gmail.com" target="_blank">gmail.com</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>
|
||||
The chat client will disconnect whenever you reload the page. If you
|
||||
want the user's session to persist across page reloads, you can
|
||||
establish an authenticated connection on the server side and then attach to
|
||||
this connection in your browser.
|
||||
</p>
|
||||
<p><strong>Converse.js</strong> already supports this usecase, but you'll have to
|
||||
do more manual work yourself.
|
||||
</p>
|
||||
|
||||
<h2>Tests</h2>
|
||||
</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user