converse.js with openfire

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

This is a complete tutorial series on how to build an XMPP chat client in Ionic Cordova. As this is a hybrid platform you can easily port this application to Android, IOS and windows. This app can even runs on your browser. So lets get into it.

We basically need a server and a client. Here for

Server : we have used an open-source XMPP chat server called  OpenFire  to set up , chat server in our localhost.

Client :  we are build this in ionic cordova using Strophe.js library (XMPP chat client library in javascript ).

In this session, I will talk on how to install the OpenFire chat server on your PC.

Steps:

  1. Download OpenFire .  [ Please download the .exe ]
  2. Run OpenFire from the desktop.
  3. When you click start the openfire server starts. Now Launch Admin.
  4. Here you have to configure the settings for XMPP chat server .
  5. Language Settings
    openFire languages
  6. Server Settings. ( Set up your server domain . Basically the registered users will get the id as user@server_domain )
    2
  7. Database Settings  (Choose Embedded Database as it is easy to setup )
    3
  8. Profile Settings (Choose Default )
    4
  9. Administrator Account (setup your admin profile) and finally setup the server.
    6

Now to add new users into your XMPP server.
openfire_add_user

  • Click the Users/Groups tab.
  • Click Create New User.
  • Enter the Account Information.

That’s it. Now you have a working XMPP chat server.

You can now test it using converse.js

  1. Download the git project
  2. Open index.html using notepad
  3. Replace the bosh_service_url to http://127.0.0.1:7070/http-bind/

4. Open index.html in two web browsers.

5. Login to 1st client using user1 credentials.

6. Login to 2nd client using user2 credentials.

7. Now  Add Contact user2 from user1 and finally test your chat server.

converse.js with openfire

converse.js with openfire

That’s it for servers. Now you need to setup the client.

Make sure you read my tutorial series on how to make an XMPP client in Ionic Cordova (Hybrid Platform)

XMPP BASICS : part 1

Ionic XMPP chat Client using Strophe.js: Part 3