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

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.

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.

What does io.connect('http://localhost:4000) mean?

I am building an application using react.js and socket.io, I have my backend code for the socket.io server in one folder and the client/ frontend react.js code in a separate folder. I have it set up to where the server is listening on local host:4000 and the client is listening on 3000, I have connected the front end and back end in my app.js using this line of code..
const socket = io.connect('http://localhost:4000');
I am curious as to what this means. does it mean that when I deploy my website that it will be hosting my server from my computer? Does it mean that it will be hosting the sockets from the client's computers? is the localhost:4000 used for testing purposes and will need to be changed later upon deployment of the website? If none of these are correct, any explanation would be greatly appreciated. If my code is fine the way it is and will not need to be changed upon deployment of my website, please let me know.
Thank you to anyone who can help!!!
does it mean that when I deploy my website that it will be hosting my server from my computer?
It means it will try to connect to a Socket.io server running on the same computer as the browser is running on.
This will usually fail. (Your development environment is an exception because you are running both browser and server on the same computer).
is the localhost:4000 used for testing purposes and will need to be changed later upon deployment of the website?
Yes.
Yes, you will need to change it when you deploy it to your site.
'http://localhost:4000' is an absolute reference meaning it will auto resolve to the localhost environment. It is also advisable to switch to https for a more secure connection.

Websockets to Heroku are giving a 404 on chrome/firefox

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.

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!

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