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

At first, install Lodash and Validator packages, run the following command:
$ npm install lodash validator --save

Read more http://blog.alphaplus.vn/2017/09/build-simple-blog-with-nodejs-express-mongodb-part-6.html


The error message will be:

and the success message will be:
(Alice receives the message when Clara joined because they are in the same room #mom)

To do this, we add the id to the form, add div tag to show the error message, change the button type to submit, and add jQuery.

Add the following to index.html (before closing body tag):

<!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" id="frm-join"><h2 class="text-center">Please Join</h2><div id="join-error-msg" class="alert alert-danger hidden" role="alert"></div><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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="/socket.io/socket.io.js"></script> <script>var socket=io();socket.on('newMessage',function(message){console.log(message);});var selectedRoom;$(function(){$('#frm-join').on('submit',function(e){e.preventDefault();selectedRoom=$('#sl-room option:selected').val();console.log('Selected room:',selectedRoom);socket.emit('join',{room:selectedRoom,display_name:$('#txt-display-name').val()},function(err){if(err){$('#join-error-msg').removeClass('hidden');$('#join-error-msg').text(err);}});});});</script> </body></html>

and to server.js

var express=require('express');const path=require('path');const http=require('http');const socketIO=require('socket.io');const _=require('lodash');const validator=require('validator');const port=process.env.PORT||3000;var app=express();app.use(express.static(path.join(__dirname,'./public')));var server=http.createServer(app);var io=socketIO(server);io.on('connection',(socket)=>{console.log('New user connected');socket.on('join',(params,callback)=>{var isRoomValid=_.isString(params.room)&&validator.isIn(params.room,['mom','kids','sell_off']);var isDisplaynameValid=_.isString(params.display_name)&&!validator.isEmpty(params.display_name.trim())&&validator.isAlpha(params.display_name)&&validator.isLength(params.display_name,{min:3,max:15});if(!isRoomValid){return callback('Please choose a room from dropdown list.');} if(!isDisplaynameValid){return callback('Please enter a valid display name (3-15 alphabetic characters).');} socket.join(params.room);io.to(params.room).emit('newMessage',`${params.display_name}has joined.`);callback();});});server.listen(port);

In part 3, we will integrate with HTML to display as the screenshot:

See you then!

3 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer Node js Training in Chennai . learn from or Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai

    ReplyDelete
  2. Such a great blog and all the writings. Can’t help thinking about the author.
    Base Chat Number

    ReplyDelete