socket.io basic chat app


step 1 : install socket.io if you have nothing installed yet , node.js you can find on google

npm install socket.io

before go to step 2 . we need to know that socket.io have server side is node.js and client side that is javascript library you can find from https://cdnjs.com/libraries/socket.io

step 2 : create a package.json file that have data like below 

{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {
    "express": "^4.15.3",
    "socket.io": "^2.0.3"
  }
}

note : express and socket.io can be not the same .if you lazy , you can just add name  , version and description . no need for dependencies and install package like below :

//optional solution : install package one by one

npm install --save express
npm install --save socket.io

step 3 : we create app.js for server side and have code like below

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  // res.send('<h1>Hello world</h1>');
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  
  console.log('a user connected');
  
  socket.on('message1', function (msg) {
    console.log('message1 = ', msg);
    io.emit('message1', msg);
  });

  socket.on('message2', function (msg) {
    console.log('message2 = ', msg);
    io.emit('message2', msg);
  });

});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

as you see code above have function socket.on with parameter message1 and message2, this function catch event that emit from client side with name 'message1' and 'message2' and then server emit event back to client with function io.emit .that how socket.io work with chat ... at least.

step 4 now we create client side html file chat1.html chat2.html with the same element just flip some content

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript">
	  $(document).ready(function () {
	    var socket = io.connect('http://localhost:3000/');
	    
         //------------------------------------------
        //for chat1.html

	    $('form').submit(function(){
	      socket.emit('message1', $('#m').val());
	      $('#m').val('');
	      return false;
	    });

	    socket.on('message2', function(msg){
	      $('#messages').append($('<li align="left">').text(msg));
	    });

	    socket.on('message1', function(msg){
	      $('#messages').append($('<li align="right">').text(msg));
	    });

         //------------------------------------------
        //for chat2.html

	    $('form').submit(function(){
	      socket.emit('message2', $('#m').val());
	      $('#m').val('');
	      return false;
	    });

	    socket.on('message1', function(msg){
	      $('#messages').append($('<li align="left">').text(msg));
	    });

	    socket.on('message2', function(msg){
	      $('#messages').append($('<li align="right">').text(msg));
	    });


	  });
	</script>
  </body>
</html>

ok we done now let test it !!!!!!

go to your app directory and run app.js

node app.js

open chat1 and chat2 in defferent windows and chat !!!!!

Share this Post:

Related Posts:

www.000webhost.com