Nodejs+Expressjs+SocketIO on Heroku gives GET /socket.io/?EIO... 404

I am having problem with setting socketIO 1.1 up to work on Heroku. I'm running Express v4.2. The socketio runs perfectly on localhost. However, on Heroku, it gives this error:

From Heroku log:

2014-09-15T09:40:14.578660+00:00 app[web.1]: GET /socket.io/?EIO=3&transport=polling&t=1410774014583-86 404 6ms - 744b

From browser:

GET http://[mydomainname]/socket.io/?EIO=3&transport=polling&t=1410774080589-97 404 (Not Found) socket.io.js:2680Request.create socket.io.js:2680Request socket.io.js:2614XHR.request socket.io.js:2555XHR.doPoll socket.io.js:2585Polling.poll socket.io.js:2951Polling.doOpen socket.io.js:2895Transport.open socket.io.js:2106Socket.open socket.io.js:1580Socket socket.io.js:1467Socket socket.io.js:1419Manager.open.Manager.connect socket.io.js:272(anonymous function)

I have followed the recommended configurations in Socket IO documentations. Relevant code as follows:

var express = require('express');
/* routes */
var routes = require('./routes/index');
var users = require('./routes/users');

var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var cons = require('consolidate');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('dust', cons.dust);
app.set('view engine', 'dust');

app.use(favicon());
app.use(logger('dev'));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser('hashionhashion'));
app.use(require('less-middleware')(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'public')));

//routing
app.use('/', routes);
app.use('/users', users);


/// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

/// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});



//start the server
var server = require('http').Server(app);

var io = require('socket.io').listen(server);
var ioSockets = {};

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

    ioSockets[socket.id] = socket;

    socket.emit('welcome', {message: socket.id});

    socket.on('disconnect', function(socket) {
        delete ioSockets[socket.id];
    });
});

exports.ioSockets = ioSockets;
module.exports = app;

server.listen(3000, function() {
    console.log('Congrats, nothing broke!! Listening on port %d', server.address().port);
});

In my client file, the script are as follows:

<script src="my_path_to/socket.io.js"></script>
<script>
var socket = io.connect();

var socketId = '';

socket.on('welcome', function (data) {
    socketId = data.message;
});
</script>

I also tried io.connect to "http://localhost", "http://localhost:3000", and my Heroku app domain. All of them produces the same error.

Any help will be greatly appreciated!