5

I want to write a simple chat for practical experience.

All right, but I can't get a socket.nickname for notice a join/leave from the room. (when I tried pass its, he always sad a 'undefined').

Now all right, tried to create list of rooms

UPDATE CODE:

client.js:

$('#roomForm').submit(function() {
    socket.emit('createRoom', $('#roomName').val());
    $('#roomForm').hide();
    $('#chatForm').show();
    return false;
});

socket.on('message', function(data) {
    newMessage(data);
});

socket.on('showRooms', function(rooms) {
    console.log(rooms);
    for(var i = 0; i < rooms.length; i++) {
        $('#rooms').append($('<li>')
                        .append($('<form id="freeRoom">')
                            .append($('<span id="room">').text(rooms[i] + ' ///'))
                            .append($('<button>').text('connect'))));
    };
});

$('#freeRoom').submit(function() {
    socket.emit('connectToRoom', $('#room').text());
    return false;
});

server.js:

io.on('connection', function(socket) {
    socket.on('sendNickname', function(username) {
        socket.username = username;
        users.push(socket.username);
        socket.emit('showRooms', rooms);
    });

    socket.on('disconnect', function() {
        socket.broadcast.to(socket.room).emit('notice', socket.username + ' has left the room');
        users.splice(users.indexOf(socket.username), 1);
        socket.emit('showRooms', rooms);
    });

    socket.on('message', function(data) {
        socket.broadcast.to(socket.room).emit('message', data);
    });

    socket.on('createRoom', function(room) {
        socket.leave(socket.room);
        socket.room = room;
        rooms.push(socket.room);
        socket.join(socket.room);
        socket.emit('showRooms', rooms);
        console.log('Rooms: ' + rooms);
        socket.broadcast.to(socket.room).emit('notice', socket.username + ' has joined to room');
    });

    socket.on('connectToRoom', function(room) {
        console.log('Will connect to that room: ' + room);
        socket.join(room);
    });
});

**UPD 2: ** Tried to connect free created room:

$('#freeRoom').submit(function() {
    socket.emit('connectToRoom', $('#room').text());
    return false;
});

P.S. And... Sorry for my english >.<

vagabund
  • 73
  • 1
  • 1
  • 6

1 Answers1

9

The event name that you emit, that is 'connect' is reserved in Socket.io along with 'message' and 'disconnect':

http://socket.io/docs/#sending-and-receiving-events

Socket.IO allows you to emit and receive custom events. Besides connect, message and disconnect, you can emit custom events:
...

Change it to something else, e.g:

Server.js:

io.on('connection', function(socket) {
socket.on('send-nickname', function(nickname) {
    socket.nickname = nickname;
    users.push(socket.nickname);
    console.log(users);
});
...

Client.js

socket.emit('send-nickname', nickname);
misko321
  • 493
  • 7
  • 14
  • 1
    Oh, thanks!!!!! This simple trouble, all work, but I have few questions... When room has deleted ? (when in this room will be havent a users or what ?) – vagabund Sep 20 '15 at 09:09
  • 2
    It seems that indeed, room is automatically deleted when all users will have left it: http://stackoverflow.com/a/8750801/4228291 – misko321 Sep 20 '15 at 09:13
  • 1
    Nice, and last question, Im trying to do list of all rooms (for user's connect), and, I can't do 'reload' all list when room is deleted or created (code was updated). – vagabund Sep 20 '15 at 09:26
  • 1
    *and try to connect of free room (in showed list of rooms) – vagabund Sep 20 '15 at 09:41
  • 1
    If you want to update the list of rooms every time a new one is created or existing one is deleted, you just need to add a new event (e.g. 'rooms-reload'/'rooms-refresh') and emit a message from the server when such situation occurs, then of course update the list in client app. Regarding you second question: You already have the event 'connectToRoom'. What more do you need? I'd only recommend to split code for creating and joining a room in server.js into two separate methods. – misko321 Sep 20 '15 at 10:58
  • Again thanks))) Good luck in life and programming ;) – vagabund Sep 20 '15 at 11:40
  • Maaaaan, I again can't understand how I must connect user from 'rooms (list of created rooms). Because I have a many li ($('rooms')>li>form(span with room's name and button) and I can't define current room name for connect. code of submiting form (post was edit, look a UPD 2). I know, I must select a $(this) of forms in list, but how ? – vagabund Sep 20 '15 at 14:47
  • Add onclick action for every `li`. Inside it $(this) will refer to specific `li` and you can use it to search further with jQuery's find(), for example $(this).find(".sth") to reach span with room's name. You could also add an ID for every `li` with name of your room and retrieve it with jQuery's attr(). And BTW in `.append($('
    ')` and `append($('')` you assign the same ID to multiple objects which is obviously incorrect. You need to add sth, e.g. index var `i`. If you encounter more problems, please submit a new question, cause this one's getting long :)
    – misko321 Sep 21 '15 at 14:44