NodeJS 32: SocketIO -> ChatApp
#######################################CODE##################################
#################################
index.html
#################################
<html>
<head>
<title>Chat App</title>
<!-- bootstrap cdn -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jquery cdn -->
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<!-- client side socket io -->
<script src="/socket.io/socket.io.js"></script>
<style>
body{
margin-top:30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="well">
<h3>Online users</h3>
<ul class="list-group" id="users"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea class="form-control" id="message"></textarea>
<br/>
<input type="submit" class="btn btn-primary" value="Send Message"/>
</div>
</form>
</div>
</div>
</div>
<script>
$(function(){
var socket=io.connect();//new connection to server
var $messageForm=$('#messageForm');
var $message=$('#message');
var $chat=$('#chat');
$messageForm.submit(function(e){//event handler for submit button click
e.preventDefault(); //disable default click event
socket.emit('send message',$message.val());//trigger 'send message' event
$message.val('');
console.log('submitted');
});
//listen for new message from server
socket.on('new message',function(data){
$chat.append('<div class="well">'+data.msg+'</div>');
});
});
</script>
</body>
</html>
#################################
server.js
#################################
var express=require('express');
var app=express();
var server=require('http').createServer(app);
var io=require('socket.io').listen(server);
users=[];
connections=[];
server.listen(3000);
console.log('server listening on 3000');
app.get('/',function(req,resp){
resp.sendFile(__dirname+'/index.html');
});
io.sockets.on('connection',function(socket){//when user connects to the chat server
connections.push(socket);
console.log('Connected : %s socket connection',connections.length);
socket.on('disconnect',function(){//when user disconnects from the chat server
connections.splice(connections.indexOf(socket),1);
console.log('Disconnected : %s socket connection',connections.length);
}) ;
//once user click on send -> this will trigger
socket.on('send message',function(data){
console.log(data);
io.sockets.emit('new message',{msg:data});//then server emits this message to broadcast to all users
});
});
#################################
package.json
#################################
{
"name": "mychatapp",
"version": "1.0.0",
"description": "mychatapp",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "pavan",
"license": "ISC",
"dependencies": {
"express": "^4.16.3",
"socket.io": "^2.1.1"
}
}
#################################CODE END#################################
#######################################CODE##################################
#################################
index.html
#################################
<html>
<head>
<title>Chat App</title>
<!-- bootstrap cdn -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jquery cdn -->
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<!-- client side socket io -->
<script src="/socket.io/socket.io.js"></script>
<style>
body{
margin-top:30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="well">
<h3>Online users</h3>
<ul class="list-group" id="users"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea class="form-control" id="message"></textarea>
<br/>
<input type="submit" class="btn btn-primary" value="Send Message"/>
</div>
</form>
</div>
</div>
</div>
<script>
$(function(){
var socket=io.connect();//new connection to server
var $messageForm=$('#messageForm');
var $message=$('#message');
var $chat=$('#chat');
$messageForm.submit(function(e){//event handler for submit button click
e.preventDefault(); //disable default click event
socket.emit('send message',$message.val());//trigger 'send message' event
$message.val('');
console.log('submitted');
});
//listen for new message from server
socket.on('new message',function(data){
$chat.append('<div class="well">'+data.msg+'</div>');
});
});
</script>
</body>
</html>
#################################
server.js
#################################
var express=require('express');
var app=express();
var server=require('http').createServer(app);
var io=require('socket.io').listen(server);
users=[];
connections=[];
server.listen(3000);
console.log('server listening on 3000');
app.get('/',function(req,resp){
resp.sendFile(__dirname+'/index.html');
});
io.sockets.on('connection',function(socket){//when user connects to the chat server
connections.push(socket);
console.log('Connected : %s socket connection',connections.length);
socket.on('disconnect',function(){//when user disconnects from the chat server
connections.splice(connections.indexOf(socket),1);
console.log('Disconnected : %s socket connection',connections.length);
}) ;
//once user click on send -> this will trigger
socket.on('send message',function(data){
console.log(data);
io.sockets.emit('new message',{msg:data});//then server emits this message to broadcast to all users
});
});
#################################
package.json
#################################
{
"name": "mychatapp",
"version": "1.0.0",
"description": "mychatapp",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "pavan",
"license": "ISC",
"dependencies": {
"express": "^4.16.3",
"socket.io": "^2.1.1"
}
}
#################################CODE END#################################
No comments:
Post a Comment