development.rst 36 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112
  1. .. raw:: html
  2. <div id="banner"><a href="https://github.com/jcbrand/converse.js/blob/master/docs/source/development.rst">Edit me on GitHub</a></div>
  3. .. _development:
  4. ===========
  5. Development
  6. ===========
  7. .. contents:: Table of Contents
  8. :depth: 2
  9. :local:
  10. If you want to work with the non-minified Javascript and CSS files you'll soon
  11. notice that there are references to a missing *components* folder. Please
  12. follow the instructions below to create this folder and fetch Converse's
  13. 3rd-party dependencies.
  14. .. note::
  15. Windows environment: We recommend installing the required tools using `Chocolatey <https://chocolatey.org/>`_
  16. You will need Node.js (nodejs.install), Git (git.install) and optionally to build using Makefile, GNU Make (make)
  17. If you have trouble setting up a development environment on Windows,
  18. please read `this post <http://librelist.com/browser//conversejs/2014/11/5/openfire-converse-and-visual-studio-questions/#b28387e7f8f126693b11598a8acbe810>`_
  19. in the mailing list.:
  20. Install the development and front-end dependencies
  21. ==================================================
  22. We use development tools (`Grunt <http://gruntjs.com>`_ and `Bower <http://bower.io>`_)
  23. which depend on Node.js and npm (the Node package manager).
  24. If you don't have Node.js installed, you can download and install the latest
  25. version `here <https://nodejs.org/download>`_.
  26. Also make sure you have ``Git`` installed. `Details <http://git-scm.com/book/en/Getting-Started-Installing-Git>`_.
  27. .. note::
  28. Windows users should use Chocolatey as recommended above.:
  29. .. note::
  30. Debian & Ubuntu users : apt-get install git npm nodejs-legacy
  31. Once you have *Node.js* and *git* installed, run the following command inside the Converse.js
  32. directory:
  33. ::
  34. make dev
  35. On Windows you need to specify Makefile.win to be used by running: ::
  36. make -f Makefile.win dev
  37. Or alternatively, if you don't have GNU Make:
  38. ::
  39. npm install
  40. bower update
  41. This will first install the Node.js development tools (like Grunt and Bower)
  42. and then use Bower to install all of Converse.js's front-end dependencies.
  43. The front-end dependencies are those javascript files on which
  44. Converse.js directly depends and which will be loaded in the browser.
  45. If you are curious to know what the different dependencies are:
  46. * Development dependencies:
  47. Take a look at whats under the *devDependencies* key in
  48. `package.json <https://github.com/jcbrand/converse.js/blob/master/package.json>`_.
  49. * Front-end dependencies:
  50. See *dependencies* in
  51. `bower.json <https://github.com/jcbrand/converse.js/blob/master/bower.json>`_.
  52. .. note::
  53. After running ```make dev```, you should now have a new directory *components*,
  54. which contains all the front-end dependencies of Converse.js.
  55. If this directory does NOT exist, something must have gone wrong.
  56. Double-check the output of ```make dev``` to see if there are any errors
  57. listed. For support, you can write to the mailing list: conversejs@librelist.com
  58. With AMD and require.js (recommended)
  59. =====================================
  60. Converse.js uses `require.js <http://requirejs.org>`_ to asynchronously load dependencies.
  61. If you want to develop or customize converse.js, you'll want to load the
  62. non-minified javascript files.
  63. Add the following two lines to the *<head>* section of your webpage:
  64. .. code-block:: html
  65. <link rel="stylesheet" type="text/css" media="screen" href="converse.css">
  66. <script data-main="main" src="components/requirejs/require.js"></script>
  67. require.js will then let the main.js file be parsed (because of the *data-main*
  68. attribute on the *script* tag), which will in turn cause converse.js to be
  69. parsed.
  70. Without AMD and require.js
  71. ==========================
  72. Converse.js can also be used without require.js. If you for some reason prefer
  73. to use it this way, please refer to
  74. `non_amd.html <https://github.com/jcbrand/converse.js/blob/master/non_amd.html>`_
  75. for an example of how and in what order all the Javascript files that converse.js
  76. depends on need to be loaded.
  77. Before submitting a pull request
  78. ================================
  79. Please follow the usual github workflow. Create your own local fork of this repository,
  80. make your changes and then submit a pull request.
  81. Before submitting a pull request
  82. --------------------------------
  83. Please read the `style guide </docs/html/style_guide.html>`_ and make sure that your code follows it.
  84. Add tests for your bugfix or feature
  85. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  86. Add a test for any bug fixed or feature added. We use Jasmine
  87. for testing.
  88. Take a look at `tests.html <https://github.com/jcbrand/converse.js/blob/master/tests.html>`_
  89. and the `spec files <https://github.com/jcbrand/converse.js/blob/master/tests.html>`_
  90. to see how tests are implemented.
  91. Check that the tests pass
  92. ~~~~~~~~~~~~~~~~~~~~~~~~~
  93. Check that all tests complete sucessfully.
  94. Run ``make check`` in your terminal or open `tests.html <https://github.com/jcbrand/converse.js/blob/master/tests.html>`_
  95. in your browser.
  96. Developer API
  97. =============
  98. .. note:: The API documented here is available in Converse.js 0.8.4 and higher.
  99. Earlier versions of Converse.js might have different API methods or none at all.
  100. In the Converse.js API, you traverse towards a logical grouping, from
  101. which you can then call certain standardised accessors and mutators, such as::
  102. .get
  103. .set
  104. .add
  105. .remove
  106. This is done to increase readability and to allow intuitive method chaining.
  107. For example, to get a contact, you would do the following::
  108. converse.contacts.get('jid@example.com');
  109. To get multiple contacts, just pass in an array of jids::
  110. converse.contacts.get(['jid1@example.com', 'jid2@example.com']);
  111. To get all contacts, simply call ``get`` without any jids::
  112. converse.contacts.get();
  113. **Here follows now a breakdown of all API groupings and methods**:
  114. initialize
  115. ----------
  116. .. note:: This method is the one exception of a method which is not logically grouped
  117. as explained above.
  118. Initializes converse.js. This method must always be called when using
  119. converse.js.
  120. The `initialize` method takes a map (also called a hash or dictionary) of
  121. :ref:`configuration-variables`.
  122. Example:
  123. .. code-block:: javascript
  124. converse.initialize({
  125. allow_otr: true,
  126. auto_list_rooms: false,
  127. auto_subscribe: false,
  128. bosh_service_url: 'https://bind.example.com',
  129. hide_muc_server: false,
  130. i18n: locales['en'],
  131. keepalive: true,
  132. play_sounds: true,
  133. prebind: false,
  134. show_controlbox_by_default: true,
  135. debug: false,
  136. roster_groups: true
  137. });
  138. send
  139. ----
  140. Allows you to send XML stanzas.
  141. For example, to send a message stanza:
  142. .. code-block:: javascript
  143. var msg = converse.env.$msg({
  144. from: 'juliet@example.com/balcony',
  145. to:'romeo@example.net',
  146. type:'chat'
  147. });
  148. converse.send(msg);
  149. The "archive" grouping
  150. ----------------------
  151. Converse.js supports the *Message Archive Management*
  152. (`XEP-0313 <https://xmpp.org/extensions/xep-0313.html>`_) protocol,
  153. through which it is able to query an XMPP server for archived messages.
  154. See also the **message_archiving** option in the :ref:`configuration-variables` section, which you'll usually
  155. want to in conjunction with this API.
  156. query
  157. ~~~~~
  158. The ``query`` method is used to query for archived messages.
  159. It accepts the following optional parameters:
  160. * **options** an object containing the query parameters. Valid query parameters
  161. are ``with``, ``start``, ``end``, ``first``, ``last``, ``after``, ``before``, ``index`` and ``count``.
  162. * **callback** is the callback method that will be called when all the messages
  163. have been received.
  164. * **errback** is the callback method to be called when an error is returned by
  165. the XMPP server, for example when it doesn't support message archiving.
  166. Examples
  167. ^^^^^^^^
  168. **Requesting all archived messages**
  169. The simplest query that can be made is to simply not pass in any parameters.
  170. Such a query will return all archived messages for the current user.
  171. Generally, you'll however always want to pass in a callback method, to receive
  172. the returned messages.
  173. .. code-block:: javascript
  174. var errback = function (iq) {
  175. // The query was not successful, perhaps inform the user?
  176. // The IQ stanza returned by the XMPP server is passed in, so that you
  177. // may inspect it and determine what the problem was.
  178. }
  179. var callback = function (messages) {
  180. // Do something with the messages, like showing them in your webpage.
  181. }
  182. converse.archive.query(callback, errback))
  183. **Waiting until server support has been determined**
  184. The query method will only work if converse.js has been able to determine that
  185. the server supports MAM queries, otherwise the following error will be raised:
  186. - *This server does not support XEP-0313, Message Archive Management*
  187. The very first time converse.js loads in a browser tab, if you call the query
  188. API too quickly, the above error might appear because service discovery has not
  189. yet been completed.
  190. To work solve this problem, you can first listen for the ``serviceDiscovered`` event,
  191. through which you can be informed once support for MAM has been determined.
  192. For example:
  193. .. code-block:: javascript
  194. converse.listen.on('serviceDiscovered', function (event, feature) {
  195. if (feature.get('var') === converse.env.Strophe.NS.MAM) {
  196. converse.archive.query()
  197. }
  198. });
  199. **Requesting all archived messages for a particular contact or room**
  200. To query for messages sent between the current user and another user or room,
  201. the query options need to contain the the JID (Jabber ID) of the user or
  202. room under the ``with`` key.
  203. .. code-block:: javascript
  204. // For a particular user
  205. converse.archive.query({'with': 'john@doe.net'}, callback, errback);)
  206. // For a particular room
  207. converse.archive.query({'with': 'discuss@conference.doglovers.net'}, callback, errback);)
  208. **Requesting all archived messages before or after a certain date**
  209. The ``start`` and ``end`` parameters are used to query for messages
  210. within a certain timeframe. The passed in date values may either be ISO8601
  211. formatted date strings, or Javascript Date objects.
  212. .. code-block:: javascript
  213. var options = {
  214. 'with': 'john@doe.net',
  215. 'start': '2010-06-07T00:00:00Z',
  216. 'end': '2010-07-07T13:23:54Z'
  217. };
  218. converse.archive.query(options, callback, errback);
  219. **Limiting the amount of messages returned**
  220. The amount of returned messages may be limited with the ``max`` parameter.
  221. By default, the messages are returned from oldest to newest.
  222. .. code-block:: javascript
  223. // Return maximum 10 archived messages
  224. converse.archive.query({'with': 'john@doe.net', 'max':10}, callback, errback);
  225. **Paging forwards through a set of archived messages**
  226. When limiting the amount of messages returned per query, you might want to
  227. repeatedly make a further query to fetch the next batch of messages.
  228. To simplify this usecase for you, the callback method receives not only an array
  229. with the returned archived messages, but also a special RSM (*Result Set
  230. Management*) object which contains the query parameters you passed in, as well
  231. as two utility methods ``next``, and ``previous``.
  232. When you call one of these utility methods on the returned RSM object, and then
  233. pass the result into a new query, you'll receive the next or previous batch of
  234. archived messages. Please note, when calling these methods, pass in an integer
  235. to limit your results.
  236. .. code-block:: javascript
  237. var callback = function (messages, rsm) {
  238. // Do something with the messages, like showing them in your webpage.
  239. // ...
  240. // You can now use the returned "rsm" object, to fetch the next batch of messages:
  241. converse.archive.query(rsm.next(10), callback, errback))
  242. }
  243. converse.archive.query({'with': 'john@doe.net', 'max':10}, callback, errback);
  244. **Paging backwards through a set of archived messages**
  245. To page backwards through the archive, you need to know the UID of the message
  246. which you'd like to page backwards from and then pass that as value for the
  247. ``before`` parameter. If you simply want to page backwards from the most recent
  248. message, pass in the ``before`` parameter with an empty string value ``''``.
  249. .. code-block:: javascript
  250. converse.archive.query({'before': '', 'max':5}, function (message, rsm) {
  251. // Do something with the messages, like showing them in your webpage.
  252. // ...
  253. // You can now use the returned "rsm" object, to fetch the previous batch of messages:
  254. rsm.previous(5); // Call previous method, to update the object's parameters,
  255. // passing in a limit value of 5.
  256. // Now we query again, to get the previous batch.
  257. converse.archive.query(rsm, callback, errback);
  258. }
  259. The "connection" grouping
  260. -------------------------
  261. This grouping collects API functions related to the XMPP connection.
  262. connected
  263. ~~~~~~~~~
  264. A boolean attribute (i.e. not a callable) which is set to `true` or `false` depending
  265. on whether there is an established connection.
  266. disconnect
  267. ~~~~~~~~~~
  268. Terminates the connection.
  269. The "user" grouping
  270. -------------------
  271. This grouping collects API functions related to the current logged in user.
  272. login
  273. ~~~~~
  274. Logs the user in. This method can accept a map with the credentials, like this:
  275. .. code-block:: javascript
  276. converse.user.login({
  277. 'jid': 'dummy@example.com',
  278. 'password': 'secret'
  279. });
  280. or it can be called without any parameters, in which case converse.js will try
  281. to log the user in by calling the `prebind_url` or `credentials_url` depending
  282. on whether prebinding is used or not.
  283. logout
  284. ~~~~~~
  285. Log the user out of the current XMPP session.
  286. .. code-block:: javascript
  287. converse.user.logout();
  288. The "status" sub-grouping
  289. ~~~~~~~~~~~~~~~~~~~~~~~~~
  290. Set and get the user's chat status, also called their *availability*.
  291. get
  292. ^^^
  293. Return the current user's availability status:
  294. .. code-block:: javascript
  295. converse.user.status.get(); // Returns for example "dnd"
  296. set
  297. ^^^
  298. The user's status can be set to one of the following values:
  299. * **away**
  300. * **dnd**
  301. * **offline**
  302. * **online**
  303. * **unavailable**
  304. * **xa**
  305. For example:
  306. .. code-block:: javascript
  307. converse.user.status.set('dnd');
  308. Because the user's availability is often set together with a custom status
  309. message, this method also allows you to pass in a status message as a
  310. second parameter:
  311. .. code-block:: javascript
  312. converse.user.status.set('dnd', 'In a meeting');
  313. The "message" sub-grouping
  314. ^^^^^^^^^^^^^^^^^^^^^^^^^^
  315. The ``user.status.message`` sub-grouping exposes methods for setting and
  316. retrieving the user's custom status message.
  317. .. code-block:: javascript
  318. converse.user.status.message.set('In a meeting');
  319. converse.user.status.message.get(); // Returns "In a meeting"
  320. The "contacts" grouping
  321. -----------------------
  322. get
  323. ~~~
  324. This method is used to retrieve roster contacts.
  325. To get a single roster contact, call the method with the contact's JID (Jabber ID):
  326. .. code-block:: javascript
  327. converse.contacts.get('buddy@example.com')
  328. To get multiple contacts, pass in an array of JIDs:
  329. .. code-block:: javascript
  330. converse.contacts.get(['buddy1@example.com', 'buddy2@example.com'])
  331. To return all contacts, simply call ``get`` without any parameters:
  332. .. code-block:: javascript
  333. converse.contacts.get()
  334. The returned roster contact objects have these attributes:
  335. +----------------+-----------------------------------------------------------------------------------------------------------------+
  336. | Attribute | |
  337. +================+=================================================================================================================+
  338. | ask | If ask === 'subscribe', then we have asked this person to be our chat buddy. |
  339. +----------------+-----------------------------------------------------------------------------------------------------------------+
  340. | fullname | The person's full name. |
  341. +----------------+-----------------------------------------------------------------------------------------------------------------+
  342. | jid | The person's Jabber/XMPP username. |
  343. +----------------+-----------------------------------------------------------------------------------------------------------------+
  344. | requesting | If true, then this person is asking to be our chat buddy. |
  345. +----------------+-----------------------------------------------------------------------------------------------------------------+
  346. | subscription | The subscription state between the current user and this chat buddy. Can be `none`, `to`, `from` or `both`. |
  347. +----------------+-----------------------------------------------------------------------------------------------------------------+
  348. | id | A unique id, same as the jid. |
  349. +----------------+-----------------------------------------------------------------------------------------------------------------+
  350. | chat_status | The person's chat status. Can be `online`, `offline`, `busy`, `xa` (extended away) or `away`. |
  351. +----------------+-----------------------------------------------------------------------------------------------------------------+
  352. | user_id | The user id part of the JID (the part before the `@`). |
  353. +----------------+-----------------------------------------------------------------------------------------------------------------+
  354. | resources | The known resources for this chat buddy. Each resource denotes a separate and connected chat client. |
  355. +----------------+-----------------------------------------------------------------------------------------------------------------+
  356. | groups | The roster groups in which this chat buddy was placed. |
  357. +----------------+-----------------------------------------------------------------------------------------------------------------+
  358. | status | Their human readable custom status message. |
  359. +----------------+-----------------------------------------------------------------------------------------------------------------+
  360. | image_type | The image's file type. |
  361. +----------------+-----------------------------------------------------------------------------------------------------------------+
  362. | image | The Base64 encoded image data. |
  363. +----------------+-----------------------------------------------------------------------------------------------------------------+
  364. | url | The buddy's website URL, as specified in their VCard data. |
  365. +----------------+-----------------------------------------------------------------------------------------------------------------+
  366. | vcard_updated | When last the buddy's VCard was updated. |
  367. +----------------+-----------------------------------------------------------------------------------------------------------------+
  368. add
  369. ~~~
  370. Add a contact.
  371. Provide the JID of the contact you want to add:
  372. .. code-block:: javascript
  373. converse.contacts.add('buddy@example.com')
  374. You may also provide the fullname. If not present, we use the jid as fullname:
  375. .. code-block:: javascript
  376. converse.contacts.add('buddy@example.com', 'Buddy')
  377. The "chats" grouping
  378. --------------------
  379. get
  380. ~~~
  381. Returns an object representing a chat box.
  382. To return a single chat box, provide the JID of the contact you're chatting
  383. with in that chat box:
  384. .. code-block:: javascript
  385. converse.chats.get('buddy@example.com')
  386. To return an array of chat boxes, provide an array of JIDs:
  387. .. code-block:: javascript
  388. converse.chats.get(['buddy1@example.com', 'buddy2@example.com'])
  389. To return all open chat boxes, call the method without any JIDs::
  390. converse.chats.get()
  391. open
  392. ~~~~
  393. Opens a chat box and returns an object representing a chat box.
  394. To open a single chat box, provide the JID of the contact:
  395. .. code-block:: javascript
  396. converse.chats.open('buddy@example.com')
  397. To return an array of chat boxes, provide an array of JIDs:
  398. .. code-block:: javascript
  399. converse.chats.open(['buddy1@example.com', 'buddy2@example.com'])
  400. *The returned chat box object contains the following methods:*
  401. +-------------+------------------------------------------+
  402. | Method | Description |
  403. +=============+==========================================+
  404. | endOTR | End an OTR (Off-the-record) session. |
  405. +-------------+------------------------------------------+
  406. | get | Get an attribute (i.e. accessor). |
  407. +-------------+------------------------------------------+
  408. | initiateOTR | Start an OTR (off-the-record) session. |
  409. +-------------+------------------------------------------+
  410. | maximize | Minimize the chat box. |
  411. +-------------+------------------------------------------+
  412. | minimize | Maximize the chat box. |
  413. +-------------+------------------------------------------+
  414. | set | Set an attribute (i.e. mutator). |
  415. +-------------+------------------------------------------+
  416. | close | Close the chat box. |
  417. +-------------+------------------------------------------+
  418. | open | Opens the chat box. |
  419. +-------------+------------------------------------------+
  420. *The get and set methods can be used to retrieve and change the following attributes:*
  421. +-------------+-----------------------------------------------------+
  422. | Attribute | Description |
  423. +=============+=====================================================+
  424. | height | The height of the chat box. |
  425. +-------------+-----------------------------------------------------+
  426. | url | The URL of the chat box heading. |
  427. +-------------+-----------------------------------------------------+
  428. The "rooms" grouping
  429. --------------------
  430. get
  431. ~~~
  432. Returns an object representing a multi user chat box (room).
  433. Similar to chats.get API
  434. open
  435. ~~~~
  436. Opens a multi user chat box and returns an object representing it.
  437. Similar to chats.get API
  438. To open a single multi user chat box, provide the JID of the room:
  439. .. code-block:: javascript
  440. converse.rooms.open('group@muc.example.com')
  441. To return an array of rooms, provide an array of room JIDs:
  442. .. code-block:: javascript
  443. converse.rooms.open(['group1@muc.example.com', 'group2@muc.example.com'])
  444. To setup a custom nickname when joining the room, provide the optional nick argument:
  445. .. code-block:: javascript
  446. converse.rooms.open('group@muc.example.com', 'mycustomnick')
  447. The "settings" grouping
  448. -----------------------
  449. This grouping allows you to get or set the configuration settings of converse.js.
  450. get(key)
  451. ~~~~~~~~
  452. Returns the value of a configuration settings. For example:
  453. .. code-block:: javascript
  454. converse.settings.get("play_sounds"); // default value returned would be false;
  455. set(key, value) or set(object)
  456. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  457. Set one or many configuration settings. For example:
  458. .. code-block:: javascript
  459. converse.settings.set("play_sounds", true);
  460. or :
  461. .. code-block:: javascript
  462. converse.settings.set({
  463. "play_sounds", true,
  464. "hide_offline_users" true
  465. });
  466. Note, this is not an alternative to calling ``converse.initialize``, which still needs
  467. to be called. Generally, you'd use this method after converse.js is already
  468. running and you want to change the configuration on-the-fly.
  469. The "tokens" grouping
  470. ---------------------
  471. get
  472. ~~~
  473. Returns a token, either the RID or SID token depending on what's asked for.
  474. Example:
  475. .. code-block:: javascript
  476. converse.tokens.get('rid')
  477. .. _`listen-grouping`:
  478. The "listen" grouping
  479. ---------------------
  480. Converse.js emits events to which you can subscribe from your own Javascript.
  481. Concerning events, the following methods are available under the "listen"
  482. grouping:
  483. * **on(eventName, callback)**:
  484. Calling the ``on`` method allows you to subscribe to an event.
  485. Every time the event fires, the callback method specified by ``callback`` will be
  486. called.
  487. Parameters:
  488. * ``eventName`` is the event name as a string.
  489. * ``callback`` is the callback method to be called when the event is emitted.
  490. For example:
  491. .. code-block:: javascript
  492. converse.listen.on('message', function (event, messageXML) { ... });
  493. * **once(eventName, callback)**:
  494. Calling the ``once`` method allows you to listen to an event
  495. exactly once.
  496. Parameters:
  497. * ``eventName`` is the event name as a string.
  498. * ``callback`` is the callback method to be called when the event is emitted.
  499. For example:
  500. .. code-block:: javascript
  501. converse.listen.once('message', function (event, messageXML) { ... });
  502. * **not(eventName, callback)**
  503. To stop listening to an event, you can use the ``not`` method.
  504. Parameters:
  505. * ``eventName`` is the event name as a string.
  506. * ``callback`` refers to the function that is to be no longer executed.
  507. For example:
  508. .. code-block:: javascript
  509. converse.listen.not('message', function (event, messageXML) { ... });
  510. Events
  511. ======
  512. .. note:: see also :ref:`listen-grouping` above.
  513. Event Types
  514. -----------
  515. Here are the different events that are emitted:
  516. callButtonClicked
  517. ~~~~~~~~~~~~~~~~~
  518. When a call button (i.e. with class .toggle-call) on a chat box has been clicked.
  519. ``converse.listen.on('callButtonClicked', function (event, connection, model) { ... });``
  520. chatBoxInitialized
  521. ~~~~~~~~~~~~~~~~~~
  522. When a chat box has been initialized. Relevant to converse-chatview.js plugin.
  523. ``converse.listen.on('chatBoxInitialized', function (event, chatbox) { ... });``
  524. chatBoxOpened
  525. ~~~~~~~~~~~~~
  526. When a chat box has been opened. Relevant to converse-chatview.js plugin.
  527. ``converse.listen.on('chatBoxOpened', function (event, chatbox) { ... });``
  528. chatRoomOpened
  529. ~~~~~~~~~~~~~~
  530. When a chat room has been opened. Relevant to converse-chatview.js plugin.
  531. ``converse.listen.on('chatRoomOpened', function (event, chatbox) { ... });``
  532. chatBoxClosed
  533. ~~~~~~~~~~~~~
  534. When a chat box has been closed. Relevant to converse-chatview.js plugin.
  535. ``converse.listen.on('chatBoxClosed', function (event, chatbox) { ... });``
  536. chatBoxFocused
  537. ~~~~~~~~~~~~~~
  538. When the focus has been moved to a chat box. Relevant to converse-chatview.js plugin.
  539. ``converse.listen.on('chatBoxFocused', function (event, chatbox) { ... });``
  540. chatBoxToggled
  541. ~~~~~~~~~~~~~~
  542. When a chat box has been minimized or maximized. Relevant to converse-chatview.js plugin.
  543. ``converse.listen.on('chatBoxToggled', function (event, chatbox) { ... });``
  544. connected
  545. ~~~~~~~~~
  546. After connection has been established and converse.js has got all its ducks in a row.
  547. ``converse.listen.on('connected', function (event) { ... });``
  548. contactRequest
  549. ~~~~~~~~~~~~~~
  550. Someone has requested to subscribe to your presence (i.e. to be your contact).
  551. ``converse.listen.on('contactRequest', function (event, user_data) { ... });``
  552. contactRemoved
  553. ~~~~~~~~~~~~~~
  554. The user has removed a contact.
  555. ``converse.listen.on('contactRemoved', function (event, data) { ... });``
  556. contactStatusChanged
  557. ~~~~~~~~~~~~~~~~~~~~
  558. When a chat buddy's chat status has changed.
  559. ``converse.listen.on('contactStatusChanged', function (event, buddy) { ... });``
  560. contactStatusMessageChanged
  561. ~~~~~~~~~~~~~~~~~~~~~~~~~~~
  562. When a chat buddy's custom status message has changed.
  563. ``converse.listen.on('contactStatusMessageChanged', function (event, data) { ... });``
  564. disconnected
  565. ~~~~~~~~~~~~
  566. After converse.js has disconnected from the XMPP server.
  567. ``converse.listen.on('disconnected', function (event) { ... });``
  568. initialized
  569. ~~~~~~~~~~~
  570. Once converse.js has been initialized.
  571. ``converse.listen.on('initialized', function (event) { ... });``
  572. messageSend
  573. ~~~~~~~~~~~
  574. When a message will be sent out.
  575. ``storage_memoryconverse.listen.on('messageSend', function (event, messageText) { ... });``
  576. noResumeableSession
  577. ~~~~~~~~~~~~~~~~~~~
  578. When keepalive=true but there aren't any stored prebind tokens.
  579. ``converse.listen.on('noResumeableSession', function (event) { ... });``
  580. reconnected
  581. ~~~~~~~~~~~
  582. After the connection has dropped and converse.js has reconnected.
  583. Any Strophe stanza handlers (as registered via `converse.listen.stanza`) will
  584. have to be registered anew.
  585. ``converse.listen.on('reconnected', function (event) { ... });``
  586. roomInviteSent
  587. ~~~~~~~~~~~~~~
  588. After the user has sent out a direct invitation, to a roster contact, asking them to join a room.
  589. ``converse.listen.on('roomInvite', function (event, data) { ... });``
  590. roomInviteReceived
  591. ~~~~~~~~~~~~~~~~~~
  592. After the user has sent out a direct invitation, to a roster contact, asking them to join a room.
  593. ``converse.listen.on('roomInvite', function (event, data) { ... });``
  594. roster
  595. ~~~~~~
  596. When the roster is updated.
  597. ``converse.listen.on('roster', function (event, items) { ... });``
  598. rosterPush
  599. ~~~~~~~~~~
  600. When the roster receives a push event from server. (i.e. New entry in your buddy list)
  601. ``converse.listen.on('rosterPush', function (event, items) { ... });``
  602. statusInitialized
  603. ~~~~~~~~~~~~~~~~~
  604. When own chat status has been initialized.
  605. ``converse.listen.on('statusInitialized', function (event, status) { ... });``
  606. statusChanged
  607. ~~~~~~~~~~~~~
  608. When own chat status has changed.
  609. ``converse.listen.on('statusChanged', function (event, status) { ... });``
  610. statusMessageChanged
  611. ~~~~~~~~~~~~~~~~~~~~
  612. When own custom status message has changed.
  613. ``converse.listen.on('statusMessageChanged', function (event, message) { ... });``
  614. serviceDiscovered
  615. ~~~~~~~~~~~~~~~~~
  616. When converse.js has learned of a service provided by the XMPP server. See XEP-0030.
  617. ``converse.listen.on('serviceDiscovered', function (event, service) { ... });``
  618. Writing a converse.js plugin
  619. ============================
  620. Converse.js exposes a plugin mechanism which allows developers to extend and
  621. override its functionality.
  622. You register a plugin as follows:
  623. .. code-block:: javascript
  624. converse.plugins.add('myplugin', {
  625. // Your plugin code goes in here
  626. });
  627. Security and access to the inner workings
  628. -----------------------------------------
  629. The globally available ``converse`` object, which exposes the API methods, such
  630. as ``initialize`` and ``plugins.add``, is a wrapper that encloses and protects
  631. a sensitive inner object.
  632. This inner object contains all the Backbone models and views, as well as
  633. various other attributes and functions.
  634. Within a plugin, you will have access to this internal
  635. `"closured" <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures>`_
  636. converse object, which is normally not exposed in the global variable scope. The
  637. hiding of this inner object is due to the fact that it contains sensitive information,
  638. such as the user's JID and password (if they logged in manually). You should
  639. therefore make sure NOT to expose this object globally.
  640. An example plugin
  641. -----------------
  642. .. code-block:: javascript
  643. (function (root, factory) {
  644. if (typeof define === 'function' && define.amd) {
  645. // AMD. Register as a module called "myplugin"
  646. define("myplugin", ["converse"], factory);
  647. } else {
  648. // Browser globals. If you're not using a module loader such as require.js,
  649. // then this line below executes. Make sure that your plugin's <script> tag
  650. // appears after the one from converse.js.
  651. factory(converse);
  652. }
  653. }(this, function (converse_api) {
  654. // Commonly used utilities and variables can be found under the "env"
  655. // namespace of converse_api
  656. // Strophe methods for building stanzas
  657. var Strophe = converse_api.env.Strophe,
  658. $iq = converse_api.env.$iq,
  659. $msg = converse_api.env.$msg,
  660. $pres = converse_api.env.$pres,
  661. $build = converse_api.env.$build,
  662. b64_sha1 = converse_api.env.b64_sha1;
  663. // Other frequently used utilities
  664. var $ = converse_api.env.jQuery,
  665. _ = converse_api.env._,
  666. moment = converse_api.env.moment;
  667. // The following line registers your plugin.
  668. converse_api.plugins.add('myplugin', {
  669. initialize: function () {
  670. // Converse.js's plugin mechanism will call the initialize
  671. // method on any plugin (if it exists) as soon as the plugin has
  672. // been loaded.
  673. // Inside this method, you have access to the protected "inner"
  674. // converse object, from which you can get any configuration
  675. // options that the user might have passed in via
  676. // converse.initialize. These values are stored in the
  677. // "user_settings" attribute.
  678. // Let's assume the user might in a custom setting, like so:
  679. // converse.initialize({
  680. // "initialize_message": "My plugin has been initialized"
  681. // });
  682. //
  683. // Then we can alert that message, like so:
  684. alert(this.converse.user_settings.initialize_message);
  685. },
  686. myFunction: function () {
  687. // This is a function which does not override anything in
  688. // converse.js itself, but in which you still have access to
  689. // the protected "inner" converse object.
  690. var converse = this.converse;
  691. // Custom code comes here
  692. // ...
  693. },
  694. overrides: {
  695. // If you want to override some function or a Backbone model or
  696. // view defined inside converse, then you do that under this
  697. // "overrides" namespace.
  698. // For example, the inner protected *converse* object has a
  699. // method "onConnected". You can override that method as follows:
  700. onConnected: function () {
  701. // Overrides the onConnected method in converse.js
  702. // Top-level functions in "overrides" are bound to the
  703. // inner "converse" object.
  704. var converse = this;
  705. // Your custom code comes here.
  706. // ...
  707. // You can access the original function being overridden
  708. // via the _super attribute.
  709. // Make sure to pass on the arguments supplied to this
  710. // function and also to apply the proper "this" object.
  711. this._super.onConnected.apply(this, arguments);
  712. },
  713. XMPPStatus: {
  714. // Override converse.js's XMPPStatus Backbone model so that we can override the
  715. // function that sends out the presence stanza.
  716. sendPresence: function (type, status_message, jid) {
  717. // The "converse" object is available via the _super
  718. // attribute.
  719. var converse = this._super.converse;
  720. // Custom code can come here
  721. // ...
  722. // You can call the original overridden method, by
  723. // accessing it via the _super attribute.
  724. // When calling it, you need to apply the proper
  725. // context as reference by the "this" variable.
  726. this._super.sendPresence.apply(this, arguments);
  727. }
  728. },
  729. }
  730. });
  731. }));