Web Chatting, angularjs + Websocket + Openfire Vs angularjs + node.js

Question

Now, I have to add a service for real time chat in my web application (Angularjs + Spring REST + mybatic). I would like to know which way is better for our development.

1. angularjs + Websocket + Openfire
2. angularjs + node.js

Is there another way to develop livechat.

Answer 1

You may use Openfire server(XMPP Server) + JSXC as web client app .

Download and install openfire server from https://www.igniterealtime.org/projects/openfire/

JSXC uses Strophe JavaScript Library so enable BOSH inside your openfire server through admin panel of open fire. Generally it is on port 9090 so your admin panel will open at localhost:9090

JSXC web client has all the basic functionality inbuilt such as Roster, chat windows, messaging, file transfer, video calling, online statuses, settings, OTR encryption and much more. See image below:

Include these files into your web app master page / layout page:

1. "/jsxc/build/css/jsxc.css"
2. "/jsxc/build/css/jsxc.webrtc.css"

3. "/jsxc/example/css/example.css"

4. "/jsxc/build/lib/jquery.colorbox-min.js"

5. "/jsxc/build/lib/jquery.slimscroll.js"
6. "/jsxc/build/lib/jquery.fullscreen.js"
7. "/jsxc/build/lib/jsxc.dep.js"
8. "/jsxc/build/jsxc.js"
9. "/jsxc/example/js/main.js"

Once you include JSXC library into your web app, it will look like this.

The file you need to configure is "jsxc\\example\\js\\main.js"

Below I have shared the configuration that I have done in my web project:

$(function() {
   var settings = {
      xmpp: {
         url: 'http://'+OPENFIRE_DOMAIN+':7070/http-bind/',
         domain: OPENFIRE_DOMAIN,
         resource: 'example',
         overwrite: true,
         onlogin: true
      }
   };

   jsxc.init({
      logoutElement: $('#logout'),
      numberOfMsg:1000,
      onlineHelp: 'mailto:support@ilook.com',
      timeout:3000,
      busytimeout: 15000,
      notification: true,
      defaultLang: 'en',
      checkFlash: false,
      rosterAppend: 'body',
      root: '/' + PROJECT_NAME + 'jsxc/build/',
      displayRosterMinimized: function() {
         return false;
      },
      // otr: {
      //    debug: false,
      //    SEND_WHITESPACE_TAG: true,
      //    WHITESPACE_START_AKE: true
      // },
      loadSettings: function(username, password, cb) {
         cb(settings);
      },
      xmpp: {
         url: settings.xmpp.url

      }
   });

function jsxcLogout()
{
   jsxc.xmpp.logout;
}

Answer 2

You can use Strophe JavaScript Library to implement live chat. This library has both option to connect 1) Web-socket and 2) Bosh

Web-socket connection generally supported by only few browsers such as Google Chrome but not by Mozilla Firefox. So best way is to connect with BOSH.

This library has great documentation also. So it becomes
AngularJs(for design view)
+
Strophe (middle-ware to connect server)
+
Openfire (XMPP Server)