Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity
cebf8c2451
xmpp.chapril.org-conversejs/docs/html/index.html

1133 lines
74 KiB
HTML
Raw Blame History

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quickstart (to get a demo up and running) &mdash; Converse.js 0.8.0 documentation</title>
<link rel="stylesheet" href="_static/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: './',
VERSION: '0.8.0',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<link rel="top" title="Converse.js 0.8.0 documentation" href="#" />
</head>
<body>
<div id="header_wrap" class="outer">
<header class="inner">
<h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
<h2 id="project_tagline">Documentation</h2>
</header>
</div>
<div id="main_content_wrap" class="outer">
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li><a href="#">Converse.js 0.8.0 documentation</a> &raquo;</li>
</ul>
</div>
<section id="main_content" class="inner">
<div class="document">
<div class="documentwrapper">
<div class="body">
<div class="toctree-wrapper compound">
<ul class="simple">
</ul>
</div>
<div class="contents local topic" id="table-of-contents">
<p class="topic-title first">Table of Contents</p>
<ul class="simple">
<li><a class="reference internal" href="#quickstart-to-get-a-demo-up-and-running" id="id7">Quickstart (to get a demo up and running)</a></li>
<li><a class="reference internal" href="#introduction" id="id8">Introduction</a></li>
<li><a class="reference internal" href="#what-you-will-need" id="id9">What you will need</a><ul>
<li><a class="reference internal" href="#an-xmpp-jabber-server" id="id10">An XMPP/Jabber server</a></li>
<li><a class="reference internal" href="#a-bosh-connection-manager" id="id11">A BOSH Connection Manager</a><ul>
<li><a class="reference internal" href="#overcoming-cross-domain-request-restrictions" id="id12">Overcoming cross-domain request restrictions</a></li>
</ul>
</li>
<li><a class="reference internal" href="#server-side-authentication" id="id13">Server-side authentication</a><ul>
<li><a class="reference internal" href="#prebinding-and-single-session-support" id="id14">Prebinding and Single Session Support</a></li>
<li><a class="reference internal" href="#example-code-for-server-side-prebinding" id="id15">Example code for server-side prebinding</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="reference internal" href="#features" id="id16">Features</a><ul>
<li><a class="reference internal" href="#off-the-record-encryption" id="id17">Off-the-record encryption</a></li>
<li><a class="reference internal" href="#sound-notifications" id="id18">Sound Notifications</a></li>
<li><a class="reference internal" href="#multilingual-support" id="id19">Multilingual Support</a></li>
</ul>
</li>
<li><a class="reference internal" href="#development" id="id20">Development</a><ul>
<li><a class="reference internal" href="#install-the-development-and-front-end-dependencies" id="id21">Install the development and front-end dependencies</a></li>
<li><a class="reference internal" href="#with-amd-and-require-js-recommended" id="id22">With AMD and require.js (recommended)</a></li>
<li><a class="reference internal" href="#without-amd-and-require-js" id="id23">Without AMD and require.js</a></li>
<li><a class="reference internal" href="#before-submitting-a-pull-request" id="id24">Before submitting a pull request</a><ul>
<li><a class="reference internal" href="#add-tests-for-your-bugfix-or-feature" id="id25">Add tests for your bugfix or feature</a></li>
<li><a class="reference internal" href="#check-that-the-tests-pass" id="id26">Check that the tests pass</a></li>
<li><a class="reference internal" href="#check-your-code-for-errors-or-bad-habits-by-running-jshint" id="id27">Check your code for errors or bad habits by running JSHint</a></li>
</ul>
</li>
<li><a class="reference internal" href="#minification" id="id28">Minification</a><ul>
<li><a class="reference internal" href="#minifying-javascript-and-css" id="id29">Minifying Javascript and CSS</a></li>
</ul>
</li>
<li><a class="reference internal" href="#translations" id="id30">Translations</a></li>
</ul>
</li>
<li><a class="reference internal" href="#troubleshooting" id="id31">Troubleshooting</a><ul>
<li><a class="reference internal" href="#conflicts-with-other-javascript-libraries" id="id32">Conflicts with other Javascript libraries</a><ul>
<li><a class="reference internal" href="#problem" id="id33">Problem:</a></li>
<li><a class="reference internal" href="#solution" id="id34">Solution:</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="reference internal" href="#events" id="id35">Events</a><ul>
<li><a class="reference internal" href="#event-methods" id="id36">Event Methods</a></li>
<li><a class="reference internal" href="#event-types" id="id37">Event Types</a></li>
</ul>
</li>
<li><a class="reference internal" href="#configuration" id="id38">Configuration</a><ul>
<li><a class="reference internal" href="#configuration-variables" id="id39">Configuration variables</a><ul>
<li><a class="reference internal" href="#allow-contact-requests" id="id40">allow_contact_requests</a></li>
<li><a class="reference internal" href="#allow-muc" id="id41">allow_muc</a></li>
<li><a class="reference internal" href="#id3" id="id42">allow_muc</a></li>
<li><a class="reference internal" href="#animate" id="id43">animate</a></li>
<li><a class="reference internal" href="#auto-list-rooms" id="id44">auto_list_rooms</a></li>
<li><a class="reference internal" href="#auto-reconnect" id="id45">auto_reconnect</a></li>
<li><a class="reference internal" href="#auto-subscribe" id="id46">auto_subscribe</a></li>
<li><a class="reference internal" href="#bosh-service-url" id="id47">bosh_service_url</a></li>
<li><a class="reference internal" href="#cache-otr-key" id="id48">cache_otr_key</a></li>
<li><a class="reference internal" href="#debug" id="id49">debug</a></li>
<li><a class="reference internal" href="#message-carbons" id="id50">message_carbons</a></li>
<li><a class="reference internal" href="#expose-rid-and-sid" id="id51">expose_rid_and_sid</a></li>
<li><a class="reference internal" href="#forward-messages" id="id52">forward_messages</a></li>
<li><a class="reference internal" href="#fullname" id="id53">fullname</a></li>
<li><a class="reference internal" href="#hide-muc-server" id="id54">hide_muc_server</a></li>
<li><a class="reference internal" href="#i18n" id="id55">i18n</a></li>
<li><a class="reference internal" href="#play-sounds" id="id56">play_sounds</a></li>
<li><a class="reference internal" href="#prebind" id="id57">prebind</a></li>
<li><a class="reference internal" href="#roster-groups" id="id58">roster_groups</a></li>
<li><a class="reference internal" href="#show-controlbox-by-default" id="id59">show_controlbox_by_default</a></li>
<li><a class="reference internal" href="#show-only-online-users" id="id60">show_only_online_users</a></li>
<li><a class="reference internal" href="#storage" id="id61">storage</a></li>
<li><a class="reference internal" href="#use-otr-by-default" id="id62">use_otr_by_default</a></li>
<li><a class="reference internal" href="#use-vcards" id="id63">use_vcards</a></li>
<li><a class="reference internal" href="#visible-toolbar-buttons" id="id64">visible_toolbar_buttons</a></li>
<li><a class="reference internal" href="#xhr-custom-status" id="id65">xhr_custom_status</a></li>
<li><a class="reference internal" href="#xhr-custom-status-url" id="id66">xhr_custom_status_url</a></li>
<li><a class="reference internal" href="#xhr-user-search" id="id67">xhr_user_search</a></li>
<li><a class="reference internal" href="#xhr-user-search-url" id="id68">xhr_user_search_url</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="section" id="quickstart-to-get-a-demo-up-and-running">
<h1><a class="toc-backref" href="#id7">Quickstart (to get a demo up and running)</a><a class="headerlink" href="#quickstart-to-get-a-demo-up-and-running" title="Permalink to this headline"></a></h1>
<p>When you download a specific release of <em>Converse.js</em> there will be two minified files inside the zip file.</p>
<ul class="simple">
<li>builds/converse.min.js</li>
<li>css/converse.min.css</li>
</ul>
<p>You can include these two files inside the <em>&lt;head&gt;</em> element of your website via the <em>script</em> and <em>link</em>
tags:</p>
<div class="highlight-python"><div class="highlight"><pre>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;css/converse.min.css&quot;&gt;
&lt;script src=&quot;builds/converse.min.js&quot;&gt;&lt;/script&gt;
</pre></div>
</div>
<p>You need to initialize Converse.js with configuration settings particular to
your requirements.</p>
<p>Please refer to the <a class="reference internal" href="#configuration-variables">Configuration variables</a> section further below for info on
all the available configuration settings.</p>
<p>To configure Converse.js, put the following inline Javascript code at the
bottom of your page (after the closing <em>&lt;/body&gt;</em> element).</p>
<div class="highlight-python"><div class="highlight"><pre>require([&#39;converse&#39;], function (converse) {
converse.initialize({
auto_list_rooms: false,
auto_subscribe: false,
bosh_service_url: &#39;https://bind.conversejs.org&#39;, // Please use this connection manager only for testing purposes
hide_muc_server: false,
i18n: locales.en, // Refer to ./locale/locales.js to see which locales are supported
prebind: false,
show_controlbox_by_default: true,
roster_groups: true
});
});
</pre></div>
</div>
<p>The <a class="reference external" href="https://github.com/jcbrand/converse.js/blob/master/index.html">index.html</a> file inside the
Converse.js repository may serve as a nice usable example.</p>
<p>These minified files provide the same demo-like functionality as is available
on the <a class="reference external" href="http://conversejs.org">conversejs.org</a> website. Useful for testing or demoing, but not very
practical.</p>
<p>You&#8217;ll most likely want to implement some kind of single-signon solution for
your website, where users authenticate once in your website and then stay
logged into their XMPP session upon page reload.</p>
<p>For more info on this, read: <a class="reference internal" href="#prebinding-and-single-session-support">Prebinding and Single Session Support</a>.</p>
<p>You might also want to have more fine-grained control of what gets included in
the minified Javascript file. Read <a class="reference internal" href="#configuration">Configuration</a> and <a class="reference internal" href="#minification">Minification</a> for more info on how to do
that.</p>
</div>
<div class="section" id="introduction">
<h1><a class="toc-backref" href="#id8">Introduction</a><a class="headerlink" href="#introduction" title="Permalink to this headline"></a></h1>
<p>Even though you can connect to public XMPP servers on the <a class="reference external" href="http://conversejs.org">conversejs.org</a>
website, <em>Converse.js</em> is not really meant to be a &#8220;Software-as-a-service&#8221; (SaaS)
webchat.</p>
<p>Instead, its goal is to provide the means for website owners to add a tightly
integrated instant messaging service to their own websites.</p>
<p>As a website owner, you are expected to host <em>Converse.js</em> yourself, and to do some legwork to
properly configure and integrate it into your site.</p>
<p>The benefit in doing this, is that your users have a much more streamlined and integrated
webchat experience and that you have control over the data. The latter being a
requirement for many sites dealing with sensitive information.</p>
<p>You&#8217;ll need to set up your own XMPP server and in order to have
<a class="reference internal" href="#session-support">Session Support</a> (i.e. single-signon functionality whereby users are authenticated once and stay
logged in to XMPP upon page reload) you will also have to add some server-side
code.</p>
<p>The <a class="reference internal" href="#what-you-will-need">What you will need</a> section has more information on all these
requirements.</p>
</div>
<div class="section" id="what-you-will-need">
<h1><a class="toc-backref" href="#id9">What you will need</a><a class="headerlink" href="#what-you-will-need" title="Permalink to this headline"></a></h1>
<div class="section" id="an-xmpp-jabber-server">
<h2><a class="toc-backref" href="#id10">An XMPP/Jabber server</a><a class="headerlink" href="#an-xmpp-jabber-server" title="Permalink to this headline"></a></h2>
<p><em>Converse.js</em> implements <a class="reference external" href="https://en.wikipedia.org/wiki/Xmpp">XMPP</a> as its messaging protocol, and therefore needs
to connect to an XMPP/Jabber server (Jabber is really just a synonym for XMPP).</p>
<p>You can connect to public XMPP servers like <tt class="docutils literal"><span class="pre">jabber.org</span></tt> but if you want to
have <a class="reference internal" href="#session-support">Session Support</a> you&#8217;ll have to set up your own XMPP server.</p>
<p>You can find a list of public XMPP servers/providers on <a class="reference external" href="http://xmpp.net">xmpp.net</a> and a list of
servers that you can set up yourself on <a class="reference external" href="http://xmpp.org/xmpp-software/servers/">xmpp.org</a>.</p>
</div>
<div class="section" id="a-bosh-connection-manager">
<h2><a class="toc-backref" href="#id11">A BOSH Connection Manager</a><a class="headerlink" href="#a-bosh-connection-manager" title="Permalink to this headline"></a></h2>
<p>Your website and <em>Converse.js</em> use <a class="reference external" href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol">HTTP</a> as protocol to communicate with
the webserver. HTTP connections are stateless and usually shortlived.</p>
<p><a class="reference external" href="https://en.wikipedia.org/wiki/Xmpp">XMPP</a> on the other hand, is the protocol that enables instant messaging, and
its connections are stateful and usually longer.</p>
<p>To enable a web application like <em>Converse.js</em> to communicate with an XMPP
server, we need a proxy in the middle that can act as a bridge between the two
protocols.</p>
<p>The <a class="reference external" href="https://github.com/jcbrand/converse.js/blob/master/index.html">index.html</a> file inside the</p>
<p>This is the job of a connection manager. A connection manager can be either a
standalone application or part of an XMPP server. Popular XMPP servers such as
<a class="reference external" href="http://www.ejabberd.im">ejabberd</a>, <a class="reference external" href="http://prosody.im/doc/setting_up_bosh">prosody</a> and
<a class="reference external" href="http://www.igniterealtime.org/projects/openfire/">openfire</a> all include their own connection managers
(but you usually have to enable them in the configuration).</p>
<p>Standalone connection managers also exist, see for example <a class="reference external" href="https://github.com/twonds/punjab">Punjab</a>.</p>
<p>The demo on the <a class="reference external" href="http://conversejs.org">Converse.js homepage</a> uses a connection manager located at <a class="reference external" href="https://bind.conversejs.org">https://bind.conversejs.org</a>.
This connection manager is available for testing purposes only, please don&#8217;t use it in production.</p>
<div class="section" id="overcoming-cross-domain-request-restrictions">
<h3><a class="toc-backref" href="#id12">Overcoming cross-domain request restrictions</a><a class="headerlink" href="#overcoming-cross-domain-request-restrictions" title="Permalink to this headline"></a></h3>
<p>Lets say your domain is <em>example.org</em>, but the domain of your connection
manager is <em>example.com</em>.</p>
<p>HTTP requests are made by <em>Converse.js</em> to the connection manager via XmlHttpRequests (XHR).
Until recently, it was not possible to make such requests to a different domain
than the one currently being served (to prevent XSS attacks).</p>
<p>Luckily there is now a standard called <a class="reference external" href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a> (Cross-origin resource sharing), which enables exactly that.
Modern browsers support CORS, but there are problems with Internet Explorer &lt;
10.</p>
<p>IE 8 and 9 partially support CORS via a proprietary implementation called
XDomainRequest. There is a <a class="reference external" href="https://gist.github.com/1095825/6b4517276f26b66b01fa97b0a78c01275fdc6ff2">Strophe.js plugin</a> which you can use to enable
support for XDomainRequest when it is present.</p>
<p>In IE &lt; 8, there is no support for CORS.</p>
<p>Instead of using CORS, you can add a reverse proxy in
Apache/Nginx which serves the connection manager under the same domain as your
website. This will remove the need for any cross-domain XHR support.</p>
<div class="section" id="for-example">
<h4>For example:<a class="headerlink" href="#for-example" title="Permalink to this headline"></a></h4>
<p>Assuming your site is accessible on port <tt class="docutils literal"><span class="pre">80</span></tt> for the domain <tt class="docutils literal"><span class="pre">mysite.com</span></tt>
and your connection manager manager is running at <tt class="docutils literal"><span class="pre">someothersite.com/http-bind</span></tt>.</p>
<p>The <em>bosh_service_url</em> value you want to give Converse.js to overcome
the cross-domain restriction is <tt class="docutils literal"><span class="pre">mysite.com/http-bind</span></tt> and not
<tt class="docutils literal"><span class="pre">someothersite.com/http-bind</span></tt>.</p>
<p>Your <tt class="docutils literal"><span class="pre">nginx</span></tt> or <tt class="docutils literal"><span class="pre">apache</span></tt> configuration will look as follows:</p>
</div>
<div class="section" id="nginx">
<h4>Nginx<a class="headerlink" href="#nginx" title="Permalink to this headline"></a></h4>
<div class="highlight-python"><div class="highlight"><pre>http {
server {
listen 80
server_name mysite.com;
location ~ ^/http-bind/ {
proxy_pass http://someothersite.com;
}
}
}
</pre></div>
</div>
</div>
<div class="section" id="apache">
<h4>Apache<a class="headerlink" href="#apache" title="Permalink to this headline"></a></h4>
<div class="highlight-python"><div class="highlight"><pre>&lt;VirtualHost *:80&gt;
ServerName mysite.com
RewriteEngine On
RewriteRule ^/http-bind(.*) http://someothersite.com/http-bind$1 [P,L]
&lt;/VirtualHost&gt;
</pre></div>
</div>
</div>
</div>
</div>
<div class="section" id="server-side-authentication">
<h2><a class="toc-backref" href="#id13">Server-side authentication</a><a class="headerlink" href="#server-side-authentication" title="Permalink to this headline"></a></h2>
<div class="section" id="prebinding-and-single-session-support">
<span id="session-support"></span><h3><a class="toc-backref" href="#id14">Prebinding and Single Session Support</a><a class="headerlink" href="#prebinding-and-single-session-support" title="Permalink to this headline"></a></h3>
<p>It&#8217;s possible to enable single-site login, whereby users already
authenticated in your website will also automatically be logged in on the chat server,</p>
<p>This session should also persist across page loads. In other words, we don&#8217;t
want the user to have to give their chat credentials every time they reload the
page.</p>
<p>To do this you will require a <a class="reference external" href="http://xmpp.org/about-xmpp/technology-overview/bosh/">BOSH server</a>
for converse.js to connect to (see the <a class="reference internal" href="#bosh-service-url">bosh_service_url</a> under <a class="reference internal" href="#configuration-variables">Configuration variables</a>)
as well as a BOSH client on your own server (written for example in Python, Ruby or PHP) that will
do the pre-authentication before the web page loads.</p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">A BOSH server acts as a bridge between HTTP, the protocol of the web, and
XMPP, the instant messaging protocol.
Converse.js can only communicate via HTTP, but we need to communicate with
an XMPP server in order to chat. So the BOSH server acts as a middle man,
translating our HTTP requests into XMPP stanzas and vice versa.</p>
</div>
<p>Jack Moffitt has a great <a class="reference external" href="http://metajack.im/2008/10/03/getting-attached-to-strophe">blogpost</a> about this and even provides an <a class="reference external" href="https://github.com/metajack/strophejs/tree/master/examples/attach">example Django application</a> to demonstrate it.</p>
<p>When you authenticate to the XMPP server on your backend application (for
example via a BOSH client in Django), you&#8217;ll receive two tokens, RID (request ID) and SID (session ID).</p>
<p>The <strong>Session ID (SID)</strong> is a unique identifier for the current <em>session</em>. This
number stays constant for the entire session.</p>
<p>The <strong>Request ID (RID)</strong> is a unique identifier for the current <em>request</em> (i.e.
page load). Each page load is a new request which requires a new unique RID.
The best way to achieve this is to simply increment the RID with each page
load.</p>
<p>When you initialize converse.js in your browser, you need to pass it these two
tokens. Converse.js will then use them to attach to the session you just
created.</p>
<p>You can embed the RID and SID tokens in your HTML markup or you can do an
XMLHttpRequest call to your server and ask it to return them for you.</p>
<p>Below is one example of how this could work. An Ajax call is made to the
relative URL <strong>/prebind</strong> and it expects to receive JSON data back.</p>
<div class="highlight-python"><div class="highlight"><pre>$.getJSON(&#39;/prebind&#39;, function (data) {
converse.initialize({
prebind: true,
bosh_service_url: data.bosh_service_url,
jid: data.jid,
sid: data.sid,
rid: data.rid
});
);
</pre></div>
</div>
<p><strong>Here&#8217;s what&#8217;s happening:</strong></p>
<p>The JSON data returned from the Ajax call to example.com/prebind contains the user&#8217;s JID (jabber ID), RID, SID and the URL to the
BOSH server (also called a <em>connection manager</em>).</p>
<p>These values are then passed to converse.js&#8217;s <tt class="docutils literal"><span class="pre">initialize</span></tt> method.</p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">If you want to enable single session support, you need to set <strong>prebind: true</strong>
when calling <strong>converse.initialize</strong> (see ./index.html).
Additionally you need to pass in valid <strong>jid</strong>, <strong>sid</strong>, <strong>rid</strong> and
<strong>bosh_service_url</strong> values.</p>
</div>
</div>
<div class="section" id="example-code-for-server-side-prebinding">
<h3><a class="toc-backref" href="#id15">Example code for server-side prebinding</a><a class="headerlink" href="#example-code-for-server-side-prebinding" title="Permalink to this headline"></a></h3>
<ul>
<li><dl class="first docutils">
<dt>PHP:</dt>
<dd><p class="first last">See <a class="reference external" href="https://github.com/candy-chat/xmpp-prebind-php">xmpp-prebind-php</a> by
Michael Weibel and the folks from Candy chat.</p>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt>Python:</dt>
<dd><p class="first last">See this <a class="reference external" href="https://github.com/metajack/strophejs/tree/master/examples/attach">example Django application</a> by Jack Moffitt.</p>
</dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
<div class="section" id="features">
<h1><a class="toc-backref" href="#id16">Features</a><a class="headerlink" href="#features" title="Permalink to this headline"></a></h1>
<div class="section" id="off-the-record-encryption">
<h2><a class="toc-backref" href="#id17">Off-the-record encryption</a><a class="headerlink" href="#off-the-record-encryption" title="Permalink to this headline"></a></h2>
<p>Converse.js supports <a class="reference external" href="https://otr.cypherpunks.ca/">Off-the-record (OTR)</a>
encrypted messaging.</p>
<p>The OTR protocol not only <strong>encrypts your messages</strong>, it provides ways to
<strong>verify the identity</strong> of the person you are talking to,
<strong>plausible deniability</strong> and <strong>perfect forward secrecy</strong> by generating
new encryption keys for each conversation.</p>
<p>In its current state, Javascript cryptography is fraught with dangers and
challenges that make it impossible to reach the same standard of security that
is available with native &#8220;desktop&#8221; software.</p>
<p>This is due to its runtime malleability, the way it is &#8220;installed&#8221; (e.g.
served) and the browser&#8217;s lack of cryptographic primitives needed to implement
secure crypto.</p>
<p>For harsh but fairly valid criticism of Javascript cryptography, read:
<a class="reference external" href="http://www.matasano.com/articles/javascript-cryptography/">Javascript Cryptography Considered Harmful</a>.</p>
<p>To get an idea on how this applies to OTR support in Converse.js, please read
<a class="reference external" href="https://opkode.com/media/blog/2013/11/11/conversejs-otr-support">my thoughts on it</a>.</p>
<p>For now, suffice to say that although its useful to have OTR support in
Converse.js in order to avoid most eavesdroppers, if you need serious
communications privacy, then you&#8217;re much better off using native software.</p>
</div>
<div class="section" id="sound-notifications">
<h2><a class="toc-backref" href="#id18">Sound Notifications</a><a class="headerlink" href="#sound-notifications" title="Permalink to this headline"></a></h2>
<p>From version 0.8.1 Converse.js can play a sound notification when you receive a
message.</p>
<p>For more info, please see the <a class="reference internal" href="#play-sounds">play_sounds</a> configuration setting.</p>
</div>
<div class="section" id="multilingual-support">
<h2><a class="toc-backref" href="#id19">Multilingual Support</a><a class="headerlink" href="#multilingual-support" title="Permalink to this headline"></a></h2>
<p>Converse.js is translated into multiple languages. The default build,
<tt class="docutils literal"><span class="pre">converse.min.js</span></tt>, includes all languages.</p>
<p>Languages increase the size of the Converse.js significantly.</p>
<p>If you only need one, or a subset of the available languages, it&#8217;s better to
make a custom build which includes only those languages that you need.</p>
</div>
</div>
<div class="section" id="development">
<h1><a class="toc-backref" href="#id20">Development</a><a class="headerlink" href="#development" title="Permalink to this headline"></a></h1>
<p>If you want to work with the non-minified Javascript and CSS files you&#8217;ll soon
notice that there are references to a missing <em>components</em> folder. Please
follow the instructions below to create this folder and fetch Converse&#8217;s
3rd-party dependencies.</p>
<div class="section" id="install-the-development-and-front-end-dependencies">
<h2><a class="toc-backref" href="#id21">Install the development and front-end dependencies</a><a class="headerlink" href="#install-the-development-and-front-end-dependencies" title="Permalink to this headline"></a></h2>
<p>We use development tools (<a class="reference external" href="http://gruntjs.com">Grunt</a> and <a class="reference external" href="http://bower.io">Bower</a>)
which depend on Node.js and npm (the Node package manager).</p>
<p>If you don&#8217;t have Node.js installed, you can download and install the latest
version <a class="reference external" href="https://nodejs.org/download">here</a>.</p>
<p>Also make sure you have <tt class="docutils literal"><span class="pre">git</span></tt> installed. <a class="reference external" href="http://git-scm.com/book/en/Getting-Started-Installing-Git">Details</a>.</p>
<p>Once you have <em>Node.js</em> and <em>git</em> installed, run the following command inside the Converse.js
directory:</p>
<div class="highlight-python"><div class="highlight"><pre>make dev
</pre></div>
</div>
<p>Or alternatively, if you don&#8217;t have GNU Make:</p>
<div class="highlight-python"><div class="highlight"><pre>npm install
bower update
</pre></div>
</div>
<p>This will first install the Node.js development tools (like Grunt and Bower)
and then use Bower to install all of Converse.js&#8217;s front-end dependencies.</p>
<p>The front-end dependencies are those javascript files on which
Converse.js directly depends and which will be loaded in the browser.</p>
<p>If you are curious to know what the different dependencies are:</p>
<ul>
<li><dl class="first docutils">
<dt>Development dependencies:</dt>
<dd><p class="first last">Take a look at whats under the <em>devDependencies</em> key in
<a class="reference external" href="https://github.com/jcbrand/converse.js/blob/master/package.json">package.json</a>.</p>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt>Front-end dependencies:</dt>
<dd><p class="first last">See <em>dependencies</em> in
<a class="reference external" href="https://github.com/jcbrand/converse.js/blob/master/bower.json">bower.json</a>.</p>
</dd>
</dl>
</li>
</ul>
</div>
<div class="section" id="with-amd-and-require-js-recommended">
<h2><a class="toc-backref" href="#id22">With AMD and require.js (recommended)</a><a class="headerlink" href="#with-amd-and-require-js-recommended" title="Permalink to this headline"></a></h2>
<p>Converse.js uses <a class="reference external" href="http://requirejs.org">require.js</a> to asynchronously load dependencies.</p>
<p>If you want to develop or customize converse.js, you&#8217;ll want to load the
non-minified javascript files.</p>
<p>Add the following two lines to the <em>&lt;head&gt;</em> section of your webpage:</p>
<div class="highlight-python"><div class="highlight"><pre>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;converse.css&quot;&gt;
&lt;script data-main=&quot;main&quot; src=&quot;components/requirejs/require.js&quot;&gt;&lt;/script&gt;
</pre></div>
</div>
<p>require.js will then let the main.js file be parsed (because of the <em>data-main</em>
attribute on the <em>script</em> tag), which will in turn cause converse.js to be
parsed.</p>
</div>
<div class="section" id="without-amd-and-require-js">
<h2><a class="toc-backref" href="#id23">Without AMD and require.js</a><a class="headerlink" href="#without-amd-and-require-js" title="Permalink to this headline"></a></h2>
<p>Converse.js can also be used without require.js. If you for some reason prefer
to use it this way, please refer to
<a class="reference external" href="https://github.com/jcbrand/converse.js/blob/master/non_amd.html">non_amd.html</a>
for an example of how and in what order all the Javascript files that converse.js
depends on need to be loaded.</p>
</div>
<div class="section" id="before-submitting-a-pull-request">
<h2><a class="toc-backref" href="#id24">Before submitting a pull request</a><a class="headerlink" href="#before-submitting-a-pull-request" title="Permalink to this headline"></a></h2>
<div class="section" id="add-tests-for-your-bugfix-or-feature">
<h3><a class="toc-backref" href="#id25">Add tests for your bugfix or feature</a><a class="headerlink" href="#add-tests-for-your-bugfix-or-feature" title="Permalink to this headline"></a></h3>
<p>Add a test for any bug fixed or feature added. We use Jasmine
for testing.</p>
<p>Take a look at <tt class="docutils literal"><span class="pre">tests.html</span></tt> and <tt class="docutils literal"><span class="pre">spec/MainSpec.js</span></tt> to see how
the tests are implemented.</p>
<p>If you are unsure how to write tests, please
<a class="reference external" href="http://opkode.com/contact">contact me</a> and I&#8217;ll be happy to help.</p>
</div>
<div class="section" id="check-that-the-tests-pass">
<h3><a class="toc-backref" href="#id26">Check that the tests pass</a><a class="headerlink" href="#check-that-the-tests-pass" title="Permalink to this headline"></a></h3>
<p>Check that the Jasmine tests complete sucessfully. Open
<a class="reference external" href="https://github.com/jcbrand/converse.js/blob/master/tests.html">tests.html</a>
in your browser, and the tests will run automatically.</p>
<p>On the command line you can run:</p>
<div class="highlight-python"><div class="highlight"><pre>grunt test
</pre></div>
</div>
</div>
<div class="section" id="check-your-code-for-errors-or-bad-habits-by-running-jshint">
<h3><a class="toc-backref" href="#id27">Check your code for errors or bad habits by running JSHint</a><a class="headerlink" href="#check-your-code-for-errors-or-bad-habits-by-running-jshint" title="Permalink to this headline"></a></h3>
<p><a class="reference external" href="http://jshint.com">JSHint</a> will do a static analysis of your code and hightlight potential errors
and/or bad habits.</p>
<div class="highlight-python"><div class="highlight"><pre>grunt jshint
</pre></div>
</div>
<p>You can run both the tests and jshint in one go by calling:</p>
<div class="highlight-python"><div class="highlight"><pre>grunt check
</pre></div>
</div>
</div>
</div>
<div class="section" id="minification">
<h2><a class="toc-backref" href="#id28">Minification</a><a class="headerlink" href="#minification" title="Permalink to this headline"></a></h2>
<div class="section" id="minifying-javascript-and-css">
<h3><a class="toc-backref" href="#id29">Minifying Javascript and CSS</a><a class="headerlink" href="#minifying-javascript-and-css" title="Permalink to this headline"></a></h3>
<p>Please make sure to read the section <a class="reference internal" href="#development">Development</a> and that you have installed
all development dependencies (long story short, you can run <tt class="docutils literal"><span class="pre">npm</span> <span class="pre">install</span></tt>
and then <tt class="docutils literal"><span class="pre">grunt</span> <span class="pre">fetch</span></tt>).</p>
<p>We use <a class="reference external" href="http://requirejs.org">require.js</a> to keep track of <em>Converse.js</em> and its dependencies and to
to bundle them together in a single minified file fit for deployment to a
production site.</p>
<p>To minify the Javascript and CSS, run the following command:</p>
<div class="highlight-python"><div class="highlight"><pre>grunt minify
</pre></div>
</div>
<p>Javascript will be bundled and minified with <a class="reference external" href="http://requirejs.org">require.js</a>&#8216;s optimization tool,
using <a class="reference external" href="https://github.com/jrburke/almond">almond</a>.</p>
<p>You can <a class="reference external" href="http://requirejs.org/docs/optimization.html">read more about require.js&#8217;s optimizer here</a>.</p>
<p>CSS is minified via <a class="reference external" href="https://github.com/gruntjs/grunt-contrib-cssmin">cssmin</a>.</p>
</div>
</div>
<div class="section" id="translations">
<h2><a class="toc-backref" href="#id30">Translations</a><a class="headerlink" href="#translations" title="Permalink to this headline"></a></h2>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">Translations take up a lot of space and will bloat your minified file.
At the time of writing, all the translations add about 50KB of extra data to
the minified javascript file. Therefore, make sure to only
include those languages that you intend to support and remove from
./locale/locales.js those which you don&#8217;t need. Remember to rebuild the
minified file afterwards.</p>
</div>
<p>The gettext POT file located in ./locale/converse.pot is the template
containing all translations and from which for each language an individual PO
file is generated.</p>
<p>The POT file contains all translateable strings extracted from converse.js.</p>
<p>To make a user facing string translateable, wrap it in the double underscore helper
function like so:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="n">__</span><span class="p">(</span><span class="s">&#39;This string will be translated at runtime&#39;</span><span class="p">);</span>
</pre></div>
</div>
<p>After adding the string, you&#8217;ll need to regenerate the POT file, like so:</p>
<div class="highlight-python"><div class="highlight"><pre>make pot
</pre></div>
</div>
<p>You can then create or update the PO file for a specific language by doing the following:</p>
<div class="highlight-python"><div class="highlight"><pre>msgmerge ./locale/de/LC_MESSAGES/converse.po ./locale/converse.pot -U
</pre></div>
</div>
<p>To do this for ALL languages, run:</p>
<div class="highlight-python"><div class="highlight"><pre>make po
</pre></div>
</div>
<p>The resulting PO file is then what gets translated.</p>
<p>If you&#8217;ve created a new PO file, please make sure to add the following
attributes at the top of the file (under <em>Content-Transfer-Encoding</em>). They are
required as configuration settings for Jed, the Javascript translations library
that we&#8217;re using.</p>
<div class="highlight-python"><div class="highlight"><pre><span class="s">&quot;domain: converse</span><span class="se">\n</span><span class="s">&quot;</span>
<span class="s">&quot;lang: de</span><span class="se">\n</span><span class="s">&quot;</span>
<span class="s">&quot;plural_forms: nplurals=2; plural=(n != 1);</span><span class="se">\n</span><span class="s">&quot;</span>
</pre></div>
</div>
<p>Unfortunately <a class="reference external" href="http://slexaxton.github.io/Jed">Jed</a> cannot use the PO files directly. We have to generate from it
a file in JSON format and then put that in a .js file for the specific
language.</p>
<p>To generate JSON from a PO file, you&#8217;ll need po2json for node.js. Run the
following command to install it (npm being the node.js package manager):</p>
<div class="highlight-python"><div class="highlight"><pre>npm install po2json
</pre></div>
</div>
<p>You can then convert the translations into JSON format:</p>
<div class="highlight-python"><div class="highlight"><pre>po2json locale/de/LC_MESSAGES/converse.po locale/de/LC_MESSAGES/converse.json
</pre></div>
</div>
<p>Now from converse.json paste the data as a value for the &#8220;locale_data&#8221; key in the
object in the language&#8217;s .js file.</p>
<p>So, if you are for example translating into German (language code &#8216;de&#8217;), you&#8217;ll
create or update the file ./locale/LC_MESSAGES/de.js with the following code:</p>
<div class="highlight-python"><div class="highlight"><pre>(function (root, factory) {
define(&quot;de&quot;, [&#39;jed&#39;], function () {
return factory(new Jed({
&quot;domain&quot;: &quot;converse&quot;,
&quot;locale_data&quot;: {
// Paste the JSON data from converse.json here
}
})
}
}(this, function (i18n) {
return i18n;
}));
</pre></div>
</div>
<p>making sure to also paste the JSON data as value to the &#8220;locale_data&#8221; key.</p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">If you are adding translations for a new language that is not already supported,
you&#8217;ll have to make one more edit in ./locale/locales.js to make sure the
language is loaded by require.js.</p>
</div>
<p>Congratulations, you&#8217;ve now succesfully added your translations. Sorry for all
those hoops you had to jump through.</p>
</div>
</div>
<div class="section" id="troubleshooting">
<h1><a class="toc-backref" href="#id31">Troubleshooting</a><a class="headerlink" href="#troubleshooting" title="Permalink to this headline"></a></h1>
<div class="section" id="conflicts-with-other-javascript-libraries">
<h2><a class="toc-backref" href="#id32">Conflicts with other Javascript libraries</a><a class="headerlink" href="#conflicts-with-other-javascript-libraries" title="Permalink to this headline"></a></h2>
<div class="section" id="problem">
<h3><a class="toc-backref" href="#id33">Problem:</a><a class="headerlink" href="#problem" title="Permalink to this headline"></a></h3>
<p>You are using other Javascript libraries (like JQuery plugins), and
get errors like these in your browser console:</p>
<div class="highlight-python"><div class="highlight"><pre>Uncaught TypeError: Object [object Object] has no method &#39;xxx&#39; from example.js
</pre></div>
</div>
</div>
<div class="section" id="solution">
<h3><a class="toc-backref" href="#id34">Solution:</a><a class="headerlink" href="#solution" title="Permalink to this headline"></a></h3>
<p>First, find out which object is referred to by <tt class="docutils literal"><span class="pre">Object</span> <span class="pre">[object</span> <span class="pre">Object]</span></tt>.</p>
<p>It will probably be the jQuery object <tt class="docutils literal"><span class="pre">$</span></tt> or perhaps the underscore.js object <tt class="docutils literal"><span class="pre">_</span></tt>.</p>
<p>For the purpose of demonstration, I&#8217;m going to assume its <tt class="docutils literal"><span class="pre">$</span></tt>, but the same
rules apply if its something else.</p>
<p>The bundled and minified default build of converse.js, <tt class="docutils literal"><span class="pre">converse.min.js</span></tt>
includes within it all of converse.js&#8217;s dependencies, which include for example <em>jQuery</em>.</p>
<p>If you are having conflicts where attributes or methods aren&#8217;t available
on the jQuery object, you are probably loading <tt class="docutils literal"><span class="pre">converse.min.js</span></tt> (which
includes jQuery) as well as your own jQuery version separately.</p>
<p>What then happens is that there are two <tt class="docutils literal"><span class="pre">$</span></tt> objects (one from
converse.js and one from the jQuery version you included manually)
and only one of them has been extended to have the methods or attributes you require.</p>
<p>Which jQuery object you get depends on the order in which you load the libraries.</p>
<p>There are multiple ways to solve this issue.</p>
<p>Firstly, make sure whether you really need to include a separate version of
jQuery. Chances are that you don&#8217;t. If you can remove the separate
version, your problem should be solved, as long as your libraries are loaded in
the right order.</p>
<p>Either case, whether you need to keep two versions or not, the solution depends
on whether you&#8217;ll use require.js to manage your libraries or whether you&#8217;ll
load them manually.</p>
<div class="section" id="with-require-js">
<h4>With require.js<a class="headerlink" href="#with-require-js" title="Permalink to this headline"></a></h4>
<p>Instead of using <tt class="docutils literal"><span class="pre">converse.min.js</span></tt>, manage all the libraries in your project
(i.e. converse.js and its dependencies plus all other libraries you use) as one
require.js project, making sure everything is loaded in the correct order.</p>
<p>Then, before deployment, you make your own custom minified build that bundles everything
you need.</p>
</div>
<div class="section" id="with-script-tags">
<h4>With &lt;script&gt; tags<a class="headerlink" href="#with-script-tags" title="Permalink to this headline"></a></h4>
<p>Take a look at <a class="reference external" href="https://github.com/jcbrand/converse.js/blob/master/non_amd.html">non_amd.html</a>
in the converse.js repo.</p>
<p>It shows in which order the libraries must be loaded via <tt class="docutils literal"><span class="pre">&lt;script&gt;</span></tt> tags. Add
your own libraries, making sure that they are loaded in the correct order (e.g.
jQuery plugins must load after jQuery).</p>
</div>
</div>
</div>
</div>
<div class="section" id="events">
<h1><a class="toc-backref" href="#id35">Events</a><a class="headerlink" href="#events" title="Permalink to this headline"></a></h1>
<p>Converse.js emits events to which you can subscribe from your own Javascript.</p>
<p>Concerning events, the following methods are available:</p>
<div class="section" id="event-methods">
<h2><a class="toc-backref" href="#id36">Event Methods</a><a class="headerlink" href="#event-methods" title="Permalink to this headline"></a></h2>
<ul>
<li><p class="first"><strong>on(eventName, callback)</strong>:</p>
<blockquote>
<div><p>Calling the <tt class="docutils literal"><span class="pre">on</span></tt> method allows you to subscribe to an event.
Every time the event fires, the callback method specified by <tt class="docutils literal"><span class="pre">callback</span></tt> will be
called.</p>
<p>Parameters:</p>
<ul class="simple">
<li><tt class="docutils literal"><span class="pre">eventName</span></tt> is the event name as a string.</li>
<li><tt class="docutils literal"><span class="pre">callback</span></tt> is the callback method to be called when the event is emitted.</li>
</ul>
<p>For example:</p>
<div class="highlight-python"><div class="highlight"><pre>converse.on(&#39;message&#39;, function (messageXML) { ... });
</pre></div>
</div>
</div></blockquote>
</li>
<li><p class="first"><strong>once(eventName, callback)</strong>:</p>
<blockquote>
<div><p>Calling the <tt class="docutils literal"><span class="pre">once</span></tt> method allows you to listen to an event
exactly once.</p>
<p>Parameters:</p>
<ul class="simple">
<li><tt class="docutils literal"><span class="pre">eventName</span></tt> is the event name as a string.</li>
<li><tt class="docutils literal"><span class="pre">callback</span></tt> is the callback method to be called when the event is emitted.</li>
</ul>
<p>For example:</p>
<div class="highlight-python"><div class="highlight"><pre>converse.once(&#39;message&#39;, function (messageXML) { ... });
</pre></div>
</div>
</div></blockquote>
</li>
<li><p class="first"><strong>off(eventName, callback)</strong></p>
<blockquote>
<div><p>To stop listening to an event, you can use the <tt class="docutils literal"><span class="pre">off</span></tt> method.</p>
<p>Parameters:</p>
<ul class="simple">
<li><tt class="docutils literal"><span class="pre">eventName</span></tt> is the event name as a string.</li>
<li><tt class="docutils literal"><span class="pre">callback</span></tt> refers to the function that is to be no longer executed.</li>
</ul>
</div></blockquote>
</li>
</ul>
</div>
<div class="section" id="event-types">
<h2><a class="toc-backref" href="#id37">Event Types</a><a class="headerlink" href="#event-types" title="Permalink to this headline"></a></h2>
<p>Here are the different events that are emitted:</p>
<table border="1" class="docutils">
<colgroup>
<col width="15%" />
<col width="45%" />
<col width="40%" />
</colgroup>
<thead valign="bottom">
<tr class="row-odd"><th class="head">Event Type</th>
<th class="head">When is it triggered?</th>
<th class="head">Example</th>
</tr>
</thead>
<tbody valign="top">
<tr class="row-even"><td><strong>initialized</strong></td>
<td>Once converse.js has been initialized.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('initialized',</span> <span class="pre">function</span> <span class="pre">()</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-odd"><td><strong>ready</strong></td>
<td>After connection has been established and converse.js has got all its ducks in a row.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('ready',</span> <span class="pre">function</span> <span class="pre">()</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-even"><td><strong>reconnect</strong></td>
<td>After the connection has dropped. Converse.js will attempt to reconnect when not in prebind mode.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('reconnect',</span> <span class="pre">function</span> <span class="pre">()</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-odd"><td><strong>message</strong></td>
<td>When a message is received.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('message',</span> <span class="pre">function</span> <span class="pre">(messageXML)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-even"><td><strong>messageSend</strong></td>
<td>When a message will be sent out.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('messageSend',</span> <span class="pre">function</span> <span class="pre">(messageText)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-odd"><td><strong>roster</strong></td>
<td>When the roster is updated.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('roster',</span> <span class="pre">function</span> <span class="pre">(items)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-even"><td><strong>callButtonClicked</strong></td>
<td>When a call button (i.e. with class .toggle-call) on a chat box has been clicked.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('callButtonClicked',</span> <span class="pre">function</span> <span class="pre">(connection,</span> <span class="pre">model)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-odd"><td><strong>chatBoxOpened</strong></td>
<td>When a chat box has been opened.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('chatBoxOpened',</span> <span class="pre">function</span> <span class="pre">(chatbox)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-even"><td><strong>chatRoomOpened</strong></td>
<td>When a chat room has been opened.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('chatRoomOpened',</span> <span class="pre">function</span> <span class="pre">(chatbox)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-odd"><td><strong>chatBoxClosed</strong></td>
<td>When a chat box has been closed.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('chatBoxClosed',</span> <span class="pre">function</span> <span class="pre">(chatbox)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-even"><td><strong>chatBoxFocused</strong></td>
<td>When the focus has been moved to a chat box.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('chatBoxFocused',</span> <span class="pre">function</span> <span class="pre">(chatbox)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-odd"><td><strong>chatBoxToggled</strong></td>
<td>When a chat box has been minimized or maximized.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('chatBoxToggled',</span> <span class="pre">function</span> <span class="pre">(chatbox)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-even"><td><strong>statusChanged</strong></td>
<td>When own chat status has changed.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('statusChanged',</span> <span class="pre">function</span> <span class="pre">(status)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-odd"><td><strong>statusMessageChanged</strong></td>
<td>When own custom status message has changed.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('statusMessageChanged',</span> <span class="pre">function</span> <span class="pre">(message)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-even"><td><strong>buddyStatusChanged</strong></td>
<td>When a chat buddy&#8217;s chat status has changed.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('buddyStatusChanged',</span> <span class="pre">function</span> <span class="pre">(buddy,</span> <span class="pre">status)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
<tr class="row-odd"><td><strong>buddyStatusMessageChanged</strong></td>
<td>When a chat buddy&#8217;s custom status message has changed.</td>
<td><tt class="docutils literal"><span class="pre">converse.on('buddyStatusMessageChanged',</span> <span class="pre">function</span> <span class="pre">(buddy,</span> <span class="pre">messageText)</span> <span class="pre">{</span> <span class="pre">...</span> <span class="pre">});</span></tt></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="section" id="configuration">
<h1><a class="toc-backref" href="#id38">Configuration</a><a class="headerlink" href="#configuration" title="Permalink to this headline"></a></h1>
<p>The included minified JS and CSS files can be used for demoing or testing, but
you&#8217;ll want to configure <em>Converse.js</em> to suit your needs before you deploy it
on your website.</p>
<p><em>Converse.js</em> is passed its configuration settings when you call its
<em>initialize</em> method.</p>
<p>You&#8217;ll most likely want to call the <em>initialize</em> method in your HTML page. For
an example of how this is done, please see the bottom of the <em>./index.html</em> page.</p>
<p>Please refer to the <a class="reference internal" href="#configuration-variables">Configuration variables</a> section below for info on
all the available configuration settings.</p>
<p>After you have configured <em>Converse.js</em>, you&#8217;ll have to regenerate the minified
JS file so that it will include the new settings. Please refer to the
<a class="reference internal" href="#minification">Minification</a> section for more info on how to do this.</p>
<div class="section" id="configuration-variables">
<h2><a class="toc-backref" href="#id39">Configuration variables</a><a class="headerlink" href="#configuration-variables" title="Permalink to this headline"></a></h2>
<div class="section" id="allow-contact-requests">
<h3><a class="toc-backref" href="#id40">allow_contact_requests</a><a class="headerlink" href="#allow-contact-requests" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">true</span></tt></p>
<p>Allow users to add one another as contacts. If this is set to false, the
<strong>Add a contact</strong> widget, <strong>Contact Requests</strong> and <strong>Pending Contacts</strong> roster
sections will all not appear. Additionally, all incoming contact requests will be
ignored.</p>
</div>
<div class="section" id="allow-muc">
<h3><a class="toc-backref" href="#id41">allow_muc</a><a class="headerlink" href="#allow-muc" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">true</span></tt></p>
<p>Allow multi-user chat (muc) in chatrooms. Setting this to <tt class="docutils literal"><span class="pre">false</span></tt> will remove
the <tt class="docutils literal"><span class="pre">Chatrooms</span></tt> tab from the control box.</p>
</div>
<div class="section" id="id3">
<h3><a class="toc-backref" href="#id42">allow_muc</a><a class="headerlink" href="#id3" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">true</span></tt></p>
<p>Allow Off-the-record encryption of single-user chat messages.</p>
</div>
<div class="section" id="animate">
<h3><a class="toc-backref" href="#id43">animate</a><a class="headerlink" href="#animate" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">true</span></tt></p>
<p>Show animations, for example when opening and closing chat boxes.</p>
</div>
<div class="section" id="auto-list-rooms">
<h3><a class="toc-backref" href="#id44">auto_list_rooms</a><a class="headerlink" href="#auto-list-rooms" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>If true, and the XMPP server on which the current user is logged in supports
multi-user chat, then a list of rooms on that server will be fetched.</p>
<p>Not recommended for servers with lots of chat rooms.</p>
<p>For each room on the server a query is made to fetch further details (e.g.
features, number of occupants etc.), so on servers with many rooms this
option will create lots of extra connection traffic.</p>
</div>
<div class="section" id="auto-reconnect">
<h3><a class="toc-backref" href="#id45">auto_reconnect</a><a class="headerlink" href="#auto-reconnect" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">true</span></tt></p>
<p>Automatically reconnect to the XMPP server if the connection drops
unexpectedly.</p>
</div>
<div class="section" id="auto-subscribe">
<h3><a class="toc-backref" href="#id46">auto_subscribe</a><a class="headerlink" href="#auto-subscribe" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>If true, the user will automatically subscribe back to any contact requests.</p>
</div>
<div class="section" id="bosh-service-url">
<h3><a class="toc-backref" href="#id47">bosh_service_url</a><a class="headerlink" href="#bosh-service-url" title="Permalink to this headline"></a></h3>
<p>Connections to an XMPP server depend on a BOSH connection manager which acts as
a middle man between HTTP and XMPP.</p>
<p>See <a class="reference external" href="http://metajack.im/2008/09/08/which-bosh-server-do-you-need">here</a> for more information.</p>
</div>
<div class="section" id="cache-otr-key">
<h3><a class="toc-backref" href="#id48">cache_otr_key</a><a class="headerlink" href="#cache-otr-key" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>Let the <a class="reference external" href="https://otr.cypherpunks.ca">OTR (Off-the-record encryption)</a> private
key be cached in your browser&#8217;s session storage.</p>
<p>The browser&#8217;s session storage persists across page loads but is deleted once
the tab or window is closed.</p>
<p>If this option is set to <tt class="docutils literal"><span class="pre">false</span></tt>, a new OTR private key will be generated
for each page load. While more inconvenient, this is a much more secure option.</p>
<p>This setting can only be used together with <tt class="docutils literal"><span class="pre">allow_otr</span> <span class="pre">=</span> <span class="pre">true</span></tt>.</p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">A browser window&#8217;s session storage is accessible by all javascript that
is served from the same domain. So if there is malicious javascript served by
the same server (or somehow injected via an attacker), then they will be able
to retrieve your private key and read your all the chat messages in your
current session. Previous sessions however cannot be decrypted.</p>
</div>
</div>
<div class="section" id="debug">
<h3><a class="toc-backref" href="#id49">debug</a><a class="headerlink" href="#debug" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>If set to true, debugging output will be logged to the browser console.</p>
</div>
<div class="section" id="message-carbons">
<h3><a class="toc-backref" href="#id50">message_carbons</a><a class="headerlink" href="#message-carbons" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>Support for <a class="reference external" href="https://xmpp.org/extensions/xep-0280.html">XEP-0280: Message Carbons</a></p>
</div>
<div class="section" id="expose-rid-and-sid">
<h3><a class="toc-backref" href="#id51">expose_rid_and_sid</a><a class="headerlink" href="#expose-rid-and-sid" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>Allow the prebind tokens, RID (request ID) and SID (session ID), to be exposed
globally via the API. This allows other scripts served on the same page to use
these values.</p>
<p><em>Beware</em>: a malicious script could use these tokens to assume your identity
and inject fake chat messages.</p>
</div>
<div class="section" id="forward-messages">
<h3><a class="toc-backref" href="#id52">forward_messages</a><a class="headerlink" href="#forward-messages" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>If set to <tt class="docutils literal"><span class="pre">true</span></tt>, sent messages will also be forwarded to other connected
XMPP resources (e.g. chat clients) of the same user.</p>
<p>This is useful for example if converse.js is running in multiple tabs of the
browser and you want sent messages to appear in all of them.</p>
<p>See also <a class="reference external" href="http://www.xmpp.org/extensions/xep-0297.html">XEP 0297: Stanza Forwarding</a></p>
</div>
<div class="section" id="fullname">
<h3><a class="toc-backref" href="#id53">fullname</a><a class="headerlink" href="#fullname" title="Permalink to this headline"></a></h3>
<p>If you are using prebinding, can specify the fullname of the currently
logged in user, otherwise the user&#8217;s vCard will be fetched.</p>
</div>
<div class="section" id="hide-muc-server">
<h3><a class="toc-backref" href="#id54">hide_muc_server</a><a class="headerlink" href="#hide-muc-server" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>Hide the <tt class="docutils literal"><span class="pre">server</span></tt> input field of the form inside the <tt class="docutils literal"><span class="pre">Room</span></tt> panel of the
controlbox. Useful if you want to restrict users to a specific XMPP server of
your choosing.</p>
</div>
<div class="section" id="i18n">
<h3><a class="toc-backref" href="#id55">i18n</a><a class="headerlink" href="#i18n" title="Permalink to this headline"></a></h3>
<p>Specify the locale/language. The language must be in the <tt class="docutils literal"><span class="pre">locales</span></tt> object. Refer to
<tt class="docutils literal"><span class="pre">./locale/locales.js</span></tt> to see which locales are supported.</p>
</div>
<div class="section" id="play-sounds">
<h3><a class="toc-backref" href="#id56">play_sounds</a><a class="headerlink" href="#play-sounds" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>Inside the <tt class="docutils literal"><span class="pre">./sounds</span></tt> directory of the Converse.js repo, you&#8217;ll see MP3 and Ogg
formatted sound files. We need both, because neither format is supported by all browsers.</p>
<p>For now, sound files are looked up by convention, not configuration. So to have
a sound play when a message is received, make sure that your webserver serves
it in both formats as <tt class="docutils literal"><span class="pre">http://yoursite.com/sounds/msg_received.mp3</span></tt> and
<tt class="docutils literal"><span class="pre">http://yoursite.com/sounds/msg_received.ogg</span></tt>.</p>
<p><tt class="docutils literal"><span class="pre">http://yoursite.com</span></tt> should of course be your site&#8217;s URL.</p>
</div>
<div class="section" id="prebind">
<h3><a class="toc-backref" href="#id57">prebind</a><a class="headerlink" href="#prebind" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>Use this option when you want to attach to an existing XMPP connection that was
already authenticated (usually on the backend before page load).</p>
<p>This is useful when you don&#8217;t want to render the login form on the chat control
box with each page load.</p>
<p>For prebinding to work, your backend server must authenticate for you, and
then return a JID (jabber ID), SID (session ID) and RID (Request ID).</p>
<p>If you set <tt class="docutils literal"><span class="pre">prebind</span></tt> to <tt class="docutils literal"><span class="pre">true</span></tt>, you have to make sure to also pass in these
values as <tt class="docutils literal"><span class="pre">jid</span></tt>, <tt class="docutils literal"><span class="pre">sid</span></tt>, <tt class="docutils literal"><span class="pre">rid</span></tt>.</p>
<p>Additionally, you have to specify <tt class="docutils literal"><span class="pre">bosh_service_url</span></tt>.</p>
</div>
<div class="section" id="roster-groups">
<h3><a class="toc-backref" href="#id58">roster_groups</a><a class="headerlink" href="#roster-groups" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>If set to <tt class="docutils literal"><span class="pre">true</span></tt>, converse.js will show any roster groups you might have
configured.</p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">It&#8217;s currently not possible to use converse.js to assign contacts to groups.
Converse.js can only show users and groups that were previously configured
elsewhere.</p>
</div>
</div>
<div class="section" id="show-controlbox-by-default">
<h3><a class="toc-backref" href="#id59">show_controlbox_by_default</a><a class="headerlink" href="#show-controlbox-by-default" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>The &#8220;controlbox&#8221; refers to the special chatbox containing your contacts roster,
status widget, chatrooms and other controls.</p>
<p>By default this box is hidden and can be toggled by clicking on any element in
the page with class <em>toggle-controlbox</em>.</p>
<p>If this options is set to true, the controlbox will by default be shown upon
page load.</p>
</div>
<div class="section" id="show-only-online-users">
<h3><a class="toc-backref" href="#id60">show_only_online_users</a><a class="headerlink" href="#show-only-online-users" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>If set to <tt class="docutils literal"><span class="pre">true</span></tt>, only online users will be shown in the contacts roster.
Users with any other status (e.g. away, busy etc.) will not be shown.</p>
</div>
<div class="section" id="storage">
<h3><a class="toc-backref" href="#id61">storage</a><a class="headerlink" href="#storage" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">session</span></tt></p>
<p>Valid options: <tt class="docutils literal"><span class="pre">session</span></tt>, <tt class="docutils literal"><span class="pre">local</span></tt>.</p>
<p>This option determines the type of <a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">storage</a>
(<tt class="docutils literal"><span class="pre">localStorage</span></tt> or <tt class="docutils literal"><span class="pre">sessionStorage</span></tt>) used by converse.js to cache user data.</p>
<p>Originally converse.js used only localStorage, however sessionStorage is from a
privacy perspective a better choice.</p>
<p>The main difference between the two is that sessionStorage only persists while
the current tab or window containing a converse.js instance is open. As soon as
it&#8217;s closed, the data is cleared.</p>
<p>Data in localStorage on the other hand is kept indefinitely.</p>
</div>
<div class="section" id="use-otr-by-default">
<h3><a class="toc-backref" href="#id62">use_otr_by_default</a><a class="headerlink" href="#use-otr-by-default" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<p>If set to <tt class="docutils literal"><span class="pre">true</span></tt>, Converse.js will automatically try to initiate an OTR (off-the-record)
encrypted chat session every time you open a chat box.</p>
</div>
<div class="section" id="use-vcards">
<h3><a class="toc-backref" href="#id63">use_vcards</a><a class="headerlink" href="#use-vcards" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">true</span></tt></p>
<p>Determines whether the XMPP server will be queried for roster contacts&#8217; VCards
or not. VCards contain extra personal information such as your fullname and
avatar image.</p>
</div>
<div class="section" id="visible-toolbar-buttons">
<h3><a class="toc-backref" href="#id64">visible_toolbar_buttons</a><a class="headerlink" href="#visible-toolbar-buttons" title="Permalink to this headline"></a></h3>
<p>Default:</p>
<div class="highlight-python"><div class="highlight"><pre><span class="p">{</span>
<span class="s">&#39;emoticons&#39;</span><span class="p">:</span> <span class="n">true</span><span class="p">,</span>
<span class="s">&#39;call&#39;</span><span class="p">:</span> <span class="n">false</span><span class="p">,</span>
<span class="s">&#39;clear&#39;</span><span class="p">:</span> <span class="n">true</span>
<span class="p">}</span>
</pre></div>
</div>
<p>Allows you to show or hide buttons on the chat boxes&#8217; toolbars.</p>
<ul>
<li><dl class="first docutils">
<dt><em>emoticons</em>:</dt>
<dd><p class="first last">Enables rendering of emoticons and provides a toolbar button for choosing them.</p>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt><em>call</em>:</dt>
<dd><p class="first">Provides a button with a picture of a telephone on it.
When the call button is pressed, it will emit an event that can be used by a third-party library to initiate a call.</p>
<div class="last highlight-python"><div class="highlight"><pre>converse.on(&#39;callButtonClicked&#39;, function(event, data) {
console.log(&#39;Strophe connection is&#39;, data.connection);
console.log(&#39;Bare buddy JID is&#39;, data.model.get(&#39;jid&#39;));
// ... Third-party library code ...
});
</pre></div>
</div>
</dd>
</dl>
</li>
<li><dl class="first docutils">
<dt><em>clear</em>:</dt>
<dd><p class="first last">Provides a button for clearing messages from a chat box.</p>
</dd>
</dl>
</li>
</ul>
</div>
<div class="section" id="xhr-custom-status">
<h3><a class="toc-backref" href="#id65">xhr_custom_status</a><a class="headerlink" href="#xhr-custom-status" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).</p>
</div>
<p>This option will let converse.js make an AJAX POST with your changed custom chat status to a
remote server.</p>
</div>
<div class="section" id="xhr-custom-status-url">
<h3><a class="toc-backref" href="#id66">xhr_custom_status_url</a><a class="headerlink" href="#xhr-custom-status-url" title="Permalink to this headline"></a></h3>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).</p>
</div>
<p>Default: Empty string</p>
<p>Used only in conjunction with <tt class="docutils literal"><span class="pre">xhr_custom_status</span></tt>.</p>
<p>This is the URL to which the AJAX POST request to set the user&#8217;s custom status
message will be made.</p>
<p>The message itself is sent in the request under the key <tt class="docutils literal"><span class="pre">msg</span></tt>.</p>
</div>
<div class="section" id="xhr-user-search">
<h3><a class="toc-backref" href="#id67">xhr_user_search</a><a class="headerlink" href="#xhr-user-search" title="Permalink to this headline"></a></h3>
<p>Default: <tt class="docutils literal"><span class="pre">false</span></tt></p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).</p>
</div>
<p>There are two ways to add users.</p>
<ul class="simple">
<li>The user inputs a valid JID (Jabber ID), and the user is added as a pending contact.</li>
<li>The user inputs some text (for example part of a firstname or lastname), an XHR (Ajax Request) will be made to a remote server, and a list of matches are returned. The user can then choose one of the matches to add as a contact.</li>
</ul>
<p>This setting enables the second mechanism, otherwise by default the first will be used.</p>
<p><em>What is expected from the remote server?</em></p>
<p>A default JSON encoded list of objects must be returned. Each object
corresponds to a matched user and needs the keys <tt class="docutils literal"><span class="pre">id</span></tt> and <tt class="docutils literal"><span class="pre">fullname</span></tt>.</p>
</div>
<div class="section" id="xhr-user-search-url">
<h3><a class="toc-backref" href="#id68">xhr_user_search_url</a><a class="headerlink" href="#xhr-user-search-url" title="Permalink to this headline"></a></h3>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">XHR stands for XMLHTTPRequest, and is meant here in the AJAX sense (Asynchronous Javascript and XML).</p>
</div>
<p>Default: Empty string</p>
<p>Used only in conjunction with <tt class="docutils literal"><span class="pre">xhr_user_search</span></tt>.</p>
<p>This is the URL to which an AJAX GET request will be made to fetch user data from your remote server.
The query string will be included in the request with <tt class="docutils literal"><span class="pre">q</span></tt> as its key.</p>
<p>The calendar can be configured through a <cite>data-pat-calendar</cite> attribute.
The available options are:</p>
</div>
</div>
</div>
</div>
</div>
<div class="clearer"></div>
</div>
</section>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
>index</a></li>
<li><a href="#">Converse.js 0.8.0 documentation</a> &raquo;</li>
</ul>
</div>
</div>
<div id="footer_wrap" class="outer">
<footer class="inner">
&copy; Copyright 2014, JC Brand.
<p class="copyright">Converse.js created by <a href="http://opkode.com" target="_blank">jcbrand</a></p>
</footer>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink