Skip to content

C
converse.js
Commit 4a3f38e5 authored by JC Brand's avatar JC Brand
Browse files
Options

Update docs with info on how to set up the dev env

parent 716ecc1b
Show whitespace changes
Inline Side-by-side
Showing with 320 additions and 222 deletions
docs/html/.buildinfo
View file @ 4a3f38e5
# Sphinx build info version 1 # Sphinx build info version 1
# This file hashes the configuration used when building these files. When it is not found, a full rebuild will be done. # This file hashes the configuration used when building these files. When it is not found, a full rebuild will be done.
config: 11cf73c9901b429394dccc272608c52e config: 412a90a1e0621af20e495234fc711bdf
tags: fbb0d17656682115ca4d033fb2f83ba1 tags: fbb0d17656682115ca4d033fb2f83ba1
docs/html/_sources/index.txt
View file @ 4a3f38e5
...@@ -10,6 +10,60 @@ ...@@ -10,6 +10,60 @@
:depth: 3 :depth: 3
:local: :local:
=========================================
Quickstart (to get a demo up and running)
=========================================
When you download a specific release of *Converse.js* there will be two minified files inside the zip file.
* converse.min.js
* converse.min.css
You can include these two files inside the *<head>* element of your website via the *script* and *link*
tags:
::
<link rel="stylesheet" type="text/css" media="screen" href="converse.min.css">
<script src="converse.min.js"></script>
Then, at the bottom of your page, after the closing *</body>* element, put the
following inline Javascript code:
::
require(['converse'], function (converse) {
converse.initialize({
auto_list_rooms: false,
auto_subscribe: false,
bosh_service_url: 'https://bind.opkode.im', // 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,
xhr_user_search: false
});
});
The *index.html* file inside the Converse.js folder serves as a nice usable
example of this.
These minified files provide the same demo-like functionality as is available
on the `conversejs.org`_ website. Useful for testing or demoing, but not very
practical.
You'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.
For more info on this, read: `Pre-binding and Single Session Support`_.
You might also want to have more fine-grained control of what gets included in
the minified Javascript file. Read `Configuration`_ and `Minification`_ for more info on how to do
that.
============ ============
Introduction Introduction
============ ============
...@@ -36,6 +90,7 @@ code. ...@@ -36,6 +90,7 @@ code.
The `What you will need`_ section has more information on all these The `What you will need`_ section has more information on all these
requirements. requirements.
================== ==================
What you will need What you will need
================== ==================
...@@ -151,85 +206,63 @@ In the callback function, you call *converse.onConnected* together with the ...@@ -151,85 +206,63 @@ In the callback function, you call *converse.onConnected* together with the
connection object. connection object.
========================================= ===========
Quickstart (to get a demo up and running) Development
========================================= ===========
When you download a specific release of *Converse.js* there will be two minified files inside the zip file.
* converse.min.js
* converse.min.css
You can include these two files inside the *<head>* element of your website via the *script* and *link* Install Node.js and development dependencies
tags: ============================================
:: We use development tools (`Grunt <http://gruntjs.com>`_ and `Bower <http://bower.io>`_)
which depend on Node.js and npm (the Node package manager).
<link rel="stylesheet" type="text/css" media="screen" href="converse.min.css"> If you don't have Node.js installed, you can download and install the latest
<script src="converse.min.js"></script> version `here <https://nodejs.org/download>`_.
Then, at the bottom of your page, after the closing *</body>* element, put the Once you have Node.js installed, run the following command in the Converse.js
following inline Javascript code: directory:
:: ::
require(['converse'], function (converse) { npm install
converse.initialize({
auto_list_rooms: false,
auto_subscribe: false,
bosh_service_url: 'https://bind.opkode.im', // 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,
xhr_user_search: false
});
});
The *index.html* file inside the Converse.js folder serves as a nice usable
example of this.
These minified files provide the same demo-like functionality as is available
on the `conversejs.org`_ website. Useful for testing or demoing, but not very
practical.
You'll most likely want to implement some kind of single-signon solution for Install 3rd party dependencies
your website, where users authenticate once in your website and then stay ==============================
logged into their XMPP session upon page reload.
For more info on this, read: `Pre-binding and Single Session Support`_. Now that we have Grunt and Bower, you can install and configure Converse's
3rd party dependencies with the following command:
You might also want to have more fine-grained control of what gets included in ::
the minified Javascript file. Read `Configuration`_ and `Minification`_ for more info on how to do
that.
=========== grunt build
Development
===========
With AMD and require.js (recommended) With AMD and require.js (recommended)
------------------------------------- =====================================
Converse.js uses `require.js`_ to track and load dependencies. Converse.js uses `require.js`_ to asynchronously load dependencies.
If you want to develop or customize converse.js, you'll want to load the If you want to develop or customize converse.js, you'll want to load the
non-minified javascript files. non-minified javascript files.
Add the following two lines to the *<head>* section of your webpage. Add the following two lines to the *<head>* section of your webpage:
:: ::
<link rel="stylesheet" type="text/css" media="screen" href="converse.css"> <link rel="stylesheet" type="text/css" media="screen" href="converse.css">
<script data-main="main" src="Libraries/require-jquery.js"></script> <script data-main="main" src="components/requirejs/require.js"></script>
require.js will then let the main.js file be parsed (because of the *data-main*
attribute on the *script* tag), which will in turn cause converse.js to be
parsed.
Without AMD and require.js Without AMD and require.js
-------------------------- ==========================
Converse.js can also be used without require.js. If you for some reason prefer Converse.js can also be used without require.js. If you for some reason prefer
to use it this way, please refer to *non_amd.html* for an example of how and in to use it this way, please refer to
what order all the Javascript files that converse.js depends on need to be `non_amd.html <https://github.com/jcbrand/converse.js/blob/master/non_amd.html>`_
loaded. for an example of how and in what order all the Javascript files that converse.js
depends on need to be loaded.
============= =============
...@@ -290,7 +323,7 @@ bosh_service_url ...@@ -290,7 +323,7 @@ bosh_service_url
Connections to an XMPP server depend on a BOSH connection manager which acts as Connections to an XMPP server depend on a BOSH connection manager which acts as
a middle man between HTTP and XMPP. a middle man between HTTP and XMPP.
See `here`_ for more information. See `here <http://metajack.im/2008/09/08/which-bosh-server-do-you-need>`_ for more information.
fullname fullname
-------- --------
...@@ -505,7 +538,6 @@ those hoops you had to jump through. ...@@ -505,7 +538,6 @@ those hoops you had to jump through.
.. _`conversejs.org`: http://conversejs.org .. _`conversejs.org`: http://conversejs.org
.. _`require.js`: http://requirejs.org .. _`require.js`: http://requirejs.org
.. _`read more about require.js's optimizer here`: http://requirejs.org/docs/optimization.html .. _`read more about require.js's optimizer here`: http://requirejs.org/docs/optimization.html
.. _`here`: http://metajack.im/2008/09/08/which-bosh-server-do-you-need/l
.. _`HTTP`: https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol .. _`HTTP`: https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
.. _`XMPP`: https://en.wikipedia.org/wiki/Xmpp .. _`XMPP`: https://en.wikipedia.org/wiki/Xmpp
.. _`Converse.js homepage`: http://conversejs.org .. _`Converse.js homepage`: http://conversejs.org
......
docs/html/genindex.html
View file @ 4a3f38e5
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index &mdash; Converse.js 0.3 documentation</title> <title>Index &mdash; Converse.js 0.5 documentation</title>
<link rel="stylesheet" href="_static/stylesheet.css" type="text/css" /> <link rel="stylesheet" href="_static/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" /> <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<script type="text/javascript"> <script type="text/javascript">
var DOCUMENTATION_OPTIONS = { var DOCUMENTATION_OPTIONS = {
URL_ROOT: '', URL_ROOT: '',
VERSION: '0.3', VERSION: '0.5',
COLLAPSE_INDEX: false, COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html', FILE_SUFFIX: '.html',
HAS_SOURCE: true HAS_SOURCE: true
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<script type="text/javascript" src="_static/jquery.js"></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/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script> <script type="text/javascript" src="_static/doctools.js"></script>
<link rel="top" title="Converse.js 0.3 documentation" href="index.html" /> <link rel="top" title="Converse.js 0.5 documentation" href="index.html" />
</head> </head>
<body> <body>
<div id="header_wrap" class="outer"> <div id="header_wrap" class="outer">
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
<li class="right" style="margin-right: 10px"> <li class="right" style="margin-right: 10px">
<a href="#" title="General Index" <a href="#" title="General Index"
accesskey="I">index</a></li> accesskey="I">index</a></li>
<li><a href="index.html">Converse.js 0.3 documentation</a> &raquo;</li> <li><a href="index.html">Converse.js 0.5 documentation</a> &raquo;</li>
</ul> </ul>
</div> </div>
<section id="main_content" class="inner"> <section id="main_content" class="inner">
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
<li class="right" style="margin-right: 10px"> <li class="right" style="margin-right: 10px">
<a href="#" title="General Index" <a href="#" title="General Index"
>index</a></li> >index</a></li>
<li><a href="index.html">Converse.js 0.3 documentation</a> &raquo;</li> <li><a href="index.html">Converse.js 0.5 documentation</a> &raquo;</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/html/index.html
View file @ 4a3f38e5
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Introduction &mdash; Converse.js 0.3 documentation</title> <title>Quickstart (to get a demo up and running) &mdash; Converse.js 0.5 documentation</title>
<link rel="stylesheet" href="_static/stylesheet.css" type="text/css" /> <link rel="stylesheet" href="_static/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" /> <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<script type="text/javascript"> <script type="text/javascript">
var DOCUMENTATION_OPTIONS = { var DOCUMENTATION_OPTIONS = {
URL_ROOT: '', URL_ROOT: '',
VERSION: '0.3', VERSION: '0.5',
COLLAPSE_INDEX: false, COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html', FILE_SUFFIX: '.html',
HAS_SOURCE: true HAS_SOURCE: true
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<script type="text/javascript" src="_static/jquery.js"></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/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script> <script type="text/javascript" src="_static/doctools.js"></script>
<link rel="top" title="Converse.js 0.3 documentation" href="#" /> <link rel="top" title="Converse.js 0.5 documentation" href="#" />
</head> </head>
<body> <body>
<div id="header_wrap" class="outer"> <div id="header_wrap" class="outer">
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<li class="right" style="margin-right: 10px"> <li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index" <a href="genindex.html" title="General Index"
accesskey="I">index</a></li> accesskey="I">index</a></li>
<li><a href="#">Converse.js 0.3 documentation</a> &raquo;</li> <li><a href="#">Converse.js 0.5 documentation</a> &raquo;</li>
</ul> </ul>
</div> </div>
<section id="main_content" class="inner"> <section id="main_content" class="inner">
...@@ -65,46 +65,92 @@ ...@@ -65,46 +65,92 @@
<div class="contents local topic" id="table-of-contents"> <div class="contents local topic" id="table-of-contents">
<p class="topic-title first">Table of Contents</p> <p class="topic-title first">Table of Contents</p>
<ul class="simple"> <ul class="simple">
<li><a class="reference internal" href="#introduction" id="id1">Introduction</a></li> <li><a class="reference internal" href="#quickstart-to-get-a-demo-up-and-running" id="id2">Quickstart (to get a demo up and running)</a></li>
<li><a class="reference internal" href="#what-you-will-need" id="id2">What you will need</a><ul> <li><a class="reference internal" href="#introduction" id="id3">Introduction</a></li>
<li><a class="reference internal" href="#an-xmpp-jabber-server" id="id3">An XMPP/Jabber server</a></li> <li><a class="reference internal" href="#what-you-will-need" id="id4">What you will need</a><ul>
<li><a class="reference internal" href="#connection-manager" id="id4">Connection Manager</a><ul> <li><a class="reference internal" href="#an-xmpp-jabber-server" id="id5">An XMPP/Jabber server</a></li>
<li><a class="reference internal" href="#overcoming-cross-domain-request-restrictions" id="id5">Overcoming cross-domain request restrictions</a></li> <li><a class="reference internal" href="#connection-manager" id="id6">Connection Manager</a><ul>
<li><a class="reference internal" href="#overcoming-cross-domain-request-restrictions" id="id7">Overcoming cross-domain request restrictions</a></li>
</ul> </ul>
</li> </li>
<li><a class="reference internal" href="#server-side-authentication" id="id6">Server-side authentication</a><ul> <li><a class="reference internal" href="#server-side-authentication" id="id8">Server-side authentication</a><ul>
<li><a class="reference internal" href="#pre-binding-and-single-session-support" id="id7">Pre-binding and Single Session Support</a></li> <li><a class="reference internal" href="#pre-binding-and-single-session-support" id="id9">Pre-binding and Single Session Support</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
</li> </li>
<li><a class="reference internal" href="#quickstart-to-get-a-demo-up-and-running" id="id8">Quickstart (to get a demo up and running)</a></li> <li><a class="reference internal" href="#development" id="id10">Development</a><ul>
<li><a class="reference internal" href="#development" id="id9">Development</a></li> <li><a class="reference internal" href="#install-node-js-and-development-dependencies" id="id11">Install Node.js and development dependencies</a></li>
<li><a class="reference internal" href="#configuration" id="id10">Configuration</a><ul> <li><a class="reference internal" href="#install-3rd-party-dependencies" id="id12">Install 3rd party dependencies</a></li>
<li><a class="reference internal" href="#configuration-variables" id="id11">Configuration variables</a><ul> <li><a class="reference internal" href="#with-amd-and-require-js-recommended" id="id13">With AMD and require.js (recommended)</a></li>
<li><a class="reference internal" href="#animate" id="id12">animate</a></li> <li><a class="reference internal" href="#without-amd-and-require-js" id="id14">Without AMD and require.js</a></li>
<li><a class="reference internal" href="#auto-list-rooms" id="id13">auto_list_rooms</a></li>
<li><a class="reference internal" href="#auto-subscribe" id="id14">auto_subscribe</a></li>
<li><a class="reference internal" href="#bosh-service-url" id="id15">bosh_service_url</a></li>
<li><a class="reference internal" href="#fullname" id="id16">fullname</a></li>
<li><a class="reference internal" href="#hide-muc-server" id="id17">hide_muc_server</a></li>
<li><a class="reference internal" href="#prebind" id="id18">prebind</a></li>
<li><a class="reference internal" href="#show-controlbox-by-default" id="id19">show_controlbox_by_default</a></li>
<li><a class="reference internal" href="#xhr-user-search" id="id20">xhr_user_search</a></li>
</ul> </ul>
</li> </li>
<li><a class="reference internal" href="#configuration" id="id15">Configuration</a><ul>
<li><a class="reference internal" href="#configuration-variables" id="id16">Configuration variables</a><ul>
<li><a class="reference internal" href="#animate" id="id17">animate</a></li>
<li><a class="reference internal" href="#auto-list-rooms" id="id18">auto_list_rooms</a></li>
<li><a class="reference internal" href="#auto-subscribe" id="id19">auto_subscribe</a></li>
<li><a class="reference internal" href="#bosh-service-url" id="id20">bosh_service_url</a></li>
<li><a class="reference internal" href="#fullname" id="id21">fullname</a></li>
<li><a class="reference internal" href="#hide-muc-server" id="id22">hide_muc_server</a></li>
<li><a class="reference internal" href="#prebind" id="id23">prebind</a></li>
<li><a class="reference internal" href="#show-controlbox-by-default" id="id24">show_controlbox_by_default</a></li>
<li><a class="reference internal" href="#xhr-user-search" id="id25">xhr_user_search</a></li>
</ul> </ul>
</li> </li>
<li><a class="reference internal" href="#minification" id="id21">Minification</a><ul>
<li><a class="reference internal" href="#minifying-javascript" id="id22">Minifying Javascript</a></li>
<li><a class="reference internal" href="#minifying-css" id="id23">Minifying CSS</a></li>
</ul> </ul>
</li> </li>
<li><a class="reference internal" href="#translations" id="id24">Translations</a></li> <li><a class="reference internal" href="#minification" id="id26">Minification</a><ul>
<li><a class="reference internal" href="#minifying-javascript" id="id27">Minifying Javascript</a></li>
<li><a class="reference internal" href="#minifying-css" id="id28">Minifying CSS</a></li>
</ul> </ul>
</li>
<li><a class="reference internal" href="#translations" id="id29">Translations</a></li>
</ul>
</div>
<div class="section" id="quickstart-to-get-a-demo-up-and-running">
<h1><a class="toc-backref" href="#id2">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>converse.min.js</li>
<li>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"><pre>&lt;link rel="stylesheet" type="text/css" media="screen" href="converse.min.css"&gt;
&lt;script src="converse.min.js"&gt;&lt;/script&gt;</pre>
</div>
<p>Then, at the bottom of your page, after the closing <em>&lt;/body&gt;</em> element, put the
following inline Javascript code:</p>
<div class="highlight-python"><pre>require(['converse'], function (converse) {
converse.initialize({
auto_list_rooms: false,
auto_subscribe: false,
bosh_service_url: 'https://bind.opkode.im', // 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,
xhr_user_search: false
});
});</pre>
</div>
<p>The <em>index.html</em> file inside the Converse.js folder serves as a nice usable
example of this.</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="#pre-binding-and-single-session-support">Pre-binding 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>
<div class="section" id="introduction"> <div class="section" id="introduction">
<h1><a class="toc-backref" href="#id1">Introduction</a><a class="headerlink" href="#introduction" title="Permalink to this headline"></a></h1> <h1><a class="toc-backref" href="#id3">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> <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) website, <em>Converse.js</em> is not really meant to be a &#8220;Software-as-a-service&#8221; (SaaS)
webchat.</p> webchat.</p>
...@@ -123,9 +169,9 @@ code.</p> ...@@ -123,9 +169,9 @@ code.</p>
requirements.</p> requirements.</p>
</div> </div>
<div class="section" id="what-you-will-need"> <div class="section" id="what-you-will-need">
<h1><a class="toc-backref" href="#id2">What you will need</a><a class="headerlink" href="#what-you-will-need" title="Permalink to this headline"></a></h1> <h1><a class="toc-backref" href="#id4">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"> <div class="section" id="an-xmpp-jabber-server">
<h2><a class="toc-backref" href="#id3">An XMPP/Jabber server</a><a class="headerlink" href="#an-xmpp-jabber-server" title="Permalink to this headline"></a></h2> <h2><a class="toc-backref" href="#id5">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 <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> 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 <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
...@@ -134,7 +180,7 @@ have <a class="reference internal" href="#session-support">Session Support</a> y ...@@ -134,7 +180,7 @@ have <a class="reference internal" href="#session-support">Session Support</a> y
servers that you can set up yourself on <a class="reference external" href="http://xmpp.org/xmpp-software/servers/">xmpp.org</a>.</p> 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>
<div class="section" id="connection-manager"> <div class="section" id="connection-manager">
<h2><a class="toc-backref" href="#id4">Connection Manager</a><a class="headerlink" href="#connection-manager" title="Permalink to this headline"></a></h2> <h2><a class="toc-backref" href="#id6">Connection Manager</a><a class="headerlink" href="#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 <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> 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 <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
...@@ -149,7 +195,7 @@ includes a connection manager (but you have to enable it).</p> ...@@ -149,7 +195,7 @@ includes a connection manager (but you have to enable it).</p>
This connection manager is for testing purposes only, please don&#8217;t use it in This connection manager is for testing purposes only, please don&#8217;t use it in
production.</p> production.</p>
<div class="section" id="overcoming-cross-domain-request-restrictions"> <div class="section" id="overcoming-cross-domain-request-restrictions">
<h3><a class="toc-backref" href="#id5">Overcoming cross-domain request restrictions</a><a class="headerlink" href="#overcoming-cross-domain-request-restrictions" title="Permalink to this headline"></a></h3> <h3><a class="toc-backref" href="#id7">Overcoming cross-domain request restrictions</a><a class="headerlink" href="#overcoming-cross-domain-request-restrictions" title="Permalink to this headline"></a></h3>
<p>The domain of the <em>Converse.js</em> demo is <em>conversejs.org</em>, but the domain of the connection manager is <em>opkode.im</em>. <p>The domain of the <em>Converse.js</em> demo is <em>conversejs.org</em>, but the domain of the connection manager is <em>opkode.im</em>.
HTTP requests are made by <em>Converse.js</em> to the connection manager via XmlHttpRequests (XHR). 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 Until recently, it was not possible to make such requests to a different domain
...@@ -167,9 +213,9 @@ website. This will remove the need for any cross-domain XHR support.</p> ...@@ -167,9 +213,9 @@ website. This will remove the need for any cross-domain XHR support.</p>
</div> </div>
</div> </div>
<div class="section" id="server-side-authentication"> <div class="section" id="server-side-authentication">
<h2><a class="toc-backref" href="#id6">Server-side authentication</a><a class="headerlink" href="#server-side-authentication" title="Permalink to this headline"></a></h2> <h2><a class="toc-backref" href="#id8">Server-side authentication</a><a class="headerlink" href="#server-side-authentication" title="Permalink to this headline"></a></h2>
<div class="section" id="pre-binding-and-single-session-support"> <div class="section" id="pre-binding-and-single-session-support">
<span id="session-support"></span><h3><a class="toc-backref" href="#id7">Pre-binding and Single Session Support</a><a class="headerlink" href="#pre-binding-and-single-session-support" title="Permalink to this headline"></a></h3> <span id="session-support"></span><h3><a class="toc-backref" href="#id9">Pre-binding and Single Session Support</a><a class="headerlink" href="#pre-binding-and-single-session-support" title="Permalink to this headline"></a></h3>
<p>It&#8217;s possible to enable single-site login, whereby users already <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, authenticated in your website will also automatically be logged in on the chat server,
but this will require custom code on your server.</p> but this will require custom code on your server.</p>
...@@ -208,62 +254,50 @@ connection object.</p> ...@@ -208,62 +254,50 @@ connection object.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="section" id="quickstart-to-get-a-demo-up-and-running">
<h1><a class="toc-backref" href="#id8">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>converse.min.js</li>
<li>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"><pre>&lt;link rel="stylesheet" type="text/css" media="screen" href="converse.min.css"&gt;
&lt;script src="converse.min.js"&gt;&lt;/script&gt;</pre>
</div>
<p>Then, at the bottom of your page, after the closing <em>&lt;/body&gt;</em> element, put the
following inline Javascript code:</p>
<div class="highlight-python"><pre>require(['converse'], function (converse) {
converse.initialize({
auto_list_rooms: false,
auto_subscribe: false,
bosh_service_url: 'https://bind.opkode.im', // 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,
xhr_user_search: false
});
});</pre>
</div>
<p>The <em>index.html</em> file inside the Converse.js folder serves as a nice usable
example of this.</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="#pre-binding-and-single-session-support">Pre-binding 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="development"> <div class="section" id="development">
<h1><a class="toc-backref" href="#id9">Development</a><a class="headerlink" href="#development" title="Permalink to this headline"></a></h1> <h1><a class="toc-backref" href="#id10">Development</a><a class="headerlink" href="#development" title="Permalink to this headline"></a></h1>
<p>Converse.js uses <a class="reference external" href="http://requirejs.org">require.js</a> to track and load dependencies.</p> <div class="section" id="install-node-js-and-development-dependencies">
<h2><a class="toc-backref" href="#id11">Install Node.js and development dependencies</a><a class="headerlink" href="#install-node-js-and-development-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>Once you have Node.js installed, run the following command in the Converse.js
directory:</p>
<div class="highlight-python"><pre>npm install</pre>
</div>
</div>
<div class="section" id="install-3rd-party-dependencies">
<h2><a class="toc-backref" href="#id12">Install 3rd party dependencies</a><a class="headerlink" href="#install-3rd-party-dependencies" title="Permalink to this headline"></a></h2>
<p>Now that we have Grunt and Bower, you can install and configure Converse&#8217;s
3rd party dependencies with the following command:</p>
<div class="highlight-python"><pre>grunt build</pre>
</div>
</div>
<div class="section" id="with-amd-and-require-js-recommended">
<h2><a class="toc-backref" href="#id13">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 <p>If you want to develop or customize converse.js, you&#8217;ll want to load the
non-minified javascript files.</p> non-minified javascript files.</p>
<p>Add the following two lines to the <em>&lt;head&gt;</em> section of your webpage.</p> <p>Add the following two lines to the <em>&lt;head&gt;</em> section of your webpage:</p>
<div class="highlight-python"><pre>&lt;link rel="stylesheet" type="text/css" media="screen" href="converse.css"&gt; <div class="highlight-python"><pre>&lt;link rel="stylesheet" type="text/css" media="screen" href="converse.css"&gt;
&lt;script data-main="main" src="Libraries/require-jquery.js"&gt;&lt;/script&gt;</pre> &lt;script data-main="main" src="components/requirejs/require.js"&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="#id14">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 <p>Converse.js can also be used without require.js. If you for some reason prefer
to use it this way, please refer to <em>non_amd.html</em> for an example of how and in to use it this way, please refer to
what order all the Javascript files that converse.js depends on need to be <a class="reference external" href="https://github.com/jcbrand/converse.js/blob/master/non_amd.html">non_amd.html</a>
loaded.</p> 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> </div>
<div class="section" id="configuration"> <div class="section" id="configuration">
<h1><a class="toc-backref" href="#id10">Configuration</a><a class="headerlink" href="#configuration" title="Permalink to this headline"></a></h1> <h1><a class="toc-backref" href="#id15">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 <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 you&#8217;ll want to configure <em>Converse.js</em> to suit your needs before you deploy it
on your website.</p> on your website.</p>
...@@ -277,14 +311,14 @@ all the available configuration settings.</p> ...@@ -277,14 +311,14 @@ all the available configuration settings.</p>
JS file so that it will include the new settings. Please refer to the 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> <a class="reference internal" href="#minification">Minification</a> section for more info on how to do this.</p>
<div class="section" id="configuration-variables"> <div class="section" id="configuration-variables">
<h2><a class="toc-backref" href="#id11">Configuration variables</a><a class="headerlink" href="#configuration-variables" title="Permalink to this headline"></a></h2> <h2><a class="toc-backref" href="#id16">Configuration variables</a><a class="headerlink" href="#configuration-variables" title="Permalink to this headline"></a></h2>
<div class="section" id="animate"> <div class="section" id="animate">
<h3><a class="toc-backref" href="#id12">animate</a><a class="headerlink" href="#animate" title="Permalink to this headline"></a></h3> <h3><a class="toc-backref" href="#id17">animate</a><a class="headerlink" href="#animate" title="Permalink to this headline"></a></h3>
<p>Default = True</p> <p>Default = True</p>
<p>Show animations, for example when opening and closing chat boxes.</p> <p>Show animations, for example when opening and closing chat boxes.</p>
</div> </div>
<div class="section" id="auto-list-rooms"> <div class="section" id="auto-list-rooms">
<h3><a class="toc-backref" href="#id13">auto_list_rooms</a><a class="headerlink" href="#auto-list-rooms" title="Permalink to this headline"></a></h3> <h3><a class="toc-backref" href="#id18">auto_list_rooms</a><a class="headerlink" href="#auto-list-rooms" title="Permalink to this headline"></a></h3>
<p>Default = False</p> <p>Default = False</p>
<p>If true, and the XMPP server on which the current user is logged in supports <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> multi-user chat, then a list of rooms on that server will be fetched.</p>
...@@ -294,30 +328,30 @@ features, number of occupants etc.), so on servers with many rooms this ...@@ -294,30 +328,30 @@ features, number of occupants etc.), so on servers with many rooms this
option will create lots of extra connection traffic.</p> option will create lots of extra connection traffic.</p>
</div> </div>
<div class="section" id="auto-subscribe"> <div class="section" id="auto-subscribe">
<h3><a class="toc-backref" href="#id14">auto_subscribe</a><a class="headerlink" href="#auto-subscribe" title="Permalink to this headline"></a></h3> <h3><a class="toc-backref" href="#id19">auto_subscribe</a><a class="headerlink" href="#auto-subscribe" title="Permalink to this headline"></a></h3>
<p>Default = False</p> <p>Default = False</p>
<p>If true, the user will automatically subscribe back to any contact requests.</p> <p>If true, the user will automatically subscribe back to any contact requests.</p>
</div> </div>
<div class="section" id="bosh-service-url"> <div class="section" id="bosh-service-url">
<h3><a class="toc-backref" href="#id15">bosh_service_url</a><a class="headerlink" href="#bosh-service-url" title="Permalink to this headline"></a></h3> <h3><a class="toc-backref" href="#id20">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 <p>Connections to an XMPP server depend on a BOSH connection manager which acts as
a middle man between HTTP and XMPP.</p> 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/l">here</a> for more information.</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>
<div class="section" id="fullname"> <div class="section" id="fullname">
<h3><a class="toc-backref" href="#id16">fullname</a><a class="headerlink" href="#fullname" title="Permalink to this headline"></a></h3> <h3><a class="toc-backref" href="#id21">fullname</a><a class="headerlink" href="#fullname" title="Permalink to this headline"></a></h3>
<p>If you are using prebinding, you need to specify the fullname of the currently <p>If you are using prebinding, you need to specify the fullname of the currently
logged in user.</p> logged in user.</p>
</div> </div>
<div class="section" id="hide-muc-server"> <div class="section" id="hide-muc-server">
<h3><a class="toc-backref" href="#id17">hide_muc_server</a><a class="headerlink" href="#hide-muc-server" title="Permalink to this headline"></a></h3> <h3><a class="toc-backref" href="#id22">hide_muc_server</a><a class="headerlink" href="#hide-muc-server" title="Permalink to this headline"></a></h3>
<p>Default = False</p> <p>Default = False</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 <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 controlbox. Useful if you want to restrict users to a specific XMPP server of
your choosing.</p> your choosing.</p>
</div> </div>
<div class="section" id="prebind"> <div class="section" id="prebind">
<h3><a class="toc-backref" href="#id18">prebind</a><a class="headerlink" href="#prebind" title="Permalink to this headline"></a></h3> <h3><a class="toc-backref" href="#id23">prebind</a><a class="headerlink" href="#prebind" title="Permalink to this headline"></a></h3>
<p>Default = False</p> <p>Default = False</p>
<p>Use this option when you want to attach to an existing XMPP connection that was <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> already authenticated (usually on the backend before page load).</p>
...@@ -338,7 +372,7 @@ have to write a Javascript snippet to attach to the set up connection:</p> ...@@ -338,7 +372,7 @@ have to write a Javascript snippet to attach to the set up connection:</p>
RID (Request ID), which you use when you attach to the connection.</p> RID (Request ID), which you use when you attach to the connection.</p>
</div> </div>
<div class="section" id="show-controlbox-by-default"> <div class="section" id="show-controlbox-by-default">
<h3><a class="toc-backref" href="#id19">show_controlbox_by_default</a><a class="headerlink" href="#show-controlbox-by-default" title="Permalink to this headline"></a></h3> <h3><a class="toc-backref" href="#id24">show_controlbox_by_default</a><a class="headerlink" href="#show-controlbox-by-default" title="Permalink to this headline"></a></h3>
<p>Default = False</p> <p>Default = False</p>
<p>The &#8220;controlbox&#8221; refers to the special chatbox containing your contacts roster, <p>The &#8220;controlbox&#8221; refers to the special chatbox containing your contacts roster,
status widget, chatrooms and other controls.</p> status widget, chatrooms and other controls.</p>
...@@ -348,7 +382,7 @@ the page with class <em>toggle-online-users</em>.</p> ...@@ -348,7 +382,7 @@ the page with class <em>toggle-online-users</em>.</p>
page load.</p> page load.</p>
</div> </div>
<div class="section" id="xhr-user-search"> <div class="section" id="xhr-user-search">
<h3><a class="toc-backref" href="#id20">xhr_user_search</a><a class="headerlink" href="#xhr-user-search" title="Permalink to this headline"></a></h3> <h3><a class="toc-backref" href="#id25">xhr_user_search</a><a class="headerlink" href="#xhr-user-search" title="Permalink to this headline"></a></h3>
<p>Default = False</p> <p>Default = False</p>
<p>There are two ways to add users.</p> <p>There are two ways to add users.</p>
<ul class="simple"> <ul class="simple">
...@@ -361,9 +395,9 @@ be used.</p> ...@@ -361,9 +395,9 @@ be used.</p>
</div> </div>
</div> </div>
<div class="section" id="minification"> <div class="section" id="minification">
<h1><a class="toc-backref" href="#id21">Minification</a><a class="headerlink" href="#minification" title="Permalink to this headline"></a></h1> <h1><a class="toc-backref" href="#id26">Minification</a><a class="headerlink" href="#minification" title="Permalink to this headline"></a></h1>
<div class="section" id="minifying-javascript"> <div class="section" id="minifying-javascript">
<h2><a class="toc-backref" href="#id22">Minifying Javascript</a><a class="headerlink" href="#minifying-javascript" title="Permalink to this headline"></a></h2> <h2><a class="toc-backref" href="#id27">Minifying Javascript</a><a class="headerlink" href="#minifying-javascript" title="Permalink to this headline"></a></h2>
<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 <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 to bundle them together in a single minified file fit for deployment to a
production site.</p> production site.</p>
...@@ -379,14 +413,14 @@ manager, NPM.</p> ...@@ -379,14 +413,14 @@ manager, NPM.</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>You can <a class="reference external" href="http://requirejs.org/docs/optimization.html">read more about require.js&#8217;s optimizer here</a>.</p>
</div> </div>
<div class="section" id="minifying-css"> <div class="section" id="minifying-css">
<h2><a class="toc-backref" href="#id23">Minifying CSS</a><a class="headerlink" href="#minifying-css" title="Permalink to this headline"></a></h2> <h2><a class="toc-backref" href="#id28">Minifying CSS</a><a class="headerlink" href="#minifying-css" title="Permalink to this headline"></a></h2>
<p>CSS can be minimized with Yahoo&#8217;s yuicompressor tool:</p> <p>CSS can be minimized with Yahoo&#8217;s yuicompressor tool:</p>
<div class="highlight-python"><pre>yui-compressor --type=css converse.css -o converse.min.css</pre> <div class="highlight-python"><pre>yui-compressor --type=css converse.css -o converse.min.css</pre>
</div> </div>
</div> </div>
</div> </div>
<div class="section" id="translations"> <div class="section" id="translations">
<h1><a class="toc-backref" href="#id24">Translations</a><a class="headerlink" href="#translations" title="Permalink to this headline"></a></h1> <h1><a class="toc-backref" href="#id29">Translations</a><a class="headerlink" href="#translations" title="Permalink to this headline"></a></h1>
<div class="admonition note"> <div class="admonition note">
<p class="first admonition-title">Note</p> <p class="first admonition-title">Note</p>
<p class="last">Translations take up a lot of space and will bloat your minified file. <p class="last">Translations take up a lot of space and will bloat your minified file.
...@@ -472,7 +506,7 @@ those hoops you had to jump through.</p> ...@@ -472,7 +506,7 @@ those hoops you had to jump through.</p>
<li class="right" style="margin-right: 10px"> <li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index" <a href="genindex.html" title="General Index"
>index</a></li> >index</a></li>
<li><a href="#">Converse.js 0.3 documentation</a> &raquo;</li> <li><a href="#">Converse.js 0.5 documentation</a> &raquo;</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/html/objects.inv
View file @ 4a3f38e5
# Sphinx inventory version 2 # Sphinx inventory version 2
# Project: Converse.js # Project: Converse.js
# Version: 0.3 # Version: 0.5
# The remainder of this file is compressed using zlib. # The remainder of this file is compressed using zlib.
xm xm
{"]; {"];
......
docs/html/search.html
View file @ 4a3f38e5
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search &mdash; Converse.js 0.3 documentation</title> <title>Search &mdash; Converse.js 0.5 documentation</title>
<link rel="stylesheet" href="_static/stylesheet.css" type="text/css" /> <link rel="stylesheet" href="_static/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" /> <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<script type="text/javascript"> <script type="text/javascript">
var DOCUMENTATION_OPTIONS = { var DOCUMENTATION_OPTIONS = {
URL_ROOT: '', URL_ROOT: '',
VERSION: '0.3', VERSION: '0.5',
COLLAPSE_INDEX: false, COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html', FILE_SUFFIX: '.html',
HAS_SOURCE: true HAS_SOURCE: true
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<script type="text/javascript" src="_static/underscore.js"></script> <script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script> <script type="text/javascript" src="_static/doctools.js"></script>
<script type="text/javascript" src="_static/searchtools.js"></script> <script type="text/javascript" src="_static/searchtools.js"></script>
<link rel="top" title="Converse.js 0.3 documentation" href="index.html" /> <link rel="top" title="Converse.js 0.5 documentation" href="index.html" />
<script type="text/javascript"> <script type="text/javascript">
jQuery(function() { Search.loadIndex("searchindex.js"); }); jQuery(function() { Search.loadIndex("searchindex.js"); });
</script> </script>
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
<li class="right" style="margin-right: 10px"> <li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index" <a href="genindex.html" title="General Index"
accesskey="I">index</a></li> accesskey="I">index</a></li>
<li><a href="index.html">Converse.js 0.3 documentation</a> &raquo;</li> <li><a href="index.html">Converse.js 0.5 documentation</a> &raquo;</li>
</ul> </ul>
</div> </div>
<section id="main_content" class="inner"> <section id="main_content" class="inner">
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
<li class="right" style="margin-right: 10px"> <li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index" <a href="genindex.html" title="General Index"
>index</a></li> >index</a></li>
<li><a href="index.html">Converse.js 0.3 documentation</a> &raquo;</li> <li><a href="index.html">Converse.js 0.5 documentation</a> &raquo;</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/html/searchindex.js
View file @ 4a3f38e5
Search.setIndex({objects:{},terms:{all:0,code:0,partial:0,queri:0,webchat:0,follow:0,middl:0,depend:0,sensit:0,sorri:0,specif:0,those:0,under:0,string:0,fals:0,mechan:0,jack:0,veri:0,list:0,pleas:0,prevent:0,past:0,second:0,pass:0,download:0,further:0,fullnam:0,click:0,even:0,index:0,what:0,hide:0,section:0,current:0,version:[],"new":0,net:0,method:0,widget:0,gener:0,here:0,bodi:0,valu:0,box:0,convert:0,convers:0,mysit:0,ajax:0,fetch:0,implement:0,via:0,extra:0,solut:0,prefer:0,put:0,href:0,succesfulli:0,auto_list_room:0,instal:0,from:0,zip:0,commun:0,doubl:0,two:0,websit:0,stylesheet:0,call:0,recommend:0,type:0,until:0,tightli:0,more:0,yahoo:0,site:0,must:0,room:0,setup:[],work:0,xhr:0,can:0,lc_messag:0,purpos:0,root:0,blogpost:0,control:0,quickstart:0,share:0,templat:0,tag:0,proprietari:0,explor:0,onlin:0,occup:0,end:0,goal:0,snippet:0,how:0,sid:0,instead:0,css:0,updat:0,npm:0,regener:0,product:0,resourc:0,after:0,usabl:0,befor:0,callback:0,underscor:0,data:0,demonstr:0,man:0,practic:0,bind:0,show_controlbox_by_default:0,element:0,inform:0,order:0,chatbox:0,xmpp:0,over:0,through:0,streamlin:0,write:0,jid:0,directli:0,fit:0,pend:0,hidden:0,therefor:0,might:0,them:0,anim:0,"return":0,thei:0,initi:0,front:0,now:0,introduct:0,name:0,edit:0,authent:0,token:0,ejabberd:0,each:0,side:0,mean:0,domain:0,individu:0,realli:0,legwork:0,connect:0,happen:0,extract:0,special:0,variabl:0,shown:0,space:0,open:0,content:0,rel:0,internet:0,plural:0,factori:0,po2json:0,proxi:0,insid:0,standard:0,standalon:0,reason:0,ask:0,org:0,afterward:0,could:0,keep:0,yui:0,first:0,origin:0,softwar:0,render:0,onc:0,hoop:0,lastnam:0,number:0,yourself:0,restrict:0,alreadi:0,done:0,owner:0,jabber:0,differ:0,script:0,top:0,messag:0,attach:0,attack:0,jed:0,luckili:0,option:0,tool:0,specifi:0,compressor:0,part:0,exactli:0,than:0,serv:0,jump:0,kind:0,bloat:0,provid:0,remov:0,exampl:0,jqueri:0,reus:0,toward:[],browser:0,pre:0,sai:[],saa:0,modern:0,ani:0,packag:0,have:0,tabl:0,need:0,moffitt:0,django:0,bosh_service_url:0,prebind:0,min:0,latter:0,note:0,also:0,without:0,build:0,which:0,singl:0,sure:0,roster:0,track:0,object:0,most:0,deploi:0,homepag:0,"class":0,don:0,url:0,request:0,face:0,runtim:0,xdomainrequest:0,show:0,german:0,text:0,session:0,fine:0,find:0,onli:0,locat:0,firstnam:0,configur:0,apach:0,should:0,folder:0,local:0,meant:0,get:0,opkod:0,cannot:0,deploy:0,requir:0,enabl:0,emb:0,"public":0,reload:0,integr:0,contain:0,where:0,set:0,stroph:0,see:0,close:0,statu:0,state:0,bridg:0,between:0,experi:0,hide_muc_serv:0,attribut:0,kei:0,screen:0,javascript:0,conjunct:[],job:0,bosh:0,cor:0,instant:0,shortliv:0,conversej:0,etc:0,grain:0,mani:0,login:0,com:0,load:0,instanti:0,pot:0,backend:0,onconnect:0,rebuild:0,json:0,much:0,besid:0,subscrib:0,msgmerg:0,great:0,minifi:0,togeth:0,i18n:0,present:0,multi:0,main:0,servic:0,plugin:0,defin:0,chat:0,helper:0,demo:0,auto_subscrib:0,non:0,rid:0,develop:0,minim:0,receiv:0,media:0,make:0,minif:0,cross:0,same:0,read:0,html:0,chatroom:0,signon:0,http:0,webserv:0,optim:0,upon:0,hand:0,"50kb":0,user:0,xhr_user_search:0,recent:0,stateless:0,markup:0,person:[],contact:0,command:0,wherebi:0,thi:0,choos:0,usual:0,plural_form:0,protocol:0,just:0,languag:0,web:0,xmlhttprequest:0,had:0,add:0,other:0,non_amd:0,input:0,yuicompressor:0,match:0,take:0,applic:0,format:0,webpag:0,nginx:0,traffic:0,xss:0,like:0,success:0,server:0,benefit:0,necessari:0,either:0,page:0,deal:0,nplural:0,some:0,back:0,librari:0,bottom:0,though:0,overcom:0,refer:0,run:0,host:0,panel:0,src:0,about:0,obj:[],controlbox:0,unfortun:0,act:0,own:0,encod:0,automat:0,wrap:0,your:0,manag:0,log:0,wai:0,transfer:0,support:0,custom:0,avail:0,start:[],includ:0,lot:0,suit:0,"var":0,"function":0,head:0,properli:0,form:0,bundl:0,link:0,translat:0,synonym:0,line:0,inlin:0,"true":0,congratul:0,longer:0,info:0,made:0,locale_data:0,possibl:0,"default":0,below:0,toggl:0,otherwis:0,problem:0,expect:0,featur:0,creat:0,"100kb":[],exist:0,file:0,want:0,when:0,detail:0,gettext:0,field:0,valid:0,rememb:0,test:0,you:0,nice:0,node:0,intend:0,releas:0,stai:0,lang:0,requirej:0,getjson:0,time:0},objtypes:{},titles:["Introduction"],objnames:{},filenames:["index"]}) Search.setIndex({objects:{},terms:{all:0,code:0,partial:0,queri:0,webchat:0,follow:0,middl:0,depend:0,sensit:0,sorri:0,those:0,under:0,string:0,fals:0,mechan:0,jack:0,veri:0,list:0,pleas:0,prevent:0,past:0,second:0,pass:0,download:0,further:0,fullnam:0,click:0,even:0,index:0,what:0,hide:0,section:0,current:0,version:0,"new":0,net:0,"public":0,widget:0,gener:0,here:0,bodi:0,let:0,valu:0,box:0,convert:0,convers:0,mysit:0,reason:0,fetch:0,implement:0,via:0,extra:0,apach:0,prefer:0,ask:0,href:0,org:0,auto_list_room:0,instal:0,from:0,zip:0,commun:0,doubl:0,two:0,websit:0,stylesheet:0,call:0,recommend:0,type:0,until:0,tightli:0,more:0,yahoo:0,site:0,must:0,room:0,setup:[],work:0,xhr:0,can:0,lc_messag:0,purpos:0,root:0,blogpost:0,control:0,quickstart:0,share:0,templat:0,tag:0,proprietari:0,explor:0,onlin:0,occup:0,end:0,goal:0,write:0,how:0,sid:0,instead:0,css:0,updat:0,npm:0,regener:0,product:0,resourc:0,after:0,usabl:0,befor:0,callback:0,underscor:0,data:0,demonstr:0,man:0,practic:0,bind:0,show_controlbox_by_default:0,django:0,caus:0,inform:0,media:0,order:0,chatbox:0,xmpp:0,over:0,becaus:0,through:0,streamlin:0,snippet:0,jid:0,directli:0,fit:0,pend:0,hidden:0,therefor:0,might:0,them:0,anim:0,"return":0,thei:0,initi:0,front:0,now:0,introduct:0,name:0,edit:0,authent:0,token:0,ejabberd:0,each:0,side:0,mean:0,domain:0,individu:0,realli:0,legwork:0,connect:0,happen:0,extract:0,special:0,variabl:0,shown:0,"3rd":0,space:0,open:0,content:0,rel:0,internet:0,plural:0,factori:0,po2json:0,proxi:0,insid:0,standard:0,standalon:0,ajax:0,put:0,succesfulli:0,afterward:0,could:0,success:0,keep:0,yui:0,turn:0,first:0,origin:0,softwar:0,render:0,onc:0,hoop:0,lastnam:0,number:0,yourself:0,restrict:0,alreadi:0,done:0,owner:0,jabber:0,differ:0,script:0,top:0,messag:0,attach:0,attack:0,jed:0,luckili:0,option:0,tool:0,specifi:0,compressor:0,part:0,bower:0,grunt:0,than:0,serv:0,jump:0,kind:0,bloat:0,provid:0,remov:0,exampl:0,jqueri:[],bridg:0,toward:[],browser:0,pre:0,sai:[],saa:0,modern:0,ani:0,packag:0,have:0,tabl:0,need:0,moffitt:0,element:0,bosh_service_url:0,prebind:0,min:0,latter:0,note:0,also:0,without:0,build:0,which:0,singl:0,sure:0,roster:0,track:0,object:0,most:0,deploi:0,homepag:0,"class":0,don:0,url:0,request:0,face:0,runtim:0,pars:0,usual:0,xdomainrequest:0,show:0,german:0,text:0,session:0,fine:0,find:0,onli:0,exactli:0,locat:0,just:0,configur:0,solut:0,should:0,folder:0,local:0,meant:0,get:0,opkod:0,cannot:0,deploy:0,requir:0,enabl:0,emb:0,method:0,reload:0,integr:0,contain:0,where:0,set:0,stroph:0,see:0,close:0,statu:0,state:0,reus:0,between:0,experi:0,hide_muc_serv:0,attribut:0,kei:0,screen:0,javascript:0,conjunct:[],job:0,bosh:0,cor:0,instant:0,shortliv:0,conversej:0,etc:0,grain:0,mani:0,login:0,com:0,load:0,instanti:0,pot:0,backend:0,creat:0,rebuild:0,compon:0,json:0,much:0,besid:0,subscrib:0,msgmerg:0,great:0,minifi:0,togeth:0,i18n:0,present:0,multi:0,main:0,servic:0,plugin:0,defin:0,file:0,helper:0,demo:0,auto_subscrib:0,non:0,rid:0,develop:0,minim:0,receiv:0,parti:0,make:0,minif:0,cross:0,same:0,webpag:0,html:0,chatroom:0,signon:0,http:0,webserv:0,optim:0,upon:0,hand:0,"50kb":0,user:0,xhr_user_search:0,recent:0,stateless:0,markup:0,person:[],contact:0,command:0,wherebi:0,thi:0,choos:0,latest:0,plural_form:0,protocol:0,firstnam:0,languag:0,web:0,xmlhttprequest:0,had:0,add:0,valid:0,non_amd:0,input:0,yuicompressor:0,match:0,take:0,applic:0,format:0,read:0,amd:0,nginx:0,traffic:0,xss:0,like:0,specif:0,server:0,benefit:0,necessari:0,either:0,page:0,deal:0,nplural:0,some:0,back:0,librari:0,bottom:0,though:0,overcom:0,refer:0,run:0,host:0,panel:0,src:0,about:0,obj:[],controlbox:0,unfortun:0,act:0,own:0,encod:0,automat:0,wrap:0,your:0,manag:0,log:0,wai:0,transfer:0,support:0,custom:0,avail:0,start:[],includ:0,lot:0,suit:0,"var":0,"function":0,head:0,properli:0,form:0,bundl:0,link:0,translat:0,synonym:0,line:0,inlin:0,"true":0,congratul:0,requirej:0,info:0,made:0,locale_data:0,possibl:0,"default":0,asynchron:0,below:0,toggl:0,otherwis:0,problem:0,expect:0,featur:0,onconnect:0,"100kb":[],exist:0,chat:0,want:0,when:0,detail:0,gettext:0,field:0,other:0,rememb:0,test:0,you:0,nice:0,node:0,intend:0,releas:0,stai:0,lang:0,longer:0,directori:0,getjson:0,time:0},objtypes:{},titles:["Quickstart (to get a demo up and running)"],objnames:{},filenames:["index"]})
\ No newline at end of file \ No newline at end of file
docs/source/conf.py
View file @ 4a3f38e5
...@@ -48,9 +48,9 @@ copyright = u'2013, JC Brand' ...@@ -48,9 +48,9 @@ copyright = u'2013, JC Brand'
# built documents. # built documents.
# #
# The short X.Y version. # The short X.Y version.
version = '0.3' version = '0.5'
# The full version, including alpha/beta/rc tags. # The full version, including alpha/beta/rc tags.
release = '0.3' release = '0.5'
# The language for content autogenerated by Sphinx. Refer to documentation # The language for content autogenerated by Sphinx. Refer to documentation
# for a list of supported languages. # for a list of supported languages.
......
docs/source/index.rst
View file @ 4a3f38e5
...@@ -10,6 +10,60 @@ ...@@ -10,6 +10,60 @@
:depth: 3 :depth: 3
:local: :local:
=========================================
Quickstart (to get a demo up and running)
=========================================
When you download a specific release of *Converse.js* there will be two minified files inside the zip file.
* converse.min.js
* converse.min.css
You can include these two files inside the *<head>* element of your website via the *script* and *link*
tags:
::
<link rel="stylesheet" type="text/css" media="screen" href="converse.min.css">
<script src="converse.min.js"></script>
Then, at the bottom of your page, after the closing *</body>* element, put the
following inline Javascript code:
::
require(['converse'], function (converse) {
converse.initialize({
auto_list_rooms: false,
auto_subscribe: false,
bosh_service_url: 'https://bind.opkode.im', // 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,
xhr_user_search: false
});
});
The *index.html* file inside the Converse.js folder serves as a nice usable
example of this.
These minified files provide the same demo-like functionality as is available
on the `conversejs.org`_ website. Useful for testing or demoing, but not very
practical.
You'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.
For more info on this, read: `Pre-binding and Single Session Support`_.
You might also want to have more fine-grained control of what gets included in
the minified Javascript file. Read `Configuration`_ and `Minification`_ for more info on how to do
that.
============ ============
Introduction Introduction
============ ============
...@@ -36,6 +90,7 @@ code. ...@@ -36,6 +90,7 @@ code.
The `What you will need`_ section has more information on all these The `What you will need`_ section has more information on all these
requirements. requirements.
================== ==================
What you will need What you will need
================== ==================
...@@ -151,85 +206,63 @@ In the callback function, you call *converse.onConnected* together with the ...@@ -151,85 +206,63 @@ In the callback function, you call *converse.onConnected* together with the
connection object. connection object.
========================================= ===========
Quickstart (to get a demo up and running) Development
========================================= ===========
When you download a specific release of *Converse.js* there will be two minified files inside the zip file.
* converse.min.js
* converse.min.css
You can include these two files inside the *<head>* element of your website via the *script* and *link* Install Node.js and development dependencies
tags: ============================================
:: We use development tools (`Grunt <http://gruntjs.com>`_ and `Bower <http://bower.io>`_)
which depend on Node.js and npm (the Node package manager).
<link rel="stylesheet" type="text/css" media="screen" href="converse.min.css"> If you don't have Node.js installed, you can download and install the latest
<script src="converse.min.js"></script> version `here <https://nodejs.org/download>`_.
Then, at the bottom of your page, after the closing *</body>* element, put the Once you have Node.js installed, run the following command in the Converse.js
following inline Javascript code: directory:
:: ::
require(['converse'], function (converse) { npm install
converse.initialize({
auto_list_rooms: false,
auto_subscribe: false,
bosh_service_url: 'https://bind.opkode.im', // 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,
xhr_user_search: false
});
});
The *index.html* file inside the Converse.js folder serves as a nice usable
example of this.
These minified files provide the same demo-like functionality as is available
on the `conversejs.org`_ website. Useful for testing or demoing, but not very
practical.
You'll most likely want to implement some kind of single-signon solution for Install 3rd party dependencies
your website, where users authenticate once in your website and then stay ==============================
logged into their XMPP session upon page reload.
For more info on this, read: `Pre-binding and Single Session Support`_. Now that we have Grunt and Bower, you can install and configure Converse's
3rd party dependencies with the following command:
You might also want to have more fine-grained control of what gets included in ::
the minified Javascript file. Read `Configuration`_ and `Minification`_ for more info on how to do
that.
=========== grunt build
Development
===========
With AMD and require.js (recommended) With AMD and require.js (recommended)
------------------------------------- =====================================
Converse.js uses `require.js`_ to track and load dependencies. Converse.js uses `require.js`_ to asynchronously load dependencies.
If you want to develop or customize converse.js, you'll want to load the If you want to develop or customize converse.js, you'll want to load the
non-minified javascript files. non-minified javascript files.
Add the following two lines to the *<head>* section of your webpage. Add the following two lines to the *<head>* section of your webpage:
:: ::
<link rel="stylesheet" type="text/css" media="screen" href="converse.css"> <link rel="stylesheet" type="text/css" media="screen" href="converse.css">
<script data-main="main" src="Libraries/require-jquery.js"></script> <script data-main="main" src="components/requirejs/require.js"></script>
require.js will then let the main.js file be parsed (because of the *data-main*
attribute on the *script* tag), which will in turn cause converse.js to be
parsed.
Without AMD and require.js Without AMD and require.js
-------------------------- ==========================
Converse.js can also be used without require.js. If you for some reason prefer Converse.js can also be used without require.js. If you for some reason prefer
to use it this way, please refer to *non_amd.html* for an example of how and in to use it this way, please refer to
what order all the Javascript files that converse.js depends on need to be `non_amd.html <https://github.com/jcbrand/converse.js/blob/master/non_amd.html>`_
loaded. for an example of how and in what order all the Javascript files that converse.js
depends on need to be loaded.
============= =============
...@@ -290,7 +323,7 @@ bosh_service_url ...@@ -290,7 +323,7 @@ bosh_service_url
Connections to an XMPP server depend on a BOSH connection manager which acts as Connections to an XMPP server depend on a BOSH connection manager which acts as
a middle man between HTTP and XMPP. a middle man between HTTP and XMPP.
See `here`_ for more information. See `here <http://metajack.im/2008/09/08/which-bosh-server-do-you-need>`_ for more information.
fullname fullname
-------- --------
...@@ -505,7 +538,6 @@ those hoops you had to jump through. ...@@ -505,7 +538,6 @@ those hoops you had to jump through.
.. _`conversejs.org`: http://conversejs.org .. _`conversejs.org`: http://conversejs.org
.. _`require.js`: http://requirejs.org .. _`require.js`: http://requirejs.org
.. _`read more about require.js's optimizer here`: http://requirejs.org/docs/optimization.html .. _`read more about require.js's optimizer here`: http://requirejs.org/docs/optimization.html
.. _`here`: http://metajack.im/2008/09/08/which-bosh-server-do-you-need/l
.. _`HTTP`: https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol .. _`HTTP`: https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
.. _`XMPP`: https://en.wikipedia.org/wiki/Xmpp .. _`XMPP`: https://en.wikipedia.org/wiki/Xmpp
.. _`Converse.js homepage`: http://conversejs.org .. _`Converse.js homepage`: http://conversejs.org
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7