title: Websockets with Node JS, Express, Heroku: Adding routes breaks web socket connection
body: <p>First time SO post! </p>
  
  <p>I am a jode js newbie and looking for some help while I am following the the Heroku tutorial here: <a href="https://devcenter.heroku.com/articles/node-websockets" rel="nofollow noreferrer">https://devcenter.heroku.com/articles/node-websockets</a> (option 1)</p>
  
  <p>I am creating an app that will use web sockets with node.js, Heroku, and express. When I run the server.js code straight as it is from the example above it works.  Now I am trying to add routes and it breaks the web socket connection for some reason.  </p>
  
  <p>server.js:</p>
  
  <pre><code>'use strict';
  
  const express = require('express');
  const SocketServer = require('ws').Server;
  const path = require('path');
  
  const PORT = process.env.PORT || 3000;
  const INDEX = path.join(__dirname, 'index.html');
  
  const server = express()
  
  const ADMIN= path.join(__dirname, +'/admin/' + 'adminPage.html');
  
  const wss = new SocketServer({ server });
  
  
    var router = express.Router();
  
   var app=express();
      // home page route
      router.get('/', function(req, res) {
          res.sendFile(INDEX);
      });
      // admin page route
      router.get('/admin', function(req, res) {
          res.sendFile(ADMIN);
      });
      // apply the routes to our application
      app.use(express.static('public'))
      app.use('/', router);
  
      app.listen(PORT, () =&gt; console.log(`Listening on ${ PORT }`));
  
      wss.on('connection', (ws) =&gt; {
        console.log('Client connected');
        ws.on('close', () =&gt; console.log('Client disconnected'));
      });
  
  setInterval(() =&gt; {
      wss.clients.forEach((client) =&gt; {
        client.send(new Date().toTimeString());
      });
    }, 1000);
  </code></pre>
  
  <p>Current Index.html:</p>
  
  <pre><code>  &lt;p id='server-time'&gt;&lt;/p&gt;
      &lt;script&gt;
        var HOST = location.origin.replace(/^http/, 'ws')
        var ws = new WebSocket(HOST);
        var el = document.getElementById('server-time');
        ws.onmessage = function (event) {
          el.innerHTML = 'Server time: ' + event.data;
        };
      &lt;/script&gt;
  </code></pre>
  
  <p>The redirect to the admin page works, but the index.html page returns the following error:</p>
  
  <pre><code>**WebSocket connection to 'ws://localhost:3000/' failed: Error during WebSocket handshake: Unexpected response code: 200**
  </code></pre>
  
  <p>I am sure this is a simple mistake but I just can't find it - appreciate anyones help!</p>