Setting Up a WebRTC Signaling Server for Lobe Chat Data Sync

[cogscides]

This guide will walk you through the process of setting up a self-hosted WebRTC signaling server behind Traefik for Lobe Chat data synchronization. Special thanks to community members dazzle, arvinxu, and cy948 for their contributions to this guide and for making this sync option possible.

Setting Up the WebRTC Signaling Server

1. Enable WebRTC sync Flag in your lobe chat container with FEATURE_FLAGS: "+webrtc_sync" environment variable.

2. Clone the signaling server repository to your machine:

   git clone https://github.com/lobehub/y-webrtc-signaling.git

   Note: Remember this path as you'll need to point your Docker to use this folder.

3. Add a signaling service as a separate container:

   version: '3'
   services:
     webrtc-signaling:
       image: node:16-alpine
       volumes:
         - /path/to/your/files/y-webrtc-signaling:/app
       working_dir: /app
       command: sh -c "npm install && node index.js"
       ports:
         - "4444:4444"
       restart: unless-stopped

   or inside your current docker-compose.yml here is my compose file:

   version: '3.8'
   
   services:
     lobe-chat:
       image: lobehub/lobe-chat
       restart: unless-stopped
       container_name: lobe-chat
       ports:
         - '3210:3210'
       environment:
         FEATURE_FLAGS: "+webrtc_sync" # Add this variable
         # Place your other environment variables here
   
     webrtc-signaling:
       image: node:16-alpine
       volumes:
         - /path/to/your/y-webrtc-signaling:/app
       working_dir: /app
       command: sh -c "npm install && node index.js"
       ports:
         - "4444:4444"
       restart: unless-stopped
   
     # Optional bonus: Watchtower for automatic updates
      # watchtower:
      #   image: containrrr/watchtower
      #   restart: unless-stopped
      #   container_name: lobe-chat-updater
      #   volumes:
      #     - /var/run/docker.sock:/var/run/docker.sock
      #   command: --interval 3600 --cleanup
      #   environment:
      #     - WATCHTOWER_CLEANUP=true
      #     - WATCHTOWER_INCLUDE_RESTARTING=true
      #     - WATCHTOWER_ROLLING_RESTARTING=true

4. Run your containers using docker compose up -d or your preferred method.

5. Verify the server is working by accessing {server_ip}:4444 in your browser. You should see a confirmation message.

