Socket.io TypeError: undefined is not a function

Question

I'm making a simple chat app. Connecting, "loggin in" and sending chat messages goes just fine. However when I refresh the page and try to login again I get the error;

Missing error handler on socket.
TypeError: undefined is not a function at Socket. '<'anonymous>
[ . . . ] at server.js:30:19

Server.js

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

var users = [];
var chat_history = [];

[...]

io.on('connection', function(socket){
    //
    // LOGIN
    ///////////////////////////
    socket.on('login', function(username) {
        if(!socket.username && username) {
            socket.emit('logged_in', 'successful');
            socket.emit('chat_history', JSON.stringify(chat_history));
            io.emit('notice', username + ' has connected.');
            socket.username = username;
            users.push(username);

            update_users();


            //
            // CHAT MESSAGE RECEIVED
            ///////////////////////////
            socket.on('chat_message', function(msg){
                var message = getTime() + ' ' + socket.username + ': ' + msg;

                update_chat_history(message);
            });


            //
            // DISCONNECT
            ///////////////////////////
            socket.on('disconnect', function () {
                io.emit('notice', socket.username + ' has left the channel.');
                console.log(socket.username + ' disconnected');

                update_users();
            });
        } else {
            socket.emit('logged_in', 'unsuccessful');
            socket.emit('notice', 'Login was unsuccessful, please refresh the page and try again.');
        }
    });


    ///////////////////////////////////////////
    //socket.on('error', function (err){
    //    console.error(err.stack);
    //});
    ///////////////////////////////////////////
});

http.listen(port, ip);

console.log('listening on ' + ip + ':' + port);



//
// Functions
///////////////////////////
function getTime() {
    var t = new Date();
    t = '[' + t.getUTCHours() + ' : ' + t.getUTCMinutes() + ']';

    return t;
}

function update_users() {
    //console.log(io.sockets.connected);
    users = [];

    for( var client in io.sockets.connected ){
        var username = io.sockets.connected[client].username;
        if(username){
            users.push(username);
        }
    }

    users = JSON.stringify(users);
    io.emit('users_online', users);
}

function update_chat_history(message_to_add){
    chat_history.push(message_to_add);

    if(chat_history.length > 20){
        chat_history.splice(0, 1);
    }
}

At socket.on('login') I tested socket not to be undefined after refreshing page or disconnect of con.
I guess it has something to do with it not renewing connection and trying to reconnect to same connection, but I have no idea how or what. Could not find solution at stackoverflow. Help is appreciated.

UPDATE: Blaargh this just doesnt make any at all (╯°□°）╯︵ ┻━┻

Still the same error. now at server.js:78:11

http://1.1m.yt/kgaZSBfUa.png

Removed all socket.usernames and changed login to;

socket.on('login', function(username) {
    if( username ) { // TODO what if duplicate username
        socket.emit('logged_in', 'successful');
        socket.emit('chat_history', JSON.stringify(chat_history));
        io.emit('notice', username + ' has connected.');

        add_user(socket.id, username);
        [...]

Also changed the update_users()

function add_user(id, username){
    users.push({
        'id' : id,
        'username' : username
    });

    var json_users = JSON.stringify(users);
    io.emit('users_online', json_users);
}

function remove_user(id){
    for(user in users){
        if(users[user]['id'] == id){
            users.splice(users[user], 1);
            break;
        }
    }
    var json_users = JSON.stringify(users);
    io.emit('users_online', json_users);
}

UPDATE: 2

I still have no clue at all what could have been the problem however somehow I managed to write around it so its working now.

Answer 1

everytime you refresh the page your socket is removed and a new one is created (without the property username because it's a new socket) so you need to find a way to persist your username

for your case i suggest you to put the username in a cookie and check on page load if the cookie "username" exists and has value if it does then update your (new) socket

a more advanced approach : handle browser reload socket io

hope this helps !

EDIT

npm install --save lodash

    var _ = require('lodash')
    var users = [];

    io.sockets.on('connection', function (socket) {
        socket.username ="guest"
     socket.on('login', function(username) {
            if( username) {
                socket.emit('logged_in', 'successful');
                io.emit('notice', username + ' has connected.');
                socket.username = username ;
                // users.push(username);
            add_user(socket.id, username , users);

                //
                // CHAT MESSAGE RECEIVED
                ///////////////////////////
                socket.on('chat_message', function(msg){
                    var message = date.Now() + ' ' + socket.username + ': ' + msg;

                });


                //
                // DISCONNECT
                ///////////////////////////
                socket.on('disconnect', function () {
                    io.emit('notice', socket.username + ' has left the channel.');
                    console.log(socket.username + ' disconnected');


                });
            } else {
                socket.emit('logged_in', 'unsuccessful');
                socket.emit('notice', 'Login was unsuccessful, please refresh the page and try again.');
            }
        });



        socket.emit('message', { message: 'welcome to the chat' });
        socket.on('send', function (data) {
            io.sockets.emit('message', data);
        });
    });
    console.log("Listening on port " + port);


    function add_user(id, username , users){

        var item = {
            'id' : id,
            'username' : username
        }

     var oldItem = _.find(users, {id: id});
              var index = users.indexOf(oldItem);

              if (oldItem) {
                users.splice(index, 1);
                users.unshift(item);
              } else {
                users.unshift(item);
              }





        users = JSON.stringify(users);
            console.log(users)
        io.emit('users_online', users);
    }

    function remove_user(id){
        for(user in users){
            if(users[user]['id'] == id){
                users.splice(users[user], 1);
                break;
            }
        }
        users = JSON.stringify(users);
        io.emit('users_online', users);
    }