Home»Coding»Node»Chat
Node/socket.io Chat with Express Server
There are many tutorials of creating chat using node/socket.io package. However, all of them should be modified if we want to use chat as a part of anther extensive node project based on standard express with templates server. The purpose of this note is not step-by-step tutorial but to show how to incorporate socket.io chat into express with minimal modification of express scheme.
Creating new express project using express-generator is straitforward:
$ express --ejs myapp
$ cd myapp
$ npm install
Here we have choosed ejs engine for templates. For automatic reloading of the express it is convenuent to install nodemon package
$ nodemon bin/www
and start your project in separate terminal. The express-generator produces standard file structure
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views
create : myapp/views/index.ejs
create : myapp/views/layout.ejs
create : myapp/views/error.ejs
create : myapp/bin
create : myapp/bin/www
To add websocket support we intend to change several files: app.js - main application code, bin/www - web server, routes/users.js - io awared server middleware, package.json -list of required packages, and create a new file views/userchat.ejs - io-client script. At first socket.io package and, optionally, ejsLayout packages should be installed.
$ npm install express-ejs-layouts --save
Option "--save" adds the package to the package list of the application.
Installed packages should be included into js application file by standard way like in the code shown below. One can apply two approaches to enable io-socket support. First one is to enable io support for all pages at once. It is marked as global io-server. The second case allows to use io-socket only for some pages. It seems to be more preferable and is default one. Necessary changes for first case are given in the code file.
The web server file, bin/www, is also slightly different for global and local io-servers since for global case the web server was defined in app.js.
The websocket server script is located in the file routes/users.js, which has been io-enabled by line 21 in app.js. Here the basic server actions such as adduser, sendchat, switchRoom, and disconnect are defined between "// *******" lines.
New variable "unique" defined in line 3 is used to prevent multiple connection with the same socket - bug of socket.io.
..............
if ( socket.id == unique ) {
console.log("dammed connection " );
} else {
unique = socket.id ;
..............
}
If socket exists the server does nothing but for new connection with new socket it provides all socket actions.
The last part is the client script provided by views/userchat.ejs.
If everything is good in the result you will be able to see in your browser http://your_server_ip:3000/users something like that shown in the picture below.
