Skip to content

C
converse.js
Commit 7d3eaaa1 authored by JC Brand's avatar JC Brand
Browse files
Options

Add more info on prebinding/session support

parent 3ff38ff3
Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 11 deletions
docs/html/_sources/index.txt
View file @ 7d3eaaa1
......@@ -108,6 +108,42 @@ but this will require custom code on your server.
Jack Moffitt has a great `blogpost`_ about this and even provides an `example Django application`_ to demonstrate it.
When you authenticate to the XMPP server on your backend, you'll receive two
tokens, RID (request ID) and SID (session ID).
These tokens then need to be passed back to the javascript running in your
browser, where you will need them attach to the existing session.
You can embed the RID and SID tokens in your HTML markup or you can do an
XMLHttpRequest call to you server and ask it to return them for you.
Below is one example of how this could work. An Ajax call is made to the
relative URL **/prebind** and it expects to receive JSON data back.
::
$.getJSON('/prebind', function (data) {
var connection = new Strophe.Connection(converse.bosh_service_url);
connection.attach(data.jid, data.sid, data.rid, function (status) {
if ((status === Strophe.Status.ATTACHED) || (status === Strophe.Status.CONNECTED)) {
converse.onConnected(connection)
}
});
}
);
**Here's what's happening:**
The JSON data contains the user's JID (jabber ID), RID and SID. The URL to the
BOSH connection manager is already set as a configuration setting on the
*converse* object (see ./main.js), so we can reuse it from there.
A new Strophe.Connection object is instantiated and then *attach* is called with
the user's JID, the necessary tokens and a callback function.
In the callback function, you call *converse.onConnected* together with the
connection object.
=========================================
Quickstart (to get a demo up and running)
......@@ -246,6 +282,20 @@ have to write a Javascript snippet to attach to the set up connection::
The backend must authenticate for you, and then return a SID (session ID) and
RID (Request ID), which you use when you attach to the connection.
show_controlbox_by_default
--------------------------
Default = False
The "controlbox" refers to the special chatbox containing your contacts roster,
status widget, chatrooms and other controls.
By default this box is hidden and can be toggled by clicking on any element in
the page with class *toggle-online-users*.
If this options is set to true, the controlbox will by default be shown upon
page load.
xhr_user_search
---------------
......
docs/html/index.html
View file @ 7d3eaaa1
......@@ -88,17 +88,18 @@
<li><a class="reference internal" href="#fullname" id="id15">fullname</a></li>
<li><a class="reference internal" href="#hide-muc-server" id="id16">hide_muc_server</a></li>
<li><a class="reference internal" href="#prebind" id="id17">prebind</a></li>
<li><a class="reference internal" href="#xhr-user-search" id="id18">xhr_user_search</a></li>
<li><a class="reference internal" href="#show-controlbox-by-default" id="id18">show_controlbox_by_default</a></li>
<li><a class="reference internal" href="#xhr-user-search" id="id19">xhr_user_search</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="reference internal" href="#minification" id="id19">Minification</a><ul>
<li><a class="reference internal" href="#minifying-javascript" id="id20">Minifying Javascript</a></li>
<li><a class="reference internal" href="#minifying-css" id="id21">Minifying CSS</a></li>
<li><a class="reference internal" href="#minification" id="id20">Minification</a><ul>
<li><a class="reference internal" href="#minifying-javascript" id="id21">Minifying Javascript</a></li>
<li><a class="reference internal" href="#minifying-css" id="id22">Minifying CSS</a></li>
</ul>
</li>
<li><a class="reference internal" href="#translations" id="id22">Translations</a></li>
<li><a class="reference internal" href="#translations" id="id23">Translations</a></li>
</ul>
</div>
<div class="section" id="introduction">
......@@ -172,6 +173,32 @@ website. This will remove the need for any cross-domain XHR support.</p>
authenticated in your website will also automatically be logged in on the chat server,
but this will require custom code on your server.</p>
<p>Jack Moffitt has a great <a class="reference external" href="http://metajack.im/2008/10/03/getting-attached-to-strophe">blogpost</a> about this and even provides an <a class="reference external" href="https://github.com/metajack/strophejs/tree/master/examples/attach">example Django application</a> to demonstrate it.</p>
<p>When you authenticate to the XMPP server on your backend, you&#8217;ll receive two
tokens, RID (request ID) and SID (session ID).</p>
<p>These tokens then need to be passed back to the javascript running in your
browser, where you will need them attach to the existing session.</p>
<p>You can embed the RID and SID tokens in your HTML markup or you can do an
XMLHttpRequest call to you server and ask it to return them for you.</p>
<p>Below is one example of how this could work. An Ajax call is made to the
relative URL <strong>/prebind</strong> and it expects to receive JSON data back.</p>
<div class="highlight-python"><pre>$.getJSON('/prebind', function (data) {
var connection = new Strophe.Connection(converse.bosh_service_url);
connection.attach(data.jid, data.sid, data.rid, function (status) {
if ((status === Strophe.Status.ATTACHED) || (status === Strophe.Status.CONNECTED)) {
converse.onConnected(connection)
}
});
}
);</pre>
</div>
<p><strong>Here&#8217;s what&#8217;s happening:</strong></p>
<p>The JSON data contains the user&#8217;s JID (jabber ID), RID and SID. The URL to the
BOSH connection manager is already set as a configuration setting on the
<em>converse</em> object (see ./main.js), so we can reuse it from there.</p>
<p>A new Strophe.Connection object is instantiated and then <em>attach</em> is called with
the user&#8217;s JID, the necessary tokens and a callback function.</p>
<p>In the callback function, you call <em>converse.onConnected</em> together with the
connection object.</p>
</div>
</div>
</div>
......@@ -275,8 +302,18 @@ have to write a Javascript snippet to attach to the set up connection:</p>
<p>The backend must authenticate for you, and then return a SID (session ID) and
RID (Request ID), which you use when you attach to the connection.</p>
</div>
<div class="section" id="show-controlbox-by-default">
<h3><a class="toc-backref" href="#id18">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>The &#8220;controlbox&#8221; refers to the special chatbox containing your contacts roster,
status widget, chatrooms and other controls.</p>
<p>By default this box is hidden and can be toggled by clicking on any element in
the page with class <em>toggle-online-users</em>.</p>
<p>If this options is set to true, the controlbox will by default be shown upon
page load.</p>
</div>
<div class="section" id="xhr-user-search">
<h3><a class="toc-backref" href="#id18">xhr_user_search</a><a class="headerlink" href="#xhr-user-search" title="Permalink to this headline"></a></h3>
<h3><a class="toc-backref" href="#id19">xhr_user_search</a><a class="headerlink" href="#xhr-user-search" title="Permalink to this headline"></a></h3>
<p>Default = False</p>
<p>There are two ways to add users.</p>
<ul class="simple">
......@@ -289,9 +326,9 @@ be used.</p>
</div>
</div>
<div class="section" id="minification">
<h1><a class="toc-backref" href="#id19">Minification</a><a class="headerlink" href="#minification" title="Permalink to this headline"></a></h1>
<h1><a class="toc-backref" href="#id20">Minification</a><a class="headerlink" href="#minification" title="Permalink to this headline"></a></h1>
<div class="section" id="minifying-javascript">
<h2><a class="toc-backref" href="#id20">Minifying Javascript</a><a class="headerlink" href="#minifying-javascript" title="Permalink to this headline"></a></h2>
<h2><a class="toc-backref" href="#id21">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
to bundle them together in a single minified file fit for deployment to a
production site.</p>
......@@ -307,14 +344,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>
</div>
<div class="section" id="minifying-css">
<h2><a class="toc-backref" href="#id21">Minifying CSS</a><a class="headerlink" href="#minifying-css" title="Permalink to this headline"></a></h2>
<h2><a class="toc-backref" href="#id22">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>
<div class="highlight-python"><pre>yui-compressor --type=css converse.css -o converse.min.css</pre>
</div>
</div>
</div>
<div class="section" id="translations">
<h1><a class="toc-backref" href="#id22">Translations</a><a class="headerlink" href="#translations" title="Permalink to this headline"></a></h1>
<h1><a class="toc-backref" href="#id23">Translations</a><a class="headerlink" href="#translations" title="Permalink to this headline"></a></h1>
<p>The gettext POT file located in ./locale/converse.pot is the template
containing all translations and from which for each language an individual PO
file is generated.</p>
......
docs/html/searchindex.js
View file @ 7d3eaaa1
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,even:0,index:0,what:0,hide:0,section:0,current:0,version:0,"new":0,net:0,"public":0,gener:0,here:0,valu:0,box:0,convert:0,convers:0,mysit:0,implement:0,via:0,extra:0,apach:0,releas: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,must:0,room:0,setup:[],xhr:0,can:0,lc_messag:0,purpos:0,root:0,fetch:0,control:0,quickstart:0,share:0,templat:0,tag:0,proprietari:0,explor: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,underscor:0,data:0,demonstr:0,man:0,practic:0,bind:0,django:0,inform:0,order:0,xmpp:0,over:0,through:0,streamlin:0,snippet:0,jid:0,directli:0,fit:0,pend: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,ejabberd:0,each:0,side:0,mean:0,domain:0,individu:0,realli:0,legwork:0,connect:0,extract:0,variabl:0,open:0,content:0,rel:0,internet:0,plural:0,factori:0,po2json:0,proxi:0,insid:0,standard:0,standalon:0,put:0,succesfulli:0,blogpost: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,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,provid:0,remov:0,bridg:0,toward:[],browser:0,sai:0,saa:0,modern:0,ani:0,packag:0,have:0,tabl:0,need:0,moffitt:0,bosh_service_url:0,prebind:0,min:0,latter:0,note:0,also:0,exampl:0,build:0,which:0,singl:0,sure:0,though:0,track:0,object:0,most:0,deploi:0,homepag: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,just:0,configur:0,solut:0,should:0,folder:0,local:0,meant:0,get:0,opkod:0,cannot:0,requir:0,enabl:0,method:0,reload:0,integr:0,contain:0,where:0,set:0,stroph:0,see:0,close:0,state:0,between:0,experi:0,hide_muc_serv:0,attribut:0,kei:0,screen:0,javascript:0,job:0,bosh:0,cor:0,instant:0,shortliv:0,conversej:0,etc:0,grain:0,mani:0,login:0,com:0,load:0,pot:0,backend:0,creat:0,json:0,much:0,besid:0,subscrib:0,msgmerg:0,great:0,minifi:0,togeth:0,i18n:0,present:0,multi:0,servic:0,plugin:0,defin:0,file:0,helper:0,demo:0,auto_subscrib:0,site:0,rid:0,minim:0,media:0,make:0,minif:0,cross:0,same:0,html:0,signon:0,http:0,webserv:0,optim:0,upon:0,hand:0,user:0,xhr_user_search:0,recent:0,stateless:0,person:[],contact:0,command:0,wherebi:0,thi:0,choos:0,usual:0,plural_form:0,protocol:0,firstnam:0,languag:0,web:0,xmlhttprequest:0,had:0,add:0,valid:0,input:0,yuicompressor:0,match:0,applic:0,format:0,read:0,nginx:0,traffic:0,like:0,xss:0,success:0,specif:0,server:0,benefit:0,either:0,page:0,deal:0,nplural:0,some:0,back:0,librari:0,deploy:0,overcom:0,refer:0,run:0,host:0,panel:0,src:0,about:0,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,"function":0,properli:0,form:0,bundl:0,link:0,translat:0,synonym:0,"true":0,congratul:0,requirej:0,info:0,made:0,locale_data:0,possibl:0,"default":0,below:0,otherwis:0,problem:0,expect:0,featur:0,onconnect:0,exist:0,chat:0,want:0,when:0,detail:0,gettext:0,field:0,other:0,test:0,you:0,nice:0,node:0,stai:0,lang:0,longer:0},objtypes:{},titles:["Introduction"],objnames:{},filenames:["index"]})
\ No newline at end of file
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,valu:0,box:0,convert:0,convers:0,mysit:0,fetch:0,implement:0,via:0,extra:0,apach: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,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,inform:0,order:0,chatbox:0,xmpp:0,over: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,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,could:0,success: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,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,provid:0,remov:0,bridg:0,toward:[],browser:0,sai:0,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,contact: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,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,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,site:0,rid:0,minim:0,receiv:0,media:0,make:0,minif:0,cross:0,same:0,html:0,chatroom:0,signon:0,http:0,webserv:0,optim:0,upon:0,hand:0,user:0,xhr_user_search:0,recent:0,stateless:0,markup:0,person:[],exampl:0,command:0,wherebi:0,thi:0,choos:0,usual:0,plural_form:0,protocol:0,firstnam:0,languag:0,web:0,xmlhttprequest:0,had:0,add:0,valid:0,input:0,yuicompressor:0,match:0,applic:0,format:0,read: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,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,properli:0,form:0,bundl:0,link:0,translat:0,synonym:0,"true":0,congratul:0,requirej:0,info:0,made:0,locale_data:0,possibl:0,"default":0,below:0,toggl:0,otherwis:0,problem:0,expect:0,featur:0,onconnect:0,exist:0,chat:0,want:0,when:0,detail:0,gettext:0,field:0,other:0,test:0,you:0,nice:0,node:0,releas:0,stai:0,lang:0,longer:0,getjson:0},objtypes:{},titles:["Introduction"],objnames:{},filenames:["index"]})
\ No newline at end of file
docs/source/index.rst
View file @ 7d3eaaa1
......@@ -108,6 +108,42 @@ but this will require custom code on your server.
Jack Moffitt has a great `blogpost`_ about this and even provides an `example Django application`_ to demonstrate it.
When you authenticate to the XMPP server on your backend, you'll receive two
tokens, RID (request ID) and SID (session ID).
These tokens then need to be passed back to the javascript running in your
browser, where you will need them attach to the existing session.
You can embed the RID and SID tokens in your HTML markup or you can do an
XMLHttpRequest call to you server and ask it to return them for you.
Below is one example of how this could work. An Ajax call is made to the
relative URL **/prebind** and it expects to receive JSON data back.
::
$.getJSON('/prebind', function (data) {
var connection = new Strophe.Connection(converse.bosh_service_url);
connection.attach(data.jid, data.sid, data.rid, function (status) {
if ((status === Strophe.Status.ATTACHED) || (status === Strophe.Status.CONNECTED)) {
converse.onConnected(connection)
}
});
}
);
**Here's what's happening:**
The JSON data contains the user's JID (jabber ID), RID and SID. The URL to the
BOSH connection manager is already set as a configuration setting on the
*converse* object (see ./main.js), so we can reuse it from there.
A new Strophe.Connection object is instantiated and then *attach* is called with
the user's JID, the necessary tokens and a callback function.
In the callback function, you call *converse.onConnected* together with the
connection object.
=========================================
Quickstart (to get a demo up and running)
......
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