Real Time chatting app using Nodejs, Mysql, AngularJs and Socket.io – Part 3

In the First part, we covered the Login & Registration page and created files required for our Nodejs server. In the second part, created helper.js  file and wrote methods to display chat list,to send messages to unique users  and to get users available to start a new chat.

In this part, we will create our Private Real Time chatting app by using AngularJs.

Looking for Real Time private chatting app using Angular 2, we have that too.

   Download

     Demo

1. Creating Real Time chatting app

1. Creating View:

1. So let's starts by creating home.html in views folder and write the below code. This HTML file takes care of displaying all the component in HomePage.
home.html:

<html ng-app="home">
  <head>
    <title>Real Time Private Chatting : Codershood</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/style.css"> 
	<link rel="stylesheet" href="angularjs-toaster/toaster.min.css" />

  </head>
  <body ng-controller="home">    
	<div class="body">
	  
		<div class="rows">

			<div class="col-md-8 msg-wrapper">

				<!-- 
					Showing person's name who is Chatting with the  users Starts
				-->
				<div class="msg-wrapper-header">
					<div class="chat-user-meta">
				  		<span class="user-name">{{send_to_user_name=='' ? 'Select User to Chat': send_to_user_name}} </span>
					</div>
			  	</div>
			  	<!-- 
					Showing person's name who is Chatting with the  users Ends
				-->
			  	
			  	<div class="msg-wrapper-body">
			  		<!-- 
						Displaying messages to user when users Starts
					-->
					<div class="msg-container" id="msg-container">
				  		<div class="msg-single" ng-repeat="msg_data in msgs"  
							ng-style="{
						  		'float': uid==msg_data.to_id ? 'left' :'right'
							}">
					  		<div class="msg-conatiner">
								<div class="actual-msg">{{msg_data.msg}}</div>
								<span class="msg-meta">{{msg_data.timestamp*1000 | date}}</span>
					  		</div>
				  		</div> 
					</div>
					<!-- 
						Displaying messages to user when users Ends
					-->

					<!-- 
						Message box to send messages Starts
					-->
					<div class="send-container">
				 		<textarea class="form-control send-msg-text" ng-model='send_text' send-typing-notification placeholder="Type your message here" ></textarea>
				  		<h1 class="send-btn" ng-click="send_msg('','','')"><span class="glyphicon glyphicon-send"></span></h1>
					</div>
					<!-- 
						Message box to send messages Ends
					-->				
			  	</div>
			</div>
			
			<div class="col-md-4  list-wrapper">

				<!-- 
					Display Chat list for user starts
				-->	
				<div class="col-md-12 list-wrapper-header">

					<!-- 
						Displaying profile Image
					-->	
					<div class="profile_pic">
						<img class="img-circle" ng-src="{{show_userinfo.data.p_photo}}">
					</div>
					<!-- 
						Link for modal and for Logout starts
					-->	
					<div class="icon-set">
						<a Title="Start New chat" ng-click='get_users_to_chats()' data-toggle="modal" data-target="#myModal">
							<span class="glyphicon glyphicon-plus"></span>
						</a>
						<a Title="Logout" href="/logout">
							<span class="glyphicon glyphicon-off"></span>
						</a>
					</div>
					<!-- 
						Link for modal and for Logout ends
					-->	

					<!-- 
						Showing online status
					-->	
					<div class="user-meta">
						<span class="user-name">{{show_userinfo.data.name}}</span>
						<span class="user-status">{{show_userinfo.data.online=='Y' ? 'Online': 'Offline' }}</span>
					</div>
				</div>

				<!-- 
					Displaying chat list starts
				-->	
				<div class="userlist">

					<!-- 
						Using ng-repeat to show users starts
					-->	
					<div class="userlist-single" ng-repeat="singleuser in userlist"
						ng-click="hightlight_user(singleuser)"
					  	ng-class="(hightlight_id==singleuser.id ? 'hightlight_user_class' :'')"
					  	ng-style="{
							'display': uid==singleuser.id ? 'none' :''
						}">
						<!-- 
							Showing users name, profile Image and online status  
						-->	
						<div class="userlist-user-meta">
							<img class="img-circle" ng-src="{{singleuser.p_photo}}"/>
								<span class="online-user-status"
						  			ng-class="(singleuser.online=='Y' ? 'status-online' :'status-offline')"
								></span>
							<span title="{{singleuser.socketId}}" class="userlist-userName">{{singleuser.name}}</span>
							<!-- 
								Span to show 'Typing indicator'  
							-->	
							<span id="isTyping_{{singleuser.id}}" class="is-typing">is typing...</span>
						</div>				  
					</div>
					<!-- 
						Using ng-repeat to show users ends
					-->	

					<!-- 
						Showing alert when no user avalibale for chat
					-->	
					<div ng-show="userlist.length == 1 && userlist[0].name==show_userinfo.data.name"  >
						<div class="alert alert-danger" >
						  <p class="text-center" >
							Everyone is offline.
							<br/><br/>
							Share this url and Tell your friends to come online.
						  </p >
						</div >
					</div>

				</div>
				<!-- 
					Displaying chat list ends
				-->	
			</div>
		</div>
	</div>

	<!-- 
		HTML element for shwoing toaster notification starts
	-->	
	<toaster-container></toaster-container>
	<!-- 
		HTML element for shwoing toaster notification ends
	-->

	<!-- 
		Bootstrap modal starts
	-->
	<div id="myModal" class="modal fade" role="dialog">
		<div class="modal-dialog">

		<!-- Modal content starts-->
		<div class="modal-content">
			
			<!-- Modal header starts-->
			<div class="modal-header">
				<a type="button" class="close" data-dismiss="modal">&times;</a>
				<p class="modal-title">Start new chat</p>
			</div>
			<!-- Modal header ends-->
		  

			<!-- Modal Body starts-->
			<div class="modal-body">
			
				<!-- 
					Displaying start new chat list starts
				-->	
				<div class="newChat" ng-repeat="singleOfflineUser in RecentUserList" 
					ng-class="(hightlight_id==singleOfflineUser.id ? 'hightlight_user_class' :'')"
					id='modal_user_{{singleOfflineUser.id}}'
					>

					<div class="userlist-user-meta">
						<!-- 
							Displaying User details starts
						-->						
						<div class="newChat-user-meta">
							<img class="img-circle" ng-src="{{singleOfflineUser.p_photo}}">                    
							<span class="userlist-userName">{{singleOfflineUser.name}}</span>
							<span class="send-msg-offline sendButton{{singleOfflineUser.id}}">
								<span class="glyphicon glyphicon-plus showMSgBox_{{singleOfflineUser.id}}" ng-click="hideShowMsgBox(singleOfflineUser.id,'show',$event)"></span>
								<span class="glyphicon glyphicon-minus hideMsgBox_{{singleOfflineUser.id}} send-msg-hidden" ng-click="hideShowMsgBox(singleOfflineUser.id,'hide',$event)"></span>
							</span>
						</div>
						<!-- 
							Displaying User details ends
						-->	                    
						
						<!-- 
							text box to send messages starts 
						-->	
						<div class="send-msg-offline-text send-msg-hidden collapseMsgBox_{{singleOfflineUser.id}}">
							<textarea id="msg_modal_{{singleOfflineUser.id}}" class="form-control" ng-model='send_text' placeholder="Type your message here"></textarea>
							<button class="btn btn-primary newChat-send-mesaage" data-dismiss="modal" ng-click="send_msg('fromModal','',singleOfflineUser.id)">
								send message
							</button>                        
						</div>
						<!-- 
							text box to send messages starts 
						-->						
					</div>
				</div>	
				<!-- 
					Displaying start new chat list ends
				-->	
								
		  	</div>
		  	<!-- Modal Body ends-->

		</div>
		<!-- Modal content ends-->
	  </div>
	</div>
	<!-- 
		Bootstrap modal starts
	-->

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src = "js/angular.min.js"></script>
	<script type="text/javascript" src="js/angular-animate.min.js" ></script>
	<script type="text/javascript" src="angularjs-toaster/toaster.min.js"></script>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript" src ="js/home_script.js"></script>

  </body>
