Ionic XMPP chat Client using Strophe.js: Part 3

Now lets start building our very own chat client. Please make you have gone through my previous articles. If you are new to Ionic Cordova, please look into my introductory post.

Now let us start building the main screens.You can download my complete project here :

Donwload

If there is any trouble understanding the concepts please read my other articles on XMPP:

XMPP BASICS : part 1

XMPP chat in Ionic Cordova (Setting chat server in local host): Part 2

Strophe.js :

We are using Strophe.js , an opensource XMPP client library for javascript.

Inorder for Strophe.js to run  we also need to use jquery

  • Download Strophe.js
  • Include Strophe files in the lib folder
  • Now download jQuery.  Save it to a jquery folder in your lib.
    4
  • Include the Strophe.js and  jquery-1.12.3.min.js  in your index.html.

Login :

5

HTML CODE:

LOGIN CONTROLLER :

SERVICES : (SharedConn)

CHATS : [ i.e. Contacts or Rosters ]

2 13

This is the next page that comes after successful login. Here we can see all our contacts, and we can start a conversation by clicking on there icons.

HTML:

CHATS CONTROLLER :

CHATS SERVICE:

CHAT DETAILS:

4

Chat details is the page where users can chat with other client

HTML :

For CSS styling please refer to my git hub download link.

CONTROLLER:

SERVICE:

Basically this hold the shared variables like to_jabber_id