We’re excited to announce that WebSocket functionality is now available on Heroku in public beta. We can’t wait to see the powerful and creative real-time apps you’ll build. In this post, we show how to get up and running with WebSockets and demonstrate the functionality with two sample apps you can get on GitHub.
Editor's Note: WebSockets support is now Generally Available. The heroku labs:enable websockets command is no longer required for the example app below.
Getting Started
For full documentation of WebSocket support on Heroku, visit the Dev Center.
WebSocket functionality is available as part of Heroku Labs. First make sure you have the Heroku CLI installed. Then enable the WebSocket feature:
$ heroku labs:enable websockets -a myapp
Enabling websockets for myapp... done
WARNING: This feature is experimental and may change or be removed without notice.
For more information see: https://devcenter.heroku.com/articles/heroku-labs-websockets
Congratulations, you’re now ready to build and deploy real-time apps on Heroku leveraging WebSockets.
Please note: When the websockets labs feature is enabled for your app, the DNS record for your herokuapp.com domain is updated to point at a WebSocket-capable endpoint. However, once WebSocket functionality leaves public beta, all apps and endpoints will support WebSocket functionality automatically.
Example WebSocket Apps
It’s easy to get up and running experimenting with WebSockets on Heroku. Two very simple sample apps are available for you to clone and deploy on Heroku: A Node.js app using the ws WebSocket implementation and a Ruby app using the faye WebSocket implementation.
This is all it takes to get the Node.js WebSocket app running on Heroku:
$ git clone git@github.com:heroku-examples/node-ws-test.git
Cloning into 'node-ws-test'...
$ cd node-ws-test
$ heroku create
Creating fathomless-hamlet-4092... done
http://fathomless-hamlet-4092.herokuapp.com/ | git@heroku.com:fathomless-hamlet-4092.git
Git remote heroku added
$ heroku labs:enable websockets
Enabling websockets for fathomless-hamlet-4092... done
WARNING: This feature is experimental and may change or be removed without notice.
For more information see: https://devcenter.heroku.com/articles/heroku-labs-websockets
$ git push heroku master
Counting objects: 12, done.
...
-----> Node.js app detected
...
-----> Launching... done, v4
http://fathomless-hamlet-4092.herokuapp.com deployed to Heroku
$ heroku open
Opening fathomless-hamlet-4092... done
You should see an auto-updating list of timestamps in your browser. The timestamp value is captured on the server side (your dyno) and sent via a WebSocket connection to the client. Client-side JavaScript running in your browser updates the DOM every time a new value is received. This is a very simple example meant to demonstrate the most basic WebSocket functionality.
Next we’ll look at a more interesting example of what you can build with WebSockets.
WebSocket Geolocation App
The map below uses WebSockets and the browser Geolocation API to plot a point for every client currently viewing this post. The Node.js app powering this map is open-source and available on GitHub at heroku-examples/geosockets.
Note: If you do not see your location on the map, your browser may be configured to block location services.
The geosockets app was designed with horizontal scalability in mind. The shared location dataset is stored in a redis datastore and each web dyno connects to this shared resource to pull the complete list of pins to place on the map. Clients viewing the map each establish their own WebSocket connection to any one of the backend web dynos and receive real-time updates as locations are added and removed from the redis datastore.
Further Reading
Hopefully this gives you an idea of some of the potential applications of this technology. Additional examples and resources can be found in the Dev Center.