</html>

2. Now create a javascript file named as home_script.js which will perform all the operation on HomePage. But wait let's first integrate Socket.io to our Angular application.

I found a good article on this topic How to integrate socket.io with AngularJs application written by Brian Ford on Html5rocks.

So let's integrate socket.io in AngulrJs script.

home_script.js:

/* 
    Making factory method for socket 
*/
app.factory('socket', function ($rootScope) {
    var socket = io.connect();
	return {
		on: function (eventName, callback) {
			socket.on(eventName, function () {  
				var args = arguments;
				$rootScope.$apply(function () {
			  		callback.apply(socket, args);
				});
		  	});
		},
		emit: function (eventName, data, callback) {
		  	socket.emit(eventName, data, function () {
				var args = arguments;
				$rootScope.$apply(function () {
			  		if (callback) {
						callback.apply(socket, args);
			  		}
				});
		  	})
		}
  	};
});

3. Creating a service to run ajax, paste the below in home_script.js file.

home_script.js:

/* 
    Making service to run ajax 
*/
app.service('runajax', ['$http', function ($http) {
  this.runajax_function = function(request,callback){
    var url=request.url;
	var data_server=request.data_server;
	$http.post(url,data_server).success(function(data, status, headers, config) {
	  callback(data);
	})
	.error(function(){
	  callback(data);
	});
  }
}]);

