Websockets in openFrameworks

Wrapper for websocketpp (ossia fork with modern Boost.Asio), example app, and a FastAPI server to bridge a web control panel and the OF app.

Requirements

• macOS: Homebrew Boost: brew install boost
• Linux: sudo apt install libboost-dev (or equivalent)
• Python 3 for the server: pip install fastapi uvicorn websockets

Build

1. Get websocketpp (no git? clone manually):

   mkdir -p libs && git clone --depth 1 --branch ossia/2024-12-18 https://github.com/jcelerier/websocketpp.git libs/websocketpp
   

2. Point to Boost (if not using Homebrew default):

• Edit config.make and set BOOST_ROOT to your Boost include/lib parent (e.g. /usr/local or $(brew --prefix boost)).

3. Build:

   make
   

Run the example

1. Start the Python WebSocket server (required — the OF app and the web UI both connect to it):

   python3 server.py
or: uvicorn server:app --reload --host 0.0.0.0
   

This listens on port 8000 (/of-ws for the OF app, /client-ws for the browser). Live Server or a static file server alone is not enough — they only serve HTML; they don’t provide these WebSocket endpoints.

2. Open the web UI: open index.html in a browser (e.g. via Cursor Live Server, or python3 -m http.server 8080 then http://localhost:8080/index.html).

3. Run the OF app:

   make RunRelease
or: bin/ofxWebsocketpp.app/Contents/MacOS/ofxWebsocketpp
   

If the Python server isn’t running, the OF app will show “Connection failed” and stay running (no crash). The app connects to ws://127.0.0.1:8000/of-ws; the browser connects to ws://127.0.0.1:8000/client-ws. Change these in ofApp.cpp and index.html for a different backend.

Deploy to Render.com (optional)

One GitHub repo with both OF and web code is fine. Render uses the same repo for different services and only runs what each service needs; the OF app is built only on your machine.

1. Push to GitHub

Create a new repo on GitHub, then from the project folder:

git init
git add .
git commit -m "Voice Path websocket app"
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git push -u origin main

(If you already have a repo, just push. Consider adding bin/ and obj/ to .gitignore so build artifacts aren’t committed.)

2. Create two services on Render

From the Render dashboard (“Create a new Service”):

A) Web Service (Python WebSocket server)

• Click New → Web Service.
• Connect your GitHub account and select the repo.
• Use:
• Build command: pip install -r requirements.txt
• Start command: uvicorn server:app --host 0.0.0.0 --port $PORT
• Deploy. Note the URL (e.g. https://ofxwebsocketpp-ws.onrender.com). WebSockets use WSS: wss://ofxwebsocketpp-ws.onrender.com/of-ws and wss://ofxwebsocketpp-ws.onrender.com/client-ws.

B) Static Site (web client)

• Click New → Static Site.
• Connect the same repo.
• Publish directory: leave blank or . so index.html at the repo root is served.
• After deploy, open the Static Site URL and you’ll get the Voice Path UI. It must talk to the Web Service over WSS (see step 3).

3. Point client and OF app at the Web Service

• In index.html, set the WebSocket URL to your Web Service with wss and path /client-ws, e.g. wss://ofxwebsocketpp-ws.onrender.com/client-ws, then commit and push (Render will redeploy the Static Site).
• In ofApp.cpp, set the connect URL to wss://YOUR-WEB-SERVICE-URL/of-ws, then rebuild the OF app locally.

The OF app runs only on your machine and connects to the same Render Web Service; it is not deployed to Render.

Note: On the free tier, the Web Service spins down after ~15 minutes of inactivity; the first request after that may be slow.