Commit 4a3f38e5 authored by JC Brand's avatar JC Brand

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

parent 716ecc1b
# 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
...@@ -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
......
...@@ -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>
......
This diff is collapsed.
# 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
{"]; {"];
......
...@@ -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>
......
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
...@@ -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.
......
...@@ -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