WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400

Question

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.

This is what my server code looks like:

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'); }); });

I'm loading the client side JavaScript files using Grunt in the following order:

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, ... ] }

Then in my controller:

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!' }); }); ... }

Before actually using the btford/angular-socket-io library, I want to make sure that I can get a connection correctly, but I get the following error in the console:

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.

I tried all sorts of different options in the socket.connect call, but nothing worked.

Any help would be appreciated.

UPDATE (30/12/2016):

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...

Hey digit, nope, no web servers as of yet. I read about having to set the Upgrade header for it to work, but I'm just developing locally at the moment. — ashe540
– ashe540, Commented Dec 29, 2016 at 22:22
I have this problem with pusher and laravel. I dont know why but i get this error :(( — Ali
– Ali, Commented Jul 31, 2020 at 10:51

ashe540 · Accepted Answer · 2016-12-30 12:37:14Z

Problem solved! I just figured out how to solve the issue, but I would still like to know if this is normal behavior or not.

It seems that even though the Websocket connection establishes correctly (indicated by the 101 Switching Protocols request), it still defaults to long-polling. The fix was as simple as adding this option to the Socket.io connection function:

{transports: ['websocket']}

So the code finally looks like this:

const app = express(); const server = http.createServer(app); var io = require('socket.io')(server); io.on('connection', function(socket) { console.log('connected socket!'); socket.on('greet', function(data) { console.log(data); socket.emit('respond', { hello: 'Hey, Mr.Client!' }); }); socket.on('disconnect', function() { console.log('Socket disconnected'); }); });

and on the client:

var socket = io('ws://localhost:3000', {transports: ['websocket']}); socket.on('connect', function () { console.log('connected!'); socket.emit('greet', { message: 'Hello Mr.Server!' }); }); socket.on('respond', function (data) { console.log(data); });

And the messages now appear as frames:

working websockets

This Github issue pointed me in the right direction. Thanks to everyone who helped out!

How did you get chrome to show the frames like that? When I click on a sockIO request it does not show a tab for Frames
When the browser initiates the connection it sends an upgrade request to which the server responds with a 101 Switching protocols. You have to make sure that you look for this request in the Network tab, as it will be the one that shows the frames sent between the two entities.
Yes I've navigated there. There are several cases where the "frames" tab is not there in the Network tab.
Note that adding this option effectively removes long-polling fallback, which is one of the reasons socket.io is so robust in the first place. See https://socket.io/docs/using-multiple-nodes/.

Abhijeet_IXR · Accepted Answer · 2018-01-04 13:14:33Z

65

This worked for me with Nginx, Node server and Angular 4

Edit your nginx web server config file as:

server { listen 80; server_name 52.xx.xxx.xx; location / { proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header Host $http_host; proxy_pass "http://127.0.0.1:4200"; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; }

answered Jan 4, 2018 at 13:14

Abhijeet_IXR

9477 silver badges15 bronze badges

7 Comments

John Scott Stensland Over a year ago

even though the OP is asking about a local issue where there is no nginx reverse proxy involved this answer is the correct nginx setting when its in play

JDavis Over a year ago

Adding the upgrade headers for my configuration was what I needed. proxy_http_version 1.1; caused the Nginx service to fail to start.

JoshuaTree Over a year ago

For those who would like more info regarding nginx header management: digitalocean.com/community/tutorials/…

JoshuaTree Over a year ago

And for those wanting to know why the upgrade header? nginx.com/blog/websocket-nginx

Cybersupernova Over a year ago

the last two lines for upgrade were missing from mine.

|

Kathandrax · Accepted Answer · 2020-12-28 10:45:09Z

The currently accepted solution is misleading.

According to the official documentation, adding the transports: [ 'websocket' ] option effectively removes the ability to fallback to long-polling when the websocket connection cannot be established. This option is what makes socket.io so robust in the first place because it can adapt to many scenarios.

In that particular case where one wishes to solely rely on websockets, directly using the WebSocket API is recommended.

For other cases (supposedly most users), this is most likely a reverse proxy/server configuration problem.

The official documentation suggests the following depending on your environment:

NginX configuration

http { server { listen 3000; server_name io.yourhost.com; location / { proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $host; proxy_pass http://nodes; # enable WebSockets proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } } upstream nodes { # enable sticky session based on IP ip_hash; server app01:3000; server app02:3000; server app03:3000; } }

Apache HTTPD configuration

Header add Set-Cookie "SERVERID=sticky.%{BALANCER_WORKER_ROUTE}e; path=/" env=BALANCER_ROUTE_CHANGED <Proxy "balancer://nodes_polling"> BalancerMember "http://app01:3000" route=app01 BalancerMember "http://app02:3000" route=app02 BalancerMember "http://app03:3000" route=app03 ProxySet stickysession=SERVERID </Proxy> <Proxy "balancer://nodes_ws"> BalancerMember "ws://app01:3000" route=app01 BalancerMember "ws://app02:3000" route=app02 BalancerMember "ws://app03:3000" route=app03 ProxySet stickysession=SERVERID </Proxy> RewriteEngine On RewriteCond %{HTTP:Upgrade} =websocket [NC] RewriteRule /(.*) balancer://nodes_ws/$1 [P,L] RewriteCond %{HTTP:Upgrade} !=websocket [NC] RewriteRule /(.*) balancer://nodes_polling/$1 [P,L] ProxyTimeout 3

HAProxy configuration

listen chat bind *:80 default_backend nodes backend nodes option httpchk HEAD /health http-check expect status 200 cookie io prefix indirect nocache # using the `io` cookie set upon handshake server app01 app01:3000 check cookie app01 server app02 app02:3000 check cookie app02 server app03 app03:3000 check cookie app03

Also worth reading this on upgrading connections in HAProxy.

For more details please refer to the official documentation link above.

EDIT:

Varnish (source here)

sub vcl_recv { if (req.http.upgrade ~ "(?i)websocket") { return (pipe); } } sub vcl_pipe { if (req.http.upgrade) { set bereq.http.upgrade = req.http.upgrade; set bereq.http.connection = req.http.connection; } }

My websocket connection upgrade fails. Don't know why. I have this config for nginx location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwared-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; proxy_pass http://127.0.0.1:3000; proxy_redirect off; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; client_max_body_size 100M; }
Sorry for the late response @invider @Norbert. Have you fixed your problem? I see there's a typo in proxy_set_header X-Forwared-For $proxy_add_x_forwarded_for; - it should be X-Forwarded-For. Also have you double-checked whether your proxy_pass target is reachable (and specifically via port 3000)?

Abdelhamid Hammami · Accepted Answer · 2019-04-14 19:46:07Z

14

I solved this by changing transports from 'websocket' to 'polling'

 var socket = io.connect('xxx.xxx.xxx.xxx:8000', { transports: ['polling'] });

answered Apr 14, 2019 at 19:46

Abdelhamid Hammami

1651 silver badge4 bronze badges

1 Comment

sofly Over a year ago

This is more of a band-aid than a real fix. Socket.io uses a poll to connect initially then "upgrades" to more reliable transports (i.e. websockets). This answer forces socketio to only use polling (and not more efficient transports) which will fix the error but isn't a long-term solution if you prefer to avoid endless polling in larger apps. I believe socketio knows to fail to polling if the upgrade fails as well, so you're more or less saving yourself the console error.

halfer · Accepted Answer · 2017-05-02 18:00:15Z

Judging from the messages you send via Socket.IO socket.emit('greet', { hello: 'Hey, Mr.Client!' });, it seems that you are using the hackathon-starter boilerplate. If so, the issue might be that express-status-monitor module is creating its own socket.io instance, as per: https://github.com/RafalWilinski/express-status-monitor#using-module-with-socketio-in-project

You can either:

Remove that module

Pass in your socket.io instance and port as websocket when you create the expressStatusMonitor instance like below:

const server = require('http').Server(app); const io = require('socket.io')(server); ... app.use(expressStatusMonitor({ websocket: io, port: app.get('port') }));

Hitesh Subnani · Accepted Answer · 2020-07-27 09:21:13Z

Had the same issue, my app is behind nginx. Making these changes to my Nginx config removed the error.

location / { proxy_pass http://localhost:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; }

Tejas Tank · Accepted Answer · 2023-10-11 07:55:24Z

I had faced same issues, I refined apache2 virtual host entery and got success.

Note: on server I had succesful installed and working on 9001 port without any issue. This guide line for apache2 only no relavence with nginx, this answer for apache2+etherpad lovers.

<VirtualHost *:80> ServerName pad.tejastank.com ServerAlias pad.tejastank.com ServerAdmin [email protected] LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so LoadModule headers_module /usr/lib/apache2/modules/mod_headers.so LoadModule deflate_module /usr/lib/apache2/modules/mod_deflate.so ProxyVia On ProxyRequests Off ProxyPreserveHost on <Location /> ProxyPass http://localhost:9001/ retry=0 timeout=30 ProxyPassReverse http://localhost:9001/ </Location> <Location /socket.io> # This is needed to handle the websocket transport through the proxy, since # etherpad does not use a specific sub-folder, such as /ws/ to handle this kind of traffic. # Taken from https://github.com/ether/etherpad-lite/issues/2318#issuecomment-63548542 # Thanks to beaugunderson for the semantics RewriteEngine On RewriteCond %{QUERY_STRING} transport=websocket [NC] RewriteRule /(.*) ws://localhost:9001/socket.io/$1 [P,L] ProxyPass http://localhost:9001/socket.io retry=0 timeout=30 ProxyPassReverse http://localhost:9001/socket.io </Location> <Proxy *> Options FollowSymLinks MultiViews AllowOverride All Order allow,deny allow from all </Proxy> </VirtualHost>

Advance tips: Please with help of a2enmod enable all mod of apache2

Restart apache2 than will get effect. But obvious a2ensite to enable site required.

Note: currently my backend system do not have https, so I keep http, in case your backend is already enable with HTTPS then use https:// for backend. In case your backend already in HTTPS I am worries for overhead load on HTTPS, My suggestion is to backend should be in http when private server under tidy security. Decision is yours.

I changed all of your http:// to https:// and ws:// to wss:// -- works fine. thank you so much for sharing this. Using localhost:### in this context is very interesting, i have never seen that before.
Yea this worked for me. Thanks. The rewrite rules was the problem for me maybe
That worked for me - the <Location /socket.io> I did not wrap my settings in that... but yeah helped a lot. Thanks Dude!

TeaMonkie · Accepted Answer · 2016-12-29 14:21:59Z

In your controller, you are using an http scheme, but I think you should be using a ws scheme, as you are using websockets. Try to use ws://localhost:3000 in your connect function.

Hey Mattia, no luck. I tried using ws instead of http but the issue persists. Any other ideas?

Heartbit · Accepted Answer · 2016-12-29 16:45:27Z

I think you should define your origins for client side as bellow:

//server.js const socket = require('socket.io'); const app = require('express')(); const server = app.listen('port'); const io = socket().attach(server); io.origins("your_domain:port www.your_domain:port your_IP:port your_domain:*") io.on('connection', (socket) => { console.log('connected a new client'); }); //client.js var socket = io('ws://:port');

extend your origins by adding other patterns like http://your_IP:port or http://your_domain:port
Nope, unfortunately that didn't seem to do the trick. Any other ideas why this could be rejecting the use of websockets with a 400 Bad Request? What boggles me is that this is all in localhost, so there shouldn't be any problem.

martinedwards · Accepted Answer · 2019-03-22 04:49:27Z

You're using port 3000 on the client-side. I'd hazard a guess that's the Angular port and not the server port? It should be connecting to the server port.

Đức · Accepted Answer · 2020-12-20 09:28:57Z

The problem for me was not got the port from process.env.PORT it is very important because Heroku and other services properly do a random port numbers to use.

So that is the code that work for me eventuly :

var app = require('express')(); var http = require('http').createServer(app); const serverPort = process.env.PORT ; //<----- important const io = require('socket.io')(http,{ cors: { origin: '*', methods: 'GET,PUT,POST,DELETE,OPTIONS'.split(','), credentials: true } }); http.listen(serverPort,()=>{ console.log(`server listening on port ${serverPort}`) })

pav · Accepted Answer · 2021-04-28 17:07:49Z

I had the same error witk socket.io on node.js but the reason was quite silly. There wasn't all socket.io's dependencies installed correctly, namely package base64id was missed

Álvaro Andrade · Accepted Answer · 2022-07-01 15:40:16Z

Including transports: ['websocket'] is not the best approach as it removes Sockt.io functionality from suiting any scenario.

In my case using Nodejs + Nginx + Vuejs/Vite(Front) I managed to solve it by configuring the reverse proxy in the site configuration in Nginx.

http { server { listen 80; root /var/www/html; // <---- start ----> location /socket.io/ { // <--- Set your custom path proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $host; proxy_pass http://localhost:3000; // <--- Set your Port proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } // <---- End ----> } }

You can find references on this issue on the Socket.io website or on Nginx

piyush yadav · Accepted Answer · 2022-10-27 15:04:04Z

If you tried every option given above then there is no problem with your code, try to stop the ad blocker of your browser. It worked for me

My Output after disabling blocker Output

My server Server

djmonki · Accepted Answer · 2023-07-06 20:34:24Z

In my similar scenario, express-status-monitor was installed to remove and remediate this error

The following are the steps / settings / configuration to install express-status-monitor:

npm i express-status-monitor --save

const expressStatusMonitor = require('express-status-monitor'); app.use(expressStatusMonitor({ websocket: io, port: app.get('port') }));

LW001 · Accepted Answer · 2023-08-05 20:55:04Z

If you're using flask, gunicorn and nginx as your reverse proxy, configuring adding these options under the endpoint where socket.io is being used is not enough.

This is what I mean, consider that you have an endpoint '/chat' configured as follows:

location /chat/ { proxy_pass http://backend; # Enable websockets proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; }

After I did this, I still kept on encountering the error: WebSocket connection to 'ws://x.x.x.x/socket.io/?EIO=4&transport=websocket&sid=LNcNgeauE7z6dYBiAAAK' failed: Error during WebSocket handshake: Unexpected response code: 200.

To solve this, I added another endpoint in my conf i.e.,

location /socket.io/ { proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $host; proxy_pass http://localhost:3000; # Remember to change to your configured port proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; }

After adding and configuring this endpoint, I did not get a single ws error.

Further references: http://nginx.org/en/docs/http/websocket.html

Mamun Hasan · Accepted Answer · 2019-04-03 06:12:38Z

After using following load balancer setting my problem solved for wss but for ws problem still exists for specific one ISP.

calssic-load-balancer

David · Accepted Answer · 2019-08-31 12:32:58Z

I solved this by removing io.listen(server);. I started running into this error when I started integrating passport.socketio and using passport middleware.

Rizky Yoga Oktora · Accepted Answer · 2020-07-27 09:13:57Z

if you are using httpd/apache, you can add a file something like ws.conf and add this code to it. Also, this solution can proxy something like this "http://localhost:6001/socket.io" to just this "http://localhost/socket.io"

<VirtualHost *:80> RewriteEngine on #redirect WebSocket RewriteCond %{REQUEST_URI} ^/socket.io [NC] RewriteCond %{QUERY_STRING} transport=websocket [NC] RewriteRule /(.*) ws://localhost:6001/$1 [P,L] ProxyPass /socket.io http://localhost:6001/socket.io ProxyPassReverse /socket.io http://localhost:6001/socket.io </VirtualHost>

Ben · Accepted Answer · 2020-09-14 18:52:34Z

Using Apollo Server 2.

Per https://github.com/apollographql/apollo-client/issues/4778#issuecomment-509638071, this solved my problem:

try 'ws://localhost:4000/graphql'

...since incoming and outgoing requests now use the same address.

Om Fuke · Accepted Answer · 2021-03-08 13:15:20Z

my problem was with server side

const app = require("express")(); const http = require("http").Server(app); const io = require("socket.io")(http);

listen with

http.listen(PORT,()=> console.log('listening'))

it was giving me error when i did

app.listen(......)

Ayush Jha · Accepted Answer · 2023-11-22 15:19:40Z

0

Make sure you tick hide network box on console

answered Nov 22, 2023 at 15:19

Ayush Jha

991 silver badge1 bronze badge

Comments

dotNET · Accepted Answer · 2025-09-23 12:35:30Z

I was facing this in Vue 3 + Vite project. In my case, adding the following setting (for HMR) fixed the issue:

server: { port: 3005, host: true, hmr: { host: 'YOUR_DOMAIN', // 👈 must match your browser URL protocol: 'wss', port: 3005 } },

Collectives™ on Stack Overflow

WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400

UPDATE (30/12/2016):

23 Answers 23

6 Comments

This worked for me with Nginx, Node server and Angular 4

7 Comments

NginX configuration

Apache HTTPD configuration

HAProxy configuration

Varnish (source here)

3 Comments

1 Comment

Comments

Comments

4 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE (30/12/2016):

23 Answers 23

6 Comments

This worked for me with Nginx, Node server and Angular 4

7 Comments

NginX configuration

Apache HTTPD configuration

HAProxy configuration

Varnish (source here)

3 Comments

1 Comment

Comments

Comments

4 Comments

1 Comment

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related