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.
In this session, I will talk on how to install the OpenFire chat server on your PC.
- Download OpenFire . [ Please download the .exe ]
- Run OpenFire from the desktop.
- When you click start the openfire server starts. Now Launch Admin.
- Here you have to configure the settings for XMPP chat server .
- Language Settings
- Server Settings. ( Set up your server domain . Basically the registered users will get the id as user@server_domain )
- Database Settings (Choose Embedded Database as it is easy to setup )
- Profile Settings (Choose Default )
- Administrator Account (setup your admin profile) and finally setup the server.
Now to add new users into your XMPP server.
- 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
- Download the git project
- Open index.html using notepad
- Replace the bosh_service_url to http://127.0.0.1:7070/http-bind/
bosh_service_url: 'http://127.0.0.1:7070/http-bind/', // Only update the bosh_service_url
//Bosh service url for edjabberd is "http://localhost:5222/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.
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)