Configuring Express 4.0 routes with socket.io

Question

I have created a new Express application. It generated app.js for me and I have then created the following index.js bringing in socket.io:

var app = require('./app');
server=app.listen(3000);

var io = require('socket.io');
var socket = io.listen(server, { log: false });

socket.on('connection', function (client){
    console.log('socket connected!');
});

Can anyone advise how I would access socket.io within the routes files?

For reference, the default generated app.js is below:

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

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

var app = express();

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

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

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

/// catch 404 and forwarding 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: {}
    });
});


module.exports = app;

Solution 1

SocketIO does not work with routes it works with sockets.

That said you might want to use express-io instead as this specially made for this or if you are building a realtime web app then try using sailsjs which already has socketIO integrated to it.

Do this to your main app.js

app = require('express.io')()
app.http().io()

app.listen(7076)

Then on your routes do something like:

app.get('/', function(req, res) {
    // Do normal req and res here
    // Forward to realtime route
    req.io.route('hello')
})

// This realtime route will handle the realtime request
app.io.route('hello', function(req) {
    req.io.broadcast('hello visitor');
})

See the express-io documentation here.

Or you can do this if you really want to stick with express + socketio

On your app.js

server = http.createServer(app)
io = require('socket.io').listen(server)
require('.sockets')(io);

Then create a file sockets.js

module.exports = function(io) {

    io.sockets.on('connection', function (socket) {
        socket.on('captain', function(data) {
            console.log(data);
            socket.emit('Hello');
        });
    });
};

You can then call that to your routes/controllers.

Solution 2

The route:

const Router = require('express').Router

const router = new Router();

router.get('/my-route', (req, res, next) => {
    console.log(req.app.locals.io) //io object
    const io = req.app.locals.io
    io.emit('my event', { my: 'data' }) //emit to everyone
    res.send("OK")
});

module.exports = router

The main file:

const app = require('express')()
const server = require('http').Server(app);
const io = require('socket.io')(server)
const myroute = require("./route") //route file dir

app.use(myroute);

server.listen(3000, () => {
    console.log('¡Usando el puerto 3000!');
});

app.locals.io = io

Comments

[Ben]

Thank you, very helpful!

[Chetan Bhasin]

Since express.io uses an older version of express I suggest you also have a look at the following way: stackoverflow.com/questions/24222483/… Although I do not understand clearly what the author is trying to explain in the answer, but I would like for more people to explore and help solve this topic for the better.

[Markus Pint]

What does it mean "You can then call that to your routes/controllers." ?

[Dirk]

Express.io seems to be unmaintained.

[stevek-pro]

Please give complete examle with routes and controllers.

[Nick Pineda]

I don't think the express + socketio example will work because in order to do it this way you access the socket.io server (io) in every file you are trying to use sockets.js

[Lanti]

It would be nice to see a full example with calling in a router with a form in the templates.

[Armando Rueda]

expressjs.com/es/api.html app.locals is an empty object where you can store variables, i just simply assigned io to the socket.io dependency

[Chukwu3meka]

how do you connect from the client if it's in a separate location

[Armando Rueda]

just use ws://localhost:3000 in your client implementation

[Herii]

It would be better if you would have posted an example instead of a link. That URL takes us to something that assumes we are using an express app generator, of course we could only take the important stuff and use it in our project; In my opinion it could be better to just post a generic working example.