How do I integrate chat with nodejs and xmpp into my existing web application?

Question

I have read a lot of questions relating this, but none of them are satisfying.

Existing App

A minimalist social network implemented using Expressjs as an API.Using MySql as DB.socket.io for notifications and ember.js as a frontend framework.

What I want to integrate

I want to implements only a few features of XMPP such as

• Peer 2 Peer Messaging
• Presence and Last Seen
• Group Chat
• Read Receipts

A basic idea I got from reading similar questions.

1. Need a client library (Strophe.js,Converse.js)
2. Need a XMPP server (ejabberd,Openfire,Prosody)

Questions

1. How do I integrate chat here ?
2. How do I authenticate XMPP users (FYI, I have JWT Authentication implemented currently) ?
3. Suggestions on using redis(pub/sub) with socket.io or mqtt pub/sub for implementing the chat.Is it scalable ? / What about performance ?

What I asked might be too broad.But still don't have any idea on using which set technologies to use.

Answer 1

For learning purpose you can achieve all things using ejabberd+converse.js Below steps will setup environment in ubuntu

1. setup ejabberd by following https://www.digitalocean.com/community/tutorials/how-to-install-ejabberd-xmpp-server-on-ubuntu

2. create a host binding by editing /etc/hosts file in ubuntu

   127.0.1.2       talk.rajesh6115.local
   

3. install apache2 using

   sudo apt-get update
   sudo apt-get install apache2
   

4. setup a virtual host for bosh (XEP-0206) in your apache like below /etc/apache2/sites-available/talk.rajesh6115.local.conf

   <VirtualHost *:80>
       ServerName talk.rajesh6115.local
       ServerAlias www.talk.rajesh6115.local
       ServerAdmin [email protected]
       DocumentRoot /var/www/talk.rajesh6115.local
       ErrorLog ${APACHE_LOG_DIR}/error.log
       CustomLog ${APACHE_LOG_DIR}/access.log combined
       ProxyPass /http-bind http://talk.rajesh6115.local:5280/http-bind/
       ProxyPassReverse /http-bind http://talk.rajesh6115.local:5280/http-bind/
   </VirtualHost>
   

5. now you can configure converse js to point to your bosh service, then your communications starts

NOTE:

setup a virtual host in ejabberd by adding a line like below

    hosts:
      - "talk.rajesh6115.local"

setup a admin login. using this login you can create user.

  admin:
     user:
         - "admin": "talk.rajesh6115.local"

6. for make conversejs talk with xmpp server only one thing you have to give that is bosh serivce url. for more details https://conversejs.org/docs/html/development.html#initialize

7.finally how to integrate with web application?

Method1 (simple): use same logins for webapp and xmpp means [email protected] can be a email address also a valid jid

Method2: Use a authentication server which will return both jid and password after successful authentication, then start your xmpp session using provided credential.