2. Implementing Typing indicator:

1. You might have noticed  when we chat with another person then sites like Facebook and application like Whatsapp, Hike shows the typing indicator. which means that user sitting next to us  typing something in the textbox (Message box),

2. In this application, we will implement the same feature.

3. So let's start by creating directive as shown below. In this directive, we are binding TextArea HTML element with onKeyPress event and onKeyDown event. So whenever these events will occur we will call sendTypingNotification to send Typing notification by using socket.

/* 
    Making directive to send is Typing Notification 
*/
app.directive('sendTypingNotification', function () {
  return{
    require: 'ngModel',
	restrict: 'A',
	link:function (scope, element, attrs,ctrl) {
	  element.bind("keydown keypress", function (event) {
		scope.self.sendTypingNotification(event.type);
		scope.send_text=element.val();
	  });
	  scope.$watch(attrs.updateModel, function(value) {
		ctrl.$setViewValue(value);
		ctrl.$render();
	  });
	}
  }      
});

typing indicator in private real-time chatting app

Typing indicator 

3. Implementing PopUp notification:

1. To show the popup notification I am going to use toaster library. you can explore about that library here in depth.

2. Injecting dependencies 'ngAnimate', 'toaster' in our application for the toaster.

3. Writing toaster.pop('success',data.name+" sent you a message", data.msg,5000); method inside the getMsg socket event.

popup notification private real-time chatting app

PopUP Notification

4. Assembling Homepage script:

1. Now assembling home_script.js file.

home_script.js:

var app = angular.module('home',['ngAnimate', 'toaster']);


/* 
    Making factory method for socket 
*/
app.factory('socket', function ($rootScope) {
    var socket = io.connect();
	return {
		on: function (eventName, callback) {
			socket.on(eventName, function () {  
				var args = arguments;
				$rootScope.$apply(function () {
			  		callback.apply(socket, args);
				});
		  	});
		},
		emit: function (eventName, data, callback) {
		  	socket.emit(eventName, data, function () {
				var args = arguments;
				$rootScope.$apply(function () {
			  		if (callback) {
						callback.apply(socket, args);
			  		}
				});
		  	})
		}
  	};
});

