Build a simple chat room with Node.js, Socket.IO and Express (part 1)

At first, we need to install Node.js, Express, nodemon.
Then we create a chat-room application (same as create a blog application).
Read more http://blog.alphaplus.vn/2017/08/build-simple-blog-with-nodejs-express-mongodb-part-1.html

In this tutorial, we use Socket.IO package https://www.npmjs.com/package/socket.io.
Socket.IO enables real-time bidirectional event-based communication. It consists in:

  • a Node.js server (this repository)
  • a Javascript client library for the browser (or a Node.js client)

Run the following command to install:
$ npm install socket.io --save

We also use http and path packages. Run the following command to install:
$ npm install path http --save

We will build a web application with two screens:

One to join the room:

and one to chat:

Let's build the simple HTML code for these screens or use the following:


HTML
index.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Join</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div class="join-wrapper"> <form class="form-horizontal"> <h2 class="text-center">Please Join</h2> <div class="form-group"> <label for="txt-display-name" class="col-sm-4 control-label">Display name</label> <div class="col-sm-8"> <input type="text" required class="form-control" id="txt-display-name"> </div></div><div class="form-group"> <label for="sl-room" class="col-sm-4 control-label">Room</label> <div class="col-sm-8"> <select class="form-control" id="sl-room"> <option value="mom">Mom</option> <option value="kids">Kids</option> <option value="sell_off">Sell off</option> </select> </div></div><div class="form-group"> <div class="col-sm-offset-4 col-sm-8"> <button type="submit" class="btn btn-primary">Join now</button> </div></div></form> </div></body></html>

chat.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Chat</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div class="page-wrapper"> <div class="container"> <div class="row"> <div class="col-md-9 col-sm-9"> <div class="green-bg"> <div class="title main">#Mom</div><div id="messages"> <div class="item"> <p class="author"> Alice <span class="date">(Sep 4th, 2017 15:00)</span> </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div class="item"> <p class="author"> Barbara <span class="date">(Sep 4th, 2017 15:01)</span> </p><p>Vestibulum gravida sit amet orci vitae tincidunt.</p></div><div class="item"> <p class="author"> Clara <span class="date">(Sep 4th, 2017 15:02)</span> </p><p>Nam sed risus et urna vulputate rhoncus a id nisi.</p></div><div class="item"> <p class="author"> Daisy <span class="date">(Sep 4th, 2017 15:03)</span> </p><p>Nullam massa mi, ultricies et fermentum a, laoreet sed lorem.</p></div><div class="item"> <p class="author"> Elizabeth <span class="date">(Sep 4th, 2017 15:04)</span> </p><p>Ut quis elit sit amet lacus tincidunt maximus sit amet eu massa.</p></div><div class="item"> <p class="author"> Becky <span class="date">(Sep 4th, 2017 15:05)</span> </p><p>Sed sollicitudin convallis tellus, a interdum magna ullamcorper nec.</p></div></div><div id="chat-box"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Send</button> </span> </div></div></div></div><div class="col-md-3 col-sm-3 sidebar"> <div class="green-bg"> <div class="title"> People in chatroom </div><ul class="list-group" id="users"> <li class="list-group-item">Alice</li><li class="list-group-item">Alison</li><li class="list-group-item">Annabelle</li><li class="list-group-item">Barbara</li><li class="list-group-item">Becky</li><li class="list-group-item">Britney</li><li class="list-group-item">Carol</li><li class="list-group-item">Christina</li><li class="list-group-item">Clara</li><li class="list-group-item">Daisy</li><li class="list-group-item">Dorothy</li><li class="list-group-item">Elizabeth</li><li class="list-group-item">Ellen</li><li class="list-group-item">Emily</li></ul> </div></div></div></div></div></body></html>

CSS
style.css
body{background-color: #eee;}.join-wrapper{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 320px; background: #fefefe; padding: 15px; border-radius: 5px; box-shadow: 6px 6px 5px #888888;}.page-wrapper{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.page-wrapper ul{margin-bottom: 0;}.page-wrapper .title{color: #31708f; padding: 10px 15px; margin: 0; font-weight: 600; font-size: 24px;}.page-wrapper .title.main{text-align: center; color: #fff; background-color: #337ab7; border: 1px solid #337ab7; text-transform: uppercase;}.page-wrapper .green-bg{background-color: #d9edf7; border: 1px solid #ddd;}.page-wrapper #messages{height: 316px; overflow: scroll; background: #fff; color: #000; padding: 15px;}.page-wrapper #messages .item{padding-bottom: 15px;}.page-wrapper #messages .item p{margin-bottom: 0; font-size: 15px; word-wrap: break-word;}.page-wrapper #messages .item .author{font-weight: 600;}.page-wrapper #messages .item .author .date{font-size: 11px; font-style: italic; color: #898989; font-weight: 400;}.page-wrapper .sidebar #users{height: 350px; overflow-y: scroll;}

You can use this website to unminify JS, CSS, HTML http://unminify.com/

After the connection has been opened, we use "emit" method to send and "on" method to listen.

For example when the connection has been opened, the server send (emit method) the message "Hello!":

and the client listen (on method), then write log to console:

The result on the browser:



"on" and "emit" methods can be used on both client and server.



That's it for today.

Part 2: http://blog.alphaplus.vn/2017/09/build-simple-chat-room-with-nodejs-socketio-and-express-part-2.html
See you then!

No comments:

Post a Comment