Actioncable's websocket on ssl

I was using actioncable to use websocket in my react application interact with RoR backend. Everything was going smooth during the development because I was over http.

Once I deployed to the production, I realized I need a proper path for backend because my React application on port 443 is trying to connect to backend hosted in http port. So I decided to prefix the backend routes with "/api_backend". Afterwards I mapped "/api_backend" url with proxy_pass in Nginx.

So everything was on the SSL, React front end as well as RoR backend.

The problem still persisted. The websocket I used in development is on http. ws:// connections throws errors in frenzy. There are misleading discussion on the internet which told me to change the config in the client browser. Finally I came to realize http connection need to upgrade to websocket connection which can be achieve modifying the header in Ngnix.

        location /api_backend/cable{
                proxy_pass http://127.0.0.1:6001;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
        }

As shown in the above, I was setting the two headers which is "Upgrade" and "Connection". $http_upgrade contains the text "websocket" in my case. And I was setting "Connection" header to the type of "Upgrade". As soon as I saved and restarted the Nginx, the websocket was working on ssl with wss:// protocol.

Photo Credit: Gunfight | N.C. Wyeth (American, 1882-1945)