/* 
	Making service to run ajax 
*/
app.service('runajax', ['$http', function ($http) {
  this.runajax_function = function(request,callback){
	var url=request.url;
	var data_server=request.data_server;
	$http.post(url,data_server).success(function(data, status, headers, config) {
	  callback(data);
	})
	.error(function(){
	  callback(data);
	});
  }
}]);


/* 
	Making directive to send is Typing Notification 
*/
app.directive('sendTypingNotification', function () {
  return{
	require: 'ngModel',
	restrict: 'A',
	link:function (scope, element, attrs,ctrl) {
	  element.bind("keydown keypress", function (event) {
		scope.self.sendTypingNotification(event.type);
		scope.send_text=element.val();
	  });
	  scope.$watch(attrs.updateModel, function(value) {
		ctrl.$setViewValue(value);
		ctrl.$render();
	  });
	}
  }      
});

app.controller('home', function ($scope,$location,$window,$sce,$timeout,toaster,socket,runajax) {
  
  $scope.show_userinfo=""; //To contain user information.
  $scope.userlist=""; //To contain list of users.
  $scope.RecentUserList=""; //To contain list of users.
  $scope.uid="";
  $scope.hightlight_id="";
  $scope.hightlight_socket_id="";
  $scope.send_to_userinfo="";
  $scope.send_to_user_name="";
  $scope.send_text;
  $scope.msgs=[];



  

/* Making Usefull function*/
$scope.self={
	getUserInfo: function(callback){
		var uid=$location.search()['id'];
		$scope.uid=uid;
		var data={
			url:'/get_userinfo',
			data_server:{
				uid:uid
			}
		};
		runajax.runajax_function(data,function(userdata){        
			$scope.show_userinfo=userdata;        
			callback(userdata);
		});
	},
	getRecentChats: function(callback){
		var uid=$location.search()['id'];
		$scope.uid=uid;
		var data={
			url:'/get_recent_chats',
			data_server:{
				uid:uid
			}
		};
		runajax.runajax_function(data,function(userdata){
			callback(userdata);
		});
	},
	getUsersToChats:function(callback){
	  var uid=$location.search()['id'];
	  $scope.uid=uid;
	  var data={
		url:'/get_users_to_chats',
		data_server:{
		  uid:uid
		}
	  };
	  runajax.runajax_function(data,function(userdata){
		callback(userdata);
	  });
	},
	getMsg:function(msgs_userinfo,callback){
	  var data={
		url:'/get_msgs',
		data_server:{
		  uid:$scope.uid,
		  from_id:msgs_userinfo.id
		}
	  }
	  runajax.runajax_function(data,function(userdata){        
		callback(userdata);
	  });
	},
	scrollDiv:function(){
	  var scrollDiv = angular.element( document.querySelector( '.msg-container' ) );
	  $(scrollDiv).animate({scrollTop: scrollDiv[0].scrollHeight}, 900);
	},
	sendTypingNotification:function(eventName){
	  var TypeTimer;                
	  var TypingInterval = 2000;
	  var data_server={
		  data_uid:$scope.uid,
		  data_fromid:$scope.hightlight_id,
		  data_socket_fromid:$scope.hightlight_socket_id
		}; 
	  if ( eventName=="keypress" ) {
		$timeout.cancel(TypeTimer);
		data_server.event_name='keypress';
		socket.emit('setTypingNotification',data_server);
	  }else {
		TypeTimer=$timeout( function(){
		  data_server.event_name='keydown';
		  socket.emit('setTypingNotification',data_server);
		}, TypingInterval);
	  }
	}
  };

/*
	Function To get 'user information as well as invokes to get Chat list' 
*/
$scope.self.getUserInfo(function(userinfo){
	socket.emit('userInfo',userinfo.data); // sending user info to the server  
});
  

/*
	Function To show selected user from chat list  
*/  
$scope.hightlight_user=function(send_to_userinfo){

	$scope.send_to_userinfo=send_to_userinfo;
	$scope.hightlight_id=send_to_userinfo.id;
	$scope.send_to_user_name=send_to_userinfo.name; 
	$scope.hightlight_socket_id=send_to_userinfo.socketId; 
	
	$scope.self.getMsg(send_to_userinfo,function(result){
	  $scope.msgs="";
	  if(result != 'null'){
		$scope.msgs=result;
	  }
	});
};

/*
	Function To get 'chat list' 
*/
$scope.get_recent_chats=function(){
	$scope.self.getRecentChats(function(offlineUsers){
		$scope.RecentUserList=offlineUsers;
	});
};

/*
	Function To get 'start new chat list' 
*/
$scope.get_users_to_chats=function(){
	$scope.self.getUsersToChats(function(newUsers){
	  $scope.RecentUserList=newUsers;
	});
};

/*
	Function To send messages
*/  
$scope.send_msg=function(fromModal,socketId,toid){
	alert(fromModal+"-"+socketId+"-"+toid);
	if(fromModal==""){
		if($scope.send_to_userinfo != ""){
			if($scope.send_text==""){
				alert("Message can't be empty.");
			} else{
				var data={
					socket_id:$scope.send_to_userinfo.socketId,
					to_id:$scope.send_to_userinfo.id,
					from_id:$scope.uid,
					msg:$scope.send_text
				};

				// sending user info to the server starts
				socket.emit('sendMsg',data);

				$scope.msgs.push({
					msg:$scope.send_text,
					from_id:$scope.uid,
					to_id:$scope.send_to_userinfo.id,
					timestamp:Math.floor(new Date() / 1000)
				});
				$scope.send_text="";
				$scope.self.scrollDiv();
			}           
		}else{
		  alert("Select a user to send Message.");
		}  
	}else{
		var getMsgText =angular.element( document.querySelector( '#msg_modal'+'_'+toid ) ).val();
		if(getMsgText==""){
			alert("Message can't be empty.");
		}else{
			var data={
				socket_id:null,
				to_id:toid,
				from_id:$scope.uid,
				msg:getMsgText
			};
			socket.emit('sendMsg',data);
		}
	}
};


/*
	To hide and show the Message box inside Modal
*/
$scope.hideShowMsgBox=function(id,action,$event){

	var hideShowEle = angular.element( document.querySelector( '.collapseMsgBox'+'_'+id ) ); 
	var hidEle=angular.element( document.querySelector( '.hideMSgBox'+'_'+id ) );
	var showEle=angular.element( document.querySelector( '.showMSgBox'+'_'+id ) );

	if(action=="hide"){
		hideShowEle.addClass('send-msg-hidden');
		hideShowEle.removeClass('send-msg-show');
		showEle.removeClass('send-msg-hidden');
		showEle.addClass('send-msg-show');
		hidEle.addClass('send-msg-hidden');
		hidEle.removeClass('send-msg-show');
	}else{
		hideShowEle.addClass('send-msg-show');
		hideShowEle.removeClass('send-msg-hidden');
		showEle.addClass('send-msg-hidden');
		showEle.removeClass('send-msg-show');
		hidEle.removeClass('send-msg-hidden');
		hidEle.addClass('send-msg-show');
	}
}


	/*---------------------------------------------------------------------------------
		Socket on event starts
  	---------------------------------------------------------------------------------*/

	/*
		Function to show Chat List.
  	*/
	socket.on('userEntrance',function(data){
		$scope.userlist=data;
  	});

 
  	/*
		Function to show messages.
  	*/
	socket.on('getMsg',function(data){
		if($scope.send_to_userinfo != ""){
	  		$scope.self.getMsg($scope.send_to_userinfo,function(result){
				$scope.msgs="";
				$scope.msgs=result;
				$scope.self.scrollDiv();
	  		});    
		}

		/*
	  		Using Toaster to show notifications
		*/
		toaster.pop('success',data.name+" sent you a message", data.msg,5000);
  	});

	/*
		Function to update user list when one user goes offline.
	*/
  	socket.on('getTypingNotification',function(data){
		if(data.event_name=="keypress"){
	  		angular.element('#isTyping_'+data.data_uid).css('display','block');
		}else{
	  		angular.element('#isTyping_'+data.data_uid).css('display','none');      
		}
  	});

  	socket.on('exit',function(data){
		if(data==1){
			$scope.self.getUserInfo(function(userinfo){
				socket.emit('userInfo',userinfo.data); // sending user info to the server  
			});
		}
  	});
  	/*---------------------------------------------------------------------------------
		Socket on event Ends
  	---------------------------------------------------------------------------------*/
});

