If you Google around with keywords like “Realtime chat with Express”, the one library that will definitely come up most often is socket.io. It is a GREAT library no doubt. However, if you check the tutorials, you will almost always find that they are giving a simplified version of using it. What I mean is that all their server side logic (viz. bootstrapping express, adding routing and sockets) is contained inside a single file. Again, that per se is perfectly ok for a tutorial, but when you try to extrapolate these teachings in your own workflow and/or a running code base, you might face certain small but irksome implementation hiccups. At least I did! I did manage to sort them out eventually (thanks to the collective wisdom that Google bestows upon us), but it still felt kinda hackish and unclean.
So, when one of the ongoing projects that the firm I’m associated with needed a simple realtime communication module, I set out to look for an alternative. Luckily, it turned out that such a solution does exists. Its a beautiful little library called Faye which is a “publish-subscribe messaging system based on the Bayeux protocol”. We will not go much into the subtle differences between socket.io and faye/bayeux (there are technical differences, though cosmetically they may seem similar) in this post, but will rather put the latter to good use and build a simple little realtime chat interface, which would be minimally invasive on a standard Express app.
Server Side
To begin with, we’ll scaffold an Express app using the official Express Application Generator. I assume you already have it installed globally via npm.
express real-time-chat-example –ejs
cd real-time-chat-example
npm install
We’ll be using EJS as our templating engine here. That’s only because EJS is the one I personally use; other engines should work perfectly fine as well.
Now let’s just have Faye join the fray:
npm install –save faye
Next, we add our code to bootstrap Faye, and what better place to do so than where all the Express bootstrapping happens, the entry point of your Express app, the bin/www file!
var app = require('../app');
var debug = require('debug')('faye-express:server');
var http = require('http');
var faye = require('faye');
var bayeux = new faye.NodeAdapter({mount: '/faye', timeout: 45});
var server = http.createServer(app);
bayeux.attach(server);
That’s it! You can now run the express app as usual: ./bin/www and visit http://localhost:3000 to see the familiar Welcome to Express page. The only difference here with a stock express app is that Faye has quietly started a central message server mounted at the path /faye on localhost.
Now all we need is a client or two to use the message server.
Client Side
The Welcome to Express message you see comes from the views/index.ejs file which is rendered when you visit the / route of your app. This is where we’ll add our Faye client. We’ll modify the file, starting with the <head> part:
<head>
<title><%= title %></title>
<link rel=‘stylesheet’ href=‘/stylesheets/style.css’ /> <script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script> <script type=“text/javascript” src=“http://localhost:3000/faye/client.js”></script> <script type=“text/javascript” src=“javascripts/script.js”></script> </head>
jQuery (we’ll need it for rudimentary DOM manipulations) has been included from a CDN.
We’d have expected to add the Faye client lib from some CDN as well, but Faye is so nice that it offers its client.js file at a convenient location relative to your app’s root url (http://localhost:3000) as soon as you’ve set it up on the server!
The public/javascripts/script.js file (which we need to create) shall contain our custom JS code.
Now, we’ll add some more html to the to constitute our rather spartan chat UI. If you need some spice, simply add your CSS in the public/stylesheets/style.css file.
<body>
<form>
<input type=“text” id=“new-message” placeholder=“Your Message Here” />
<input type=“submit” id=“submit-btn” value=“Enter” />
</form>
<h4>Messages:</h4>
<ul id=“messages-list”>
</ul> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://logic-square.com/wp-content/litespeed/js/67ec84c2158c50e560e9081338a9dd49.js?ver=717fb"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
Before writing the actual client-side code, we should perhaps make a brief mention here about PubSub, because that’s the paradigm Faye/Bayeux is using.
In this model, we have Clients which can Publish and/or Subscribe to Channels. Whenever one client publishes to a channel, all client-subscribers currently listening to that channel will be informed, in real time, of that publication, and they can act accordingly. The role of the message server here is that of a Broker who manages the entire process transparently & behind the scenes, invisible for all practical purposes to the clients. It gives the impression that the clients are communicating amongst themselves directly.
Note that Faye/Bayeux which uses this PubSub paradigm is fundamentally different from the various implementations (or emulations) of the standard Sockets Protocol (e.g. sockets.io).
Armed with the above knowledge, its time to add our JS code to the public/javascripts/script.js file. The code should be pretty self-explanatory, esp.if you peruse the comments.
// Create the Faye client.
// (All you need is the mount point for the Faye server you want to connect to)
var client = new Faye.Client(‘http://localhost:3000/faye’)
$(document).ready(function () {
$(“#submit-btn”).click(function (evt) {
evt.preventDefault()
var newMessage = $(“#new-message”).val()
// We PUBLISH our new message to a CHANNEL (/messages)
// which is dynamically “created” *in situ*, if required
client.publish(“/messages”, {
text: newMessage
})
})
// Now we setup the client to SUBSCRIBE (listen in)
// for messages coming into the same CHANNEL (/messages)
// (Note that, the client which publishes the message itself is also subscribed)
client.subscribe(“/messages”, function(newMessage) {
$(“#messages-list”).append(“<li>” + newMessage.text + “</li>”)
})
})
And that’s all! Start the express app using ./bin/www and open up two different browser windows/tabs each pointing to http://localhost:3000. Any message you input in one window will be seen immediately in the other.
So, in just a few lines of simple code, you have a working (albeit rudimentary) realtime chat system going! You can see the complete code at its Github Repo.
Addendum: Saving Chats on the Server
While our realtime chat example works fine (except for the looks obviously), we would really like to save our chat history somewhere on the server. This can be done in two different ways.
The first option is to set up your server side Express routes the usual way. Have a POST route (say, POST /message) whose handler should receive the message content in its req.body and suitably save it to a database using usual code. On the client side, we can simply add an AJAX call to this route with the new message content as its payload. This AJAX call can occur in tandem with our existing code for faye publish. This method would work particularly well if you already have you Express routing system in place, and just need to add real time functionality without changing existing code or workflow.
The other method is to use Faye on the server as well with Server Side Clients. It may sound like an oxymoron, but is extremely simple to implement. Just create a new JS file anywhere on the server, require it inside app.js (or for that matter, you can use the app.js file itself as well), and add the following code in it:
var Faye = require("faye")
var client = new Faye.Client('http://localhost:3000/faye')
client.subscribe('/messages', function (newMessage) {
console.log("New Message: ", newMessage)
});
If the above snippet looks familiar, that’s because it is! Faye’s client code is isomorphic, i.e. same in essence irrespective of whether it appears on the server side or the client side. Also, you can add this code at any suitable place on the server with no friction with your existing codebase.
