Explanation.txt

Websocket Tutorial (Net Ninja 5videos) 

1. npm init 
2. npm i express 
3. npm i nodemon 
4. create index.js 
  In index.js: 
    i.) require express because we are creating a express app 
Now when we will do nodemon index in terminal we will get "App listening on port 5000" . i.e our app is running
But if we go to localhost:5000 on chrome we will get "cannot get/" because we are not serving anything to show on the browser.

5. So no we will use some middleware to serve some static or public files
 "//Static files" comment in index.js 
 app.use(express.static('public')) //It means that we want to serve the public folder on the browser. It will serve index.html from public folder to browser.
6. Create a public folder and create index.html in it.

7. npm i socket.io
8. No we will have to setup socket.io on server as well as on frontend
9. Setting socket on server : 
    In index.js - i.)  require('socket.io') 
                  ii.) io = socket(server)  //passing the server which we created because we want socket to work on this server.
                  iii.) io.on('connection', function(socket){      //listening for an event. i.e When the fronted will connect to the server this will run.
                           console.log('made socket connection')
                        })               

10. Setting socket on the frontend: 
    In public/index.html - i.) <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script> 
                           ii.) <script src="chat.js"></script>
    
    Create chat.js and in it write : const socket = io.connect("http://localhost:5000");  //For making a connection with the server. iii point in 9. will listen to this event and will print made socket connection in console

11.  In 9.iii ..function(socket)..    //Here socket is an object containing lots of properties.
                                      //id is one of the properties of socket. Every time we refresh the page or run the url in browser we get a new 
                                      //connection(socket) . i.e. we get a new socket.id each time . 

video -4 : 
12. create the frontend for the chat app in index.html 

     In chat.js grab the data written by the client in the input boxes. 
     Add click eventListener to the send button to send this data to the server via the socket created between client and the server.
 
     btn.addEventListener('click', function(){  //listening to the send button 
       socket.emit('chat', {                  //grab the socket between this client and the server and emit the message and send it to the server
         message: message.value, 
         handle: handle.value
       });
     });

13. In index.js where we were listening to the event; there write the code for what to do when the server recieves a message from a client. 
    The server will send out this message to all the sockets connected to it.

    io.on('connection', function(socket){      //listening for an event
    console.log('made socket connection', socket.id) 

     socket.on('chat', function(data){   //When a message is sent form a client to the server. When the message comes from a client then the server will take the message
        io.sockets.emit('chat', data);  //and will emit that message to all the sockets(i.e all the clients) connected to the server.
     })
    })  

14. video-5 : 
  Broadcasting message : Message which shows that "sonu is typing". 
                         We have to send this message from server to all the clients except the one who is typing
                         These type of messages are called Broadcasting message.
  
  Add key press eventListener to the message input because when someone will be typing then only isTyping will be shown.


*** In chat.js write the code for sending the messages to the server and for handling the messages coming form the server 
                                   ( socket.emit() )                                                  ( socket.on() )
    
    In index.js write the code for handling the messages coming from the frontend ****                                   
                                      ( socket.on() )

socket in chat.js is different from the socket in index.js