Exploring the depths of render.com

Using Socket.io on render.com

mern node.js

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:

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:

web service creation parameters

The NODE_VERSION: environment variable (I use 16.13.1):

define the NODE_VERSION

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

where to find the external url for the server

Onto the frontend

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

static site creation parameters

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:

static site environment variables

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!