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!

No comments:

Post a Comment