Websockets to Heroku are giving a 404 on chrome/firefox - javascript

I have my Django application deployed on heroku. It uses websockets, and everything is configured properly. When I go to my site, the websockets fail with WebSocket connection to 'wss://<url>' failed: Error during WebSocket handshake: Unexpected response code: 404. I did some digging and it's apparently due to chrome blocking the websockets? I came across this issue which sounds like what I'm getting, but the answer did not fix it for me.
Can someone explain what's going on here, and potentially how to fix it?

So the solution was nothing to do with heroku. I was using gunicorn to deploy my application, and that does not support websockets, so when the website hit my websocket endpoint gunicorn threw back a 404. I switched to daphne, and added web: daphne <application>.asgi:application --port $PORT --bind 0.0.0.0 to the Procfile, and everything started working. This blog post from Heroku helped me out, most specifically This segment.

try using https://<url> inspite of using wss i came across the same issue when i deployed my node.js application on heroku.
hope this will solve your problem too.

Related

Express-session cause heroku app to throw internal server error

App was totally working locally however after deployment via heroku it started to throw internal server error. Just one time app worked via heroku and then again it started to give internal server error. Then i tried to find the source of error and i found the express-session is crashing my app when it is deployed via heroku.
Edit: App doesn't crash in the middle of the process, it doesn't totally work. No path is working. Every path throws internal server error because of express-session.
Server Codes
Sorry i forgot that i still have this question. I solved the issue. Problem was the session secret. I didn't realize that my .env file is in gitignore file and session was not taking secret from .env so i added a heroku config, named SECRET and that's the solution.

ReactJS could not proxy request from localhost:3000 to localhost:3003

I am writing a SPA using create-react-app and am using an expressjs server as my backend. For development I run my frontend test server on port 3000 and my backend expressjs test server on 3003.
I make many API calls client side using Axios so for development convenience I have defined proxy: "http://localhost:3003" in my package.json
This works fine on my laptop, but when running on my workstation I constantly get the error when accessing my app:
Proxy error: Could not proxy request /sockjs-node/487/wrst1bub/websocket from localhost:3000 to http://localhost:3003/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).
I have no idea where this is coming from and I do not use sockjs in any capacity as far as I know. This is a console error and it does not crash my app but it is very annoying and I would like to get rid of it. Any help is greatly appreciated.
In my case, I was using Firefox and for some reasons, it gives me the same error. I tried to use Chrome and it worked!

Websocket returns status 200 instead of 101 (flask socket.io)

I've done quite a bit of reading around to try and solve this issue but I'm still stuck. My problem is with trying to get the websocket handshake to complete using socket.io client side and flask_socket.io server side.
I can run the flask development server on my local machine using:
app = Flask(__name__)
app.secret_key = 'A0Zr98j/3yX R~XHH!jmN]LWX/,?RT'
socketio = SocketIO(app)
socketio.run(app)
...
and if I point chrome to localhost:5000 and press the button which I have linked to opening a websocket it works fine and chrome network tab shows status 101.
However on uploading the code to a remote machine and again using flask's development server but changing the port to 80,
socketio.run(app,host='0.0.0.0',port=80)
the websocket handshake stops working and gives status 200 instead.
WebSocket connection to 'ws://example.com/socket.io/?EIO=3&transport=websocket&sid=cfb1949b243b42578fe422782a0db359' failed: Error during WebSocket handshake: Unexpected response code: 200
All websocket messages are now sent over xhr polling instead of inside the websocket frame.
I've followed all of the guides I can find on google relating to this but with no success. I was previously using nginx and gunicorn and followed the advice to change the nginx conf to allow upgrade to websockets but that didn't solve the problem. So I simplified to using the flask development server but I still haven't been able to get a successful handshake.
I found a solution after finding a similar problem posted here https://nolanlawson.com/2013/05/31/web-sockets-with-socket-io-node-js-and-nginx-port-80-considered-harmful/#comment-85425.
It turns out many public wifi networks block websockets when they are running on port 80. However often ports 443 and 8080 are not blocked. You can find out which ports are blocked from this website: http://websocketstest.com/. I just moved the address of my websocket from example.com to example.com:8080.
I ran into a similar problem but due to a different reason. When using flask-socketio you have to install gevent-websocket or else it's going to use long-polling and you'll see a lot of 200 responses. Thus, my solution to that problem was just.
pip install gevent-websocket