6. In the Lobe Chat UI, go to Sync settings and add your signaling server IP (e.g., http://{server_ip}:4444).

This setup should work if you're using Lobe Chat locally without TLS/HTTPS.

---

Note

The following sections assume you're using Traefik as a reverse proxy and Cloudflare for DNS and certificate management.

Setting Up DNS and Traefik

To prevent CORS errors when using Lobe Chat through HTTPS behind a reverse proxy, follow these additional steps:

1. Ensure your Lobe Chat server's container can reach the Signaling Server (you may ping it to verify).
   If using Cloudflare, set a new CNAME DNS record to point to the signaling server (e.g., signaling-lobe with target @).

2. Configure Traefik with the following dynamic configurations:

   http:
     routers:
       lobe-https-router:
         entryPoints:
           - https
         rule: "Host(`lobe.{MY_DOMAIN}`)"
         service: lobe-svc
         tls:
           certResolver: cloudflare
   
       lobe-http-router:
         rule: "Host(`lobe.{MY_DOMAIN}`)"
         service: lobe-svc
         entryPoints:
           - http
   
       lobe-signaling-https-router:
         entryPoints:
           - https
         rule: "Host(`signaling-lobe.{MY_DOMAIN}`)"
         service: lobe-signaling
         tls:
           certResolver: cloudflare
   
       lobe-signaling-http-router:
         rule: "Host(`signaling-lobe.{MY_DOMAIN}`)"
         service: lobe-signaling
         entryPoints:
           - http
   
       lobe-websocket-router:
         entryPoints:
           - https
         rule: "Host(`signaling-lobe.{MY_DOMAIN}`) && Path(`/`)"
         service: lobe-signaling-ws
         tls:
           certResolver: cloudflare
         middlewares:
           - websocket-middleware
           - websocket-headers
   
     middlewares:
       websocket-middleware:
         headers:
           customRequestHeaders:
             X-Forwarded-Proto: "https"
             X-Forwarded-Port: "443"
           customResponseHeaders:
             Strict-Transport-Security: "max-age=31536000"
   
       websocket-headers:
         headers:
           customRequestHeaders:
             Connection: "Upgrade"
             Upgrade: "websocket"
           customResponseHeaders:
             Connection: "Upgrade"
             Upgrade: "websocket"
   
     services:
       lobe-svc:
         loadBalancer:
           servers:
             - url: "http://{LOCAL_SERVER_IP}:3210"
           passHostHeader: true
   
       lobe-signaling:
         loadBalancer:
           servers:
             - url: "http://{LOCAL_SERVER_IP}:4444"
           passHostHeader: true
   
       lobe-signaling-ws:
         loadBalancer:
           servers:
             - url: "ws://{LOCAL_SERVER_IP}:4444"
           passHostHeader: true

Note

I'm using https and http entrypoins, in your setup it could be websecure & insecure or something else.
Also you need to replace addresses with your domains as well as change ports if yours are custom.

3. In Lobe Chat settings, add the signaling server URL: https://signaling-lobe.{MY_DOMAIN}/ws

This configuration allows you to sync your Lobe Chat even when you're not on the local network.

[9Somboon]

If I use deploy to vercel, what method should I use?

[cogscides]

I am not sure, as I have not used Vercel for a long time. Have you experimented with it by following the official WebRTC synchronization documentation?

[dashrandom]

Hi, thanks for the guide! A question about the {LOCAL_SERVER_IP}. Is this IP of the host or IP of the docker container?

I have a slightly modified set up using docker-compose labels as my Traefik static config already has websecure and web entrypoints for all containers and some predefined TLS providers.

I'm getting a 404 when I hit signaling-lobe.{MY_DOMAIN} but no issues with http://{LOCAL_SERVER_IP}:4444.

My labels are as follows:

      - traefik.enable=true
      - traefik.http.routers.sig.rule=Host(`lobe-sig.mydomain`)
      - traefik.http.routers.sig.tls=true
      - traefik.http.routers.sig.tls.certresolver=cfdns
      - traefik.http.routers.sig.middlewares=websocket-middleware,websocket-headers
      - traefik.http.services.sig.loadbalancer.server.port=4444
      - traefik.http.services.lobe-signaling.loadbalancer.server.url=http://{HOSTIP}:4444
      - traefik.http.services.lobe-signaling.loadbalancer.passHostHeader=true
      - traefik.http.services.lobe-signaling-ws.loadbalancer.server.url=ws://{HOSTIP}:4444
      - traefik.http.services.lobe-signaling-ws.loadbalancer.passHostHeader=true
      - traefik.http.middlewares.websocket-middleware.headers.customRequestHeaders.X-Forwarded-Proto=https
      - traefik.http.middlewares.websocket-middleware.headers.customRequestHeaders.X-Forwarded-Port=443
      - traefik.http.middlewares.websocket-middleware.headers.customResponseHeaders.Strict-Transport-Security=max-age=31536000
      - traefik.http.middlewares.websocket-headers.headers.customRequestHeaders.Connection=Upgrade
      - traefik.http.middlewares.websocket-headers.headers.customRequestHeaders.Upgrade=websocket
      - traefik.http.middlewares.websocket-headers.headers.customResponseHeaders.Connection=Upgrade
      - traefik.http.middlewares.websocket-headers.headers.customResponseHeaders.Upgrade=websocket

Looking at the difference between your instructions above my guess is I need to define 2 services (one for http and one for ws), and set up host rules for them both?

[cogscides]

@dashrandom LOCAL_SERVER_IP is a load balancer URL pointing to the container's IP of your signaling server. So if it's in the same stack and network it should be the same IP as your lobe-chat load balancer.

I don't know if you need to define 2 services as I'm a very newbie in dev and docker stuff. I made this config with the help of AI and a little previous experience.

Anyway please share your results if you can get the working setup.

[dashrandom]

@cogscides I may be mistaken I think that's the wrong understanding of LOCAL_SERVER_IP as containers have their own IP in a docker network, usually 172.X.X.X instead of the public or local IP... I was asking if it was the container IP or the host IP but based on your answer I guess it's the host IP.

Regarding the labels, I've discovered the problem is that it's not possible to use docker-compose labels to declare the loadbalancer.server.url and this has to be done via a file provider instead. I'm gonna try and do this and provide feedback if I get it working.

[cogscides]

@dashrandom Yeah, that's right. It's a host IP.