Socket.IO - Chat Apppcation

Now that we are well acquainted with Socket.IO, let us write a chat apppcation, which we can use to chat on different chat rooms. We will allow users to choose a username and allow them to chat using them. So first, let us set up our HTML file to request for a username −


<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
   </script>
   <body>
      <input type="text" name="name" value="" placeholder="Enter your name!">
      <button type="button" name="button">Let me chat!</button>
   </body>
</html>

Now that we have set up our HTML to request for a username, let us create the server to accept connections from the cpent. We will allow people to send their chosen usernames using the setUsername event. If a user exists, we will respond by a userExists event, else using a userSet event.


var app = require( express )();
var http = require( http ).Server(app);
var io = require( socket.io )(http);

app.get( / , function(req, res){
   res.sendFile( E:/test/index.html );});
users = [];
io.on( connection , function(socket){
   console.log( A user connected );
   socket.on( setUsername , function(data){
      if(users.indexOf(data) > -1){
         users.push(data);
         socket.emit( userSet , {username: data});
      } else {
         socket.emit( userExists , data +   username is taken! Try some other username. );
     }
   })
});
http.psten(3000, function(){
   console.log( pstening on localhost:3000 );
});

We need to send the username to the server when people cpck on the button. If user exists, we show an error message; else, we show a messaging screen −


<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
      function setUsername(){
         socket.emit( setUsername , document.getElementById( name ).value);
      };
      var user;
      socket.on( userExists , function(data){
         document.getElementById( error-container ).innerHTML = data;
      });
      socket.on( userSet , function(data){
         user = data.username;
         document.body.innerHTML =  <input type="text" id="message">
         <button type="button" name="button" oncpck="sendMessage()">Send</button>
         <span id="message-container"></span> ;
      });
      function sendMessage(){
         var msg = document.getElementById( message ).value;
         if(msg){
            socket.emit( msg , {message: msg, user: user});
         }
      }
      socket.on( newmsg , function(data){
         if(user){
            document.getElementById( message-container ).innerHTML += <span><b>  + data.user +  </b>:   + data.message +  </span> 
         }
      })
   </script>
   <body>
      <span id="error-container"></span>
      <input id="name" type="text" name="name" value="" placeholder="Enter your name!">
      <button type="button" name="button" oncpck="setUsername()">Let me chat!</button>
      </body>
   </html>

Now if you connect two cpents with same username, it will give you an error as shown in the screenshot below −

Once you have provided an acceptable username, you will be taken to a screen with a message box and a button to send messages. Now, we have to handle and direct the messages to the connected cpent. For that, modify your app.js file to include the following changes −


var app = require( express )();
var http = require( http ).Server(app);
var io = require( socket.io )(http);

app.get( / , function(req, res){
   res.sendFile( E:/test/index.html );});
users = [];
io.on( connection , function(socket){
   console.log( A user connected );
   socket.on( setUsername , function(data){
      console.log(data);
      if(users.indexOf(data) > -1){
         socket.emit( userExists , data +   username is taken! Try some other username. );
      } else {
         users.push(data);
         socket.emit( userSet , {username: data});
      }
   });
   socket.on( msg , function(data){
      //Send message to everyone
      io.sockets.emit( newmsg , data);
   })
});
http.psten(3000, function(){
   console.log( pstening on localhost:3000 );
});

Now connect any number of cpents to your server, provide them a username and start chatting! In the following example, we have connected two cpents with names Ayush and Harshit and sent some messages from both the cpents −

Socket.IO - Chat Apppcation

友情链接