Config Action Cable for Heroku - Error localhost:3000/cable

I have problem with my app with Action Cable on Heroku:
WebSocket connection to 'ws://localhost:3000/cable' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
My production.rb:
config.action_cable.url = "wss://NAME.herokuapp.com/cable"
config.action_cable.allowed_request_origins = ['https://NAME.herokuapp.com', 'http://NAME.herokuapp.com']
I tried to specify the server in the cable.js as well:
#App ||= {}
App.cable = ActionCable.createConsumer("wss://NAME.herokuapp.com/cable")
I tried to change it in development.rb just in case but nothing helps. The Heroku is still trying to connect to localhost.
Another weird thing that has nothing in common with it I think, is that the app is not able to process some js code like: alert('test') or console.log("haha") despite of some js code works and I tried assets:precompile as well.
In localhost, everything works perfectly. Any idea what can be wrong with heroku and the setting?
While ActionCable was in development, I remember you had to startup 2 servers for the cable connection and for Rails. I don't think that is still needed for the final release.
My guess is that you don't have Redis provisioned on your Heroku instance, whereas in Production, ActionCable relies on Redis for it's server communication.
To fix this, you should do the following:
heroku addons:add redistogo
heroku config | grep REDISTOGO_URL
In your config/cable.yml, set the Redis url to the one given. I guess you should also be able to use ENV['REDISTOGO_URL'] in place of the url.
Let me know if that helps.
If it's working locally but not remotely it may be an SSL problem. Make sure you properly set up an SSL endpoint for the secure websocket (wss):
https://devcenter.heroku.com/articles/ssl-endpoint
Also, there is an excellent blog post on Heroku about how to set up Action Cable: https://blog.heroku.com/real_time_rails_implementing_websockets_in_rails_5_with_action_cable. Alas, the article does not mention the necessity of setting up an SSL endpoint for the Heroku deployment to work.

Kurento Media Server HelloWorld Javascript example webSocket error

Merry Christmas!
I am trying to configure KMS on my Ubuntu 14.04 (64 bit). I could install the KMS server successfully following the guide at https://www.kurento.org/docs/6.0.0/installation_guide.html.
Also, downloaded the Javascript HelloWorld tutorial from https://www.kurento.org/docs/6.0.0/tutorials/js/tutorial-1-helloworld.html. I could run the example successfully on localhost on Google Chrome Version 47.0.2526.106 (64-bit) on the same Ubuntu System.
But, I could not see the local video nor the loop backed video. Only a spinner icon is shown on both the Video placeholders. Consulting the Console log reveals a problem after creating the SDP offer. The error is as described below.
kurento-client.js:21072 WebSocket connection to 'wss://127.0.0.1:8433/kurento' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
I am no expert on web sockets and stuff. Any help on this would really help me to proceed forward.
Note: I am running the example on HTTP, not on HTTPS. I guess that would not be the cause of the problem, though.
Regards,
LazyCoder7
I managed to solve it. I was wrong on my guess though, HTTPS was indeed required in order to make the WebSocket connection ( i was not aware of that part ). Created a certificate file (.pem) (from crt and key file already in the helloworld folder) and configured the KMS server to use the certificate. After this I was able to see myself and the same me in loopback :)
You are following an old version of the documentation. Since Chrome 47, in is mandatory to server pages through HTTPS if you want to use the getUserMedia APi. So we updated all our tutorials, and they now have a self-signed certificate. In case of the JS tutorials, you also need to configure KMS to expose a secure WS signalling connection, as the browser directly connects to the media server to control it.
Please follow the latest version of the documentation here
Be sure that the KMS is running on the port 8433 (not 8888), if you are using docker
docker run -d --name kms -p 8433:8433 kurento/kurento-media-server:trusty-latest

Categories