Chat socket io

app.js

 

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

app.get('/', function(req, res){
  res.sendfile('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.listen(3000, function(){
  console.log('listening on localhost:3000');
});

index.html

 <!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" onclick="sendMessage()">Send</button>\
 <div id="message-container"></div>';
 });
 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 += '<div><b>' + data.user + '</b>: ' + data.message + '</div>'
 }
 })
 </script>
 <body>
 <div id="error-container"></div>
 <input id="name" type="text" name="name" value="" placeholder="Enter your name!">
 <button type="button" name="button" onclick="setUsername()">Let me chat!</button>
 </body>
</html>

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos