Chat on socket.io - what's wrong?

N

neodekvat092015-07-11 22:00:23

JavaScript

neodekvat09, 2015-07-11 22:00:23

Hello, I recently got the urge to write a chat. It seems like everything worked out, but when I decided to add nicknames, everything somehow went wrong...
Now, after entering the nickname, nothing happens, for some reason the page simply reloads, although it should show the chat window itself.
Here are the sources:
Index.html

<body>
<div class="setNickname-wrap">
  <form class="nick-form">
    <input type="text" class="nickname">
    <!-- <input type="submit" class="add" value='Enter a nickname'> -->
    <input type='submit' class="add" value='Enter a nickname'>
  </form>
  <p class="nick-error"></p>
</div>


<div class="chat-wrap">
  <ul id="messages"></ul>
  <form class='send-message'>
    <input type="text" id="input" autocomplete="off">
    <input type='submit' class='send' value='Send'>
  </form>

  <div class="online-users"></div>
</div>


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io(),
  sendMessage = $('.send-message'),
  nickWrap = $('.setNickname-wrap'),
  chatWrap = $('.chat-wrap'),
  nickInput = $('.nick'),
  nickForm = $('.nick-form'),
  nickError = $('.nick-error'),
  onlineUsers = $('online-users');

chatWrap.hide();
nickForm.submit(function(){
  socket.emit('new user', nickInput.val(), function(data){
    if(data){
      nickWrap.hide();
      chatWrap.show();
    } else {
      nickError.html("That username is already taken.");
    }
  });
  // nickInput.val('');
});

socket.on('usernames', function(data){
  var html = '';
  for(i = 0; i < data.length; i++){
    html += data[i] + '<br>';
  }
  onlineUsers.html(html);
});

sendMessage.submit(function(){
  socket.emit('chat message', $('#input').val());
  $('#input').val('');
  return false;
});

socket.on('chat message', function(msg){
  // $('#messages').append($('<li>').text(msg));
  $('#messages').append('<li><b>' + data.nick + ': </b>' + data.msg + '</li>' + '<br>');
});
</script>
</body>

server.js

var app = require('express')()
  http = require('http').Server(app),
  io = require('socket.io')(http),
  nicknames = [];

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){

  socket.on('new user', function(data, callback){
    if(nicknames.indexOf(data) != -1){
      callback(false);
    } else {
      callback(true);
      socket.nickname = data;
      nicknames.push(socket.nickname);
      updateNicknames();
    }
  });

  function updateNicknames(){
    io.emit('usernames', nicknames);
  }

  socket.on('send message', function(data){
    io.emit('new message', {msg: data, nick: socket.nickname});
  });

  socket.on('disconnect', function(data){
    if(!socket.nickname) return;
    nicknames.splice(nicknames.indexOf(socket.nickname), 1);
    updateNicknames();
  });
});

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

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Aves, 2015-07-12
@neodekvat09

You need to cancel the default action of submitting the form for the nickname, as canceled in the message form:

nickForm.submit(function(){
  ...
  return false;
});

And another class fix
<input type="text" class="nickname">doesn't match withnickInput = $('.nick')

A

Alexander Litvinenko, 2015-07-12
@edli007

what does he write?