My app won’t connect to my socket.io server!

Do I need to set a wss:// URL?

Fighting with Socket.io on node.js and render.com?

Render’s infrastructure absolutely supports websockets in node.js via websocket.io without much fuss if you’re set up properly. I’ve put together a sample client and server you can have that ties together the two essential pieces of functionality in a web app: websockets working alongside standed http calls.

What you’ll need:

• A static site (to deploy a react app client)
• A web service (to deploy a node.js server)
• My example app repo: https://github.com/mdgale/socketio-render-example

Start with the server

We will create a new Web Service for the server. The only environment variable it needs is a NODE_VERSION so don’t forget to specify it. Otherwise, the only configuration needed is to tell render where all of our files are. Looking at the server/package.json My server build does no bundling, so you can simply deploy the service with parameters like these:

The NODE_VERSION: environment variable (I use 16.13.1):

Once that’s deployed, you need the external URL from the dashboard:

Onto the frontend

This time we are deploying a Static Site, so the build is slightly different since our build is running yarn build:

We also have an additional environment variable to pass: create an environment variable called REACT_APP_BACKEND_URL and assign it to the URL from your server’s dashboard page:

Note that this example app has no navigation. As a reminder, if navigation is something your app needs, you’ll need to follow render’s instructions for the create react app client-side routing and set up some url rewrites.

With this setup and configuration, the socket.io library takes care of of negotiating the websocket protocols and abstracts away the hard stuff. For you client and server, you just have to use .on(...) and .emit(...) and you’re good to go!