Skip to content

Instantly share code, notes, and snippets.

@patrickbrandt
Last active August 30, 2023 21:28
Show Gist options
  • Save patrickbrandt/1cd98a02c42e9e22a5a9 to your computer and use it in GitHub Desktop.
Save patrickbrandt/1cd98a02c42e9e22a5a9 to your computer and use it in GitHub Desktop.
Simple socket.io integration with Express + Angular

Socket.io integration between and Express and Angular app is a breeze. I'll outline the Express implementation first, then outline Angular integration.

Express + socket.io

Reference socket.io in layout.jade

npm install socket.io and then reference in your layout.jade file:

doctype html
html(ng-app="angular_example")
  head
    title= title
    link(rel='stylesheet', href='/bootstrap/dist/css/bootstrap.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    div(class="container-fluid")
        block content    
        
    script(type='text/javascript' src='/socket.io/socket.io.js')
    script(type='text/javascript' src='/angular/angular.js')
    script(type='text/javascript' src='/angular-resource/angular-resource.js')
    script(type='text/javascript' src='/angular-route/angular-route.js')
    script(type='text/javascript' src='/javascripts/app.js')
    script(type='text/javascript' src='/javascripts/controllers.js')
    script(type='text/javascript' src='/javascripts/services.js')

Create socket.io middleware

Include the following code in your app.js module (other standard Express module dependancies and middleware left out for brevity):

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

var app = express();

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Setup custom app middleware
 */

/* setup socket.io */
io = io(server);
app.use(function(req, res, next) {
  req.io = io;
  next();
});
io.on('connection', function(socket) {
  //log.info('socket.io connection made');
  console.log('socket.io connection made');
});

server.listen('3000');

You can now emit socket.io events from any route handler:

router.post('/', function(req, res, next) {
  req.io.emit('some event');
  //do some stuff
  req.io.emit("some other event - now that we've done stuff");
});
@patrickbrandt
Copy link
Author

Note for me; good article on Angular providers: https://gist.github.com/demisx/9605099

@HungParfait
Copy link

Please help me, I don't know why you do:
app.use(function(req, res, next) { req.io = io; next(); });
io is assigned to req and io can only be used when client makes HTTP request POST to route '/'. Why don't we use socket.emit('post-event') in client instead of HTTP POST request. Thank you!!! And if client makes HTTP POST request, is a new TCP/IP connection established?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment