title: WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400
body: <p>I am trying to integrate Socket.io with Angular and I'm having difficulties making a connection from the client-side to the server. I've looked through other related questions but my issue is happening locally, so there's no web server in the middle.</p>
  
  <p>This is what my server code looks like:</p>
  
  <pre class="lang-javascript prettyprint-override"><code>const app = express();
  const server = http.createServer(app);
  const io = require('socket.io').listen(server);
  
  io.on('connection', function(socket) {
    socket.emit('greet', { hello: 'Hey, Mr.Client!' });
  
    socket.on('respond', function(data) {
      console.log(data);
    });
    socket.on('disconnect', function() {
      console.log('Socket disconnected');
    });
  });
  </code></pre>
  
  <p>I'm loading the client side JavaScript files using Grunt in the following order:</p>
  
  <pre><code>dist: {
      src: [
          public/bower_components/angular/angular.min.js,
          ...
          public/bower_components/socket.io-client/dist/socket.io.min.js,
          public/bower_components/angular-socket-io/socket.min.js,
          ...
      ]
  }
  </code></pre>
  
  <p>Then in my controller:</p>
  
  <pre class="lang-javascript prettyprint-override"><code>function MyController($scope) {
  
      let socket = io.connect(window.location.href);
      socket.connect('http://localhost:3000');
      socket.on('greet', function(data) {
        console.log(data);
        socket.emit('respond', { message: 'Hello to you too, Mr.Server!' });
      });
  
      ...
  }
  </code></pre>
  
  <p>Before actually using the <code>btford/angular-socket-io</code> library, I want to make sure that I can get a connection correctly, but I get the following error in the console:</p>
  
  <p><a href="https://i.stack.imgur.com/dpkwe.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dpkwe.png" alt="socket io connection error message"></a></p>
  
  <p>The interesting thing is that if I restart the Node.js server process, it does manage to send the message but using polling instead of websockets.</p>
  
  <p><a href="https://i.stack.imgur.com/tImrE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tImrE.png" alt="after restart"></a></p>
  
  <p><a href="https://i.stack.imgur.com/mxZjR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mxZjR.png" alt="polling message"></a></p>
  
  <p>I tried all sorts of different options in the socket.connect call, but nothing worked.</p>
  
  <p>Any help would be appreciated.</p>
  
  <hr>
  
  <h2>UPDATE (30/12/2016):</h2>
  
  <p>I just realized that websockets is working partially. I see a 101 Switching Protocols request in the Chrome developer console. However the only frames I see there are the engine.io protocol packets (ping, pong). However my application socket messages still fall back to polling for some reason...</p>
  
  <p><a href="https://i.stack.imgur.com/woDCZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/woDCZ.png" alt="engine.io packets"></a> </p>