title: Socket.io http://localhost:3000/socket.io/socket.io.js 404 (Not Found) - How to configure socket.IO - nodejs, apache2, websockets
body: <p>Ok im having problems yet again with socket.io and express. When I run my node js application it begins to build before hitting an error " GET <a href="http://localhost:3000/socket.io/socket.io.js" rel="nofollow noreferrer">http://localhost:3000/socket.io/socket.io.js</a> 404 (Not Found) " and "Uncaught ReferenceError: io is not defined" This is my second time working with web sockets and receiving the same error. For the previous app I fixed this problem by setting up a reverse proxy on my apache server. It looked like this;</p>
  
  <pre><code>ProxyPass /socket.io http://localhost:3000/socket.io
  </code></pre>
  
  <p>However for current nodejs app this is not fixing the issue. The main difference between these two applications is that the current app does not start working with socket.io until the user directs themself to the localhost:3000/bomber-kids-online game page. The current app is an extension of the first app aka this nodejs app provides a website along with my previous app which is a game hosted at zEyeland.com/bomber-kids-online.</p>
  
  <p>Here is a look at my js file that sends the browser the proper html file to load:</p>
  
  <pre><code>var app = require('express')();
  var http = require('http').Server(app);
  var io = require('socket.io')(http);
  var express = require('express');
  var router = express.Router();
  
  var updatedMAP;
  var updatedOBJECTS;
  
  router.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
  });
  
  io.on('connection', function(socket){
    console.log("a user connected");
  
    socket.on('sendNoramlBomb', function(xPosition, yPosition, power){
  
    socket.broadcast.emit('sendNoramlBomb', xPosition, yPosition, 
  power);
    });
    socket.on('sendRedBomb', function(xPosition, yPosition, power){
  
      socket.broadcast.emit('sendRedBomb', xPosition, yPosition, power);
  });
    socket.on('sendBlueBomb', function(xPosition, yPosition, power){
  
      socket.broadcast.emit('sendBlueBomb', xPosition, yPosition, 
  power);
    });
    socket.on('sendGreyBomb', function(xPosition, yPosition, power){
  
      socket.broadcast.emit('sendGreyBomb', xPosition, yPosition, 
  power);
    });
    socket.on('sendGreenBomb', function(xPosition, yPosition, power){
  
      socket.broadcast.emit('sendGreenBomb', xPosition, yPosition, 
  power);
    });
  
    socket.on('sendPlayer', function(locationY, locationX, direction){
  
  
      io.emit('sendPlayer',locationY, locationX, direction);
    });
  
    socket.on('chat message', function(msg){
     io.emit('chat message', msg);
   });
  
   socket.on('disconnect', function(){
     console.log("user disconnected");
       });
     });
  
  //http.listen(3000, function(){
  // console.log('listening on *:3000');
  //});
  
  module.exports = router;
  </code></pre>
  
  <p>This is the apache configuration for my current project </p>
  
  <pre><code>    ProxyPass        /socket.io http://localhost:3000/bomber-kids-online/socket.io
      ProxyPassReverse /socket.io http://localhost:3000/bomber-kids-online/socket.io
  
  
      &lt;Proxy *&gt;
          Order deny,allow
      Allow from all 
      &lt;/Proxy&gt;    
  ProxyRequests Off
  ProxyPreserveHost On
  
  ProxyPass    / http://localhost:3000/
  ProxyPassReverse / http://localhost:3000/
  </code></pre>
  
  <p>So to recap on whats going on. Im trying to run a nodejs game that uses websockets. When visit my game on website at localhost:3000/bomber-kids-online it get an ( GET  <a href="http://localhost:3000/socket.io/socket.io.js" rel="nofollow noreferrer">http://localhost:3000/socket.io/socket.io.js</a> 404 (Not Found) ) How do i fix this issue? My reverse proxy will not seem to fix it this time. You can view a working version of my game at zeyeland.com/bomber-kids-online. My current project uses the exact same html and javascript files to run. However by examining my reverseProxy above you will notice that in my current project the game is not being accessed from localhost:3000 directly but from a route which is provided from another js file on server. </p>
  
  <p>Here is how my app first js file looks like;</p>
  
  <pre><code> var createError = require('http-errors');
   var express = require('express');
   var path = require('path');
   var cookieParser = require('cookie-parser');
   var logger = require('morgan');
  
   var indexRouter = require('./routes/index');
   var usersRouter = require('./routes/users');
   var bomberKidsRouter = require('./routes/games/bomber-kids-online- 
  game');
  
   var app = express();
  
   // view engine setup
   app.set('views', path.join(__dirname, 'views'));
   app.set('view engine', 'pug');
  
   app.use(logger('dev'));
   app.use(express.json());
   app.use(express.urlencoded({ extended: false }));
   app.use(cookieParser());
   app.use(express.static(path.join(__dirname, 'public')));
  
   app.use('/', indexRouter);
   app.use('/users', usersRouter);
   app.use('/bomber-kids-online', bomberKidsRouter);
  
   // catch 404 and forward to error handler
   app.use(function(req, res, next) {
   next(createError(404));
   });
  
   // error handler
   app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
   res.locals.error = req.app.get('env') === 'development' ? err : {};
  
   // render the error page
   res.status(err.status || 500);
  res.render('error');
   });
  
   module.exports = app;
  </code></pre>