5. writing styles:

1. In the first part, we created style.css add the below styles in that file to make our homePage look good.

style.css:

/*--------------------------------------------------------------------------------------------
Home page starts
----------------------------------------------------------------------------------------------*/

/*---------------------------------------------------
Header starts
---------------------------------------------------*/
.list-wrapper-header{
    height: 75px;
    color: #fff;
	background: #50d0c1;
	margin-bottom:10px; 
	padding: 10px;
	-webkit-box-shadow: 0px 2px 7px 1px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 2px 7px 1px rgba(0,0,0,0.35);
	box-shadow: 0px 2px 7px 1px rgba(0,0,0,0.35);
}
.profile_pic{
	float: left;	
	width: 50px;
	height: 100%;
	margin-right: 20px;
}
.profile_pic img{
	width: 100%;
	height: 100%;
}
.user-meta{	
	padding: 5px;	
	text-transform: uppercase !important;
}
.user-meta .user-name{
	font-size: 18px;
	display: block;
}
.user-meta .user-status{
	font-size: 10px;	
}
.icon-set{
	float: right;
	font-size: 20px;
	height: 100%;
	padding: inherit;
}
.icon-set a{
	margin-right: 5px;
	cursor: pointer;
	color: #fff;
}
/*---------------------------
Header Ends
-----------------------------*/

/*----------------------------
List of users starts
------------------------------*/
.list-wrapper{
	height: 100%;
	padding: 0px ;
	background: #F9F7F7;
	color: #fff;
}
.userlist{
	padding: 5px;
	margin: 5px;
	height:86%;
	overflow-y: scroll;
}
.userlist-single{
	height: 75px;	
	margin-bottom: 5px;
	background-color: #fff;
	padding-left : 10px;
	border: solid 1px rgba(80, 208, 193, 0.35);
}
.userlist-user-meta{
	height: 100%;
    width: 100%;
    padding: 5px;
    color: rgba(0, 0, 0, 0.69);
    font-weight: 400;
}
.userlist-user-meta img{
	height: 100%;
    width: 75px;
    border: solid 1px rgb(188, 186, 186);
    background-color: rgba(255, 255, 255, 0.1);
    float: left;
    margin-right: 20px;
}
.userlist-user-meta span{
	font-size: 20px;
}
.online-user-status{
	float: right;
    height: 15px;
    margin-right: 30px;
    width: 15px;
    border-radius: 50%;
    margin-top: 6.5%;
}
.userlist-userName{
	display: inline-block;
    margin-top: 15px;
    margin-bottom: 5px;
}
.is-typing{
	font-size: 10px !important;;
	color: #13FF03 !important;
	display: none;
}
.status-online{
	background: #0BFF02;	
}
.status-offline{
	background: #FF3702;
}
.hightlight_user_class{
	padding-left: 5px;
	border-top: solid 1px rgba(80, 208, 193, 0.35);
	border-left: solid 1px rgba(80, 208, 193, 0.35);
	border-bottom: solid 1px rgba(80, 208, 193, 0.35);
	border-left: solid 5px #50d0c1;
}
/*----------------------------------
List of users Ends
------------------------------------*/


/*----------------------------------
Message Area starts
------------------------------------*/

