A Hello World App
Let's see how Jamsocket works by using it to spawn a little Hello World server.
Requirements
We'll also want to use the Jamsocket CLI to manage our Jamsocket services and interact with Jamsocket's container registry. It's generally recommended to install the Jamsocket CLI either globally or in your project root with npm install jamsocket
(or npm install jamsocket --global
).
If you install the CLI globally on your machine, you may want to use a tool like Node Version Manager to manage your NodeJS binaries. (You can read more about that here.)
Logging in
Once you've got the CLI installed, you'll need to run npx jamsocket login
to log in.
Creating a Service
First, we'll want to create a service for our Hello World project. We'll refer to the service's name whenever we push containers and spawn backends. We can create a new service with the CLI:
Our Hello World will be a simple NodeJS HTTP server. So let's create a server.js
file in our project root with the following code:
const http = require('http')
const PORT = process.env.PORT
const server = http.createServer((req, res) => {
res.end('Hello World')
})
server.listen(PORT, () => {
console.log(`Server running at http://0.0.0.0:${PORT}/`)
})
Packaging a Container
Next, we need to package our backend into a container. All a container needs to be compatible with Jamsocket is to serve an HTTP server on port 8080
(which is also provided through $PORT
for compatibility with Heroku-ready containers).
Let's use Docker to create a container for our app. We'll just need to write a Dockerfile that tells Docker how to build a containerized version of our application. Create a file named Dockerfile
in your project root and add these lines to it:
Now, let's use the Docker CLI to build the container and name it hello-world-image
. (Note: Jamsocket currently runs backends on nodes with an x86 architecture. If you are building the container on an x86 machine, like an Intel Mac, you don't need the --platform linux/amd64
flag.)
Great! You should be able to run docker images
now and see your new hello-world-image
container image in the list.
Pushing
Now that we've containerized our application, we just need to push the container image to our new hello-world
service on Jamsocket.
Spawning
Let's spawn an instance of our service.
You should see a result like this:
backend name: 1e9w4
backend url: https://1e9w4.jamsocket.run/
status url: https://api.jamsocket.com/backend/1e9w4/status
ready url: https://api.jamsocket.com/ready/1e9w4/
Open the ready url
in your browser. It serves as a temporary landing page while your backend spins up. You'll be redirected to the backend url
once it's ready. Note that, in some cases, you might not get to see the landing page before you're redirected to the ready container. For more information on what else is contained the spawn command's response, see the Spawn a Service section of the API Docs.
Getting Logs
Finally, let's get some logs from our running container.
You should see your server logs in the output.
Spawn one of our example apps
Our Hello World app is simple enough to demonstrate how pushing code and deploying backends works on Jamsocket, but it doesn't really show off the power of building applications with stateful backends. To see how session backends make multiplayer games and collaborative applications easier to build, check out one of our demos below.
Demo | Description | Image |
---|---|---|
Drop Four | Drop Four (aka Connect 4) game example from Aper | ghcr.io/drifting-in-space/demo-image-drop-four:latest |
Jupyter Notebook | Jupyter notebook | ghcr.io/drifting-in-space/jamsocket-jupyter-notebook:sha-fa92787 |
To run one of these demos, simply pull the image down, create a new Jamsocket service, push the image to your service, and spawn. Here's an example:
docker pull ghcr.io/drifting-in-space/demo-image-drop-four:latest
npx jamsocket service create drop-four-demo
npx jamsocket push drop-four-demo ghcr.io/drifting-in-space/demo-image-drop-four:latest
npx jamsocket spawn drop-four-demo
Open the ready url
in your browser to try out the demo. For collaborative demos, like the Drop Four and Chrome demos, open the ready url
in two different tabs to see how application state is shared between them.