HTML5 XMPP Client build in Ionic Cordova : PART 5

This is a follow up of my previous tutorial series on How to build ionic XMPP Chat client. Here we will be integrating chat client with online XMPP servers. We will also cover inband registration. So lets get started.

Free XMPP server used here is  jabberpl.org

Donwload - advanced

OR

Donwload - basic

What New:

  1. Supports remote XMPP server.
  2. In band Registration to remote XMPP server.
  3. Better implementation for Chat Logs.

So lets get started.

Register Page:

register

First of all include strophe.register.js into your strophe’s library folder.

include

Now include this library inside index.html

controller.js –>  registerCtrl

services.js –> SharedConn

register.html

LOGIN

login

To handle login to a remote XMPP server, we need to get the corresponding BOSH_SERVICE_URL and PORT number. We can get the respective url and port number by setting BOSH_URL as https://conversejs.org/http-bind/

login.html

control.js –> loginCtrl

service.js –> sharedConnService

BETTER CHATLOGS:

Earlier we were only taking distinct jabber_id from the from_id column of chats to output in the chat-log. This was ineffective as you cannot get the jabber_id’s from to_id. I have modified the SQL to take distinct values from from_id and to_id.

Now we are ready to go.

Please note that in order to run XMPP client with SQL, you need to use Chrome Web Browser. It supports WebSQL and your messages are stored in the Browsers local webSQL database.

You can also download my XMPP client without SQL to test it on other browser.

Please follow me on GitHub to get the latest updates.