.msg-wrapper{
	height: 100%;		
	padding: 0px;
	border-left: solid 1px rgba(0, 0, 0, 0.3);
}
.msg-wrapper-header{
	height: 35px;
	padding: 10px;
	position:absolute;
	width: 97.56%;
	color: rgba(0, 0, 0, 0.69);
	background-color: rgb(80, 208, 193);	
	-webkit-box-shadow: 0px 2px 7px 1px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 2px 7px 1px rgba(0,0,0,0.35);
	box-shadow: 0px 2px 7px 1px rgba(0,0,0,0.35);
}
.chat-user-meta{
	margin: 0px auto;
}
.chat-user-meta .user-name{
	font-size: 15px;
	display: block;
}
.msg-wrapper-body{
	height: 100%;
	padding: 25px;
	border-left: solid 1px rgba(80, 208, 193, 0.35);
	width: 100%;
	background-color: #fff;
}
.msg-container{
	height: 80%;
	width: 100%;
	overflow-y:scroll;  
}
.msg-container{
	height: 85%;
	width: 100%;
	overflow-y:scroll;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px; 
	border-bottom: solid 1px rgba(0, 0, 0, 0.18); 
	margin-bottom: 10px; 
}
.send-container{
	height: 10%;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}
.msg-single{
	clear: both;
	margin-bottom: 10px;
	text-decoration: none;
	list-style-type: none;
	margin: 20px 0px 0px 20px;
}
.msg-conatiner{
	float: left;
	display: inline-block;
	margin: 5px;
	padding: 5px;
    min-width: 160px;
    min-height: 10px;
    max-width: 510px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 1px 5px 0px rgba(80, 208, 193, 0.3);
	-moz-box-shadow: 0px 1px 5px 0px rgba(80, 208, 193, 0.3);
	box-shadow: 0px 1px 5px 0px rgba(80, 208, 193, 0.3);
    line-height: 1.4;
    word-wrap: break-word;
    border: solid 1px rgba(80, 208, 193, 0.35);;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.25);
}

/*----------------------------------
Message Area Ends
------------------------------------*/


/*----------------------------------
Message styling starts
------------------------------------*/

.actual-msg{
	color: rgba(0, 0, 0, 0.69);
	padding: 15px 0px 5px 15px;	
}
.msg-meta{
    font-size: 9px;
    color: rgba(0, 0, 0, 0.69);	
    float: right;
}
.send-msg-text{
	width: 90%;
	float: left;
}
.send-btn{
	width: 10%;
	margin-top: 0px;
	float: right;
	padding-left: 20px;
	padding-top: 10px;
}
.send-btn:hover{
	cursor: pointer;
	-ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari */
    transform: scale(1.1);
}
.send-btn:active{
	cursor: pointer;
	-ms-transform: scale(1.3); /* IE 9 */
    -webkit-transform: scale(1.3); /* Safari */
    transform: scale(1.3);
    padding-left: 40px;
    margin-top: -20px;
}
#toast-container>.toast-success{
	vertical-align: top;
    font-family: 'Fontawesome';
    -webkit-font-smoothing: antialiased;
    content: '\f1d7';
}



.newChat .userlist-user-meta{
	height:inherit;
	border: solid 1px rgba(0, 0, 0, 0.22);
	padding:5px;
	margin: 10px;
}
.userlist-single-offline{
	background-color: #fff !important;
	padding: 5px;
	margin:5px;
}
.newChat-user-meta{
	height: 70px;
}
.newChat .userlist-userName{
	color: #000 !important;	
}
.newChat-user-meta img{
	border: solid 1px rgba(0, 0, 0, 0.37) !important;
}
.send-msg-offline{
	float: right;
	margin: 20px;	
    color: rgb(13, 24, 29) !important;
    cursor: pointer;
}
.send-msg-offline-text{
	padding: 30px;
}
.send-msg-offline-text textarea{
	background-color: #fff !important;
	color: #000 !important;
}
.send-msg-hidden{
	padding: 20px;
	display: none;
}
.send-msg-show{
	display: block;
}
.newChat-send-mesaage{
	margin:10px 0px 10px 0px;
	background: rgb(13, 24, 29) !important;
}

Well, It's the end of this article.

You can download the code and use anywhere you want and I hope you like this article If You have any suggestion let me know in comment box below.