basic chat app

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

npm install

before go to step 2 . we need to know that have server side is node.js and client side that is javascript library you can find from

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

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

note : express and 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

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('')(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 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>
    <title>Socket.IO chat</title>
      * { 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; }
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    <script type="text/javascript" src=""></script>
    <script src=""></script>
    <script type="text/javascript">
	  $(document).ready(function () {
	    var socket = io.connect('http://localhost:3000/');
        //for chat1.html

	      socket.emit('message1', $('#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

	      socket.emit('message2', $('#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));


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: