In BigBlueButton, messages between participants are primarily exchanged using WebSockets for real-time communication. However, the way these messages are handled in the browser (especially in Firefox's Network tab) can be subtle and might not always appear as you expect. Here’s how it works and why you might not see new WebSocket messages for each chat message:
1. WebSocket Connection in BigBlueButton
- BigBlueButton uses a single, persistent WebSocket connection (typically via the
bbb-websocket endpoint) for real-time messaging (chat, presentations, cursor movements, etc.).
- This connection is established when you join a session and remains open for the duration of the meeting.
- All messages (chat, slides, etc.) are sent and received over this same WebSocket connection as binary or text frames.
2. Why You Don’t See New WebSocket Messages in Firefox
-
WebSocket Frames vs. HTTP Requests:
Firefox’s Network tab primarily shows HTTP/HTTPS requests (e.g., REST API calls, asset loads). WebSocket frames are not displayed as individual requests in the Network tab by default.
- To see WebSocket activity, you need to:
- Open Firefox DevTools (
F12 or Ctrl+Shift+I).
- Go to the Network tab.
- Filter by
WS (WebSocket).
- Click on the WebSocket connection (e.g.,
wss://your-bbb-server/bbb-websocket).
- In the right panel, go to the Messages sub-tab to see real-time WebSocket frames (both sent and received).
-
Message Aggregation:
BigBlueButton may batch or compress messages (e.g., using msgpack or BSON) to reduce overhead. A single WebSocket frame might contain multiple logical messages.
-
Internal Handling:
The BigBlueButton client (HTML5 frontend) processes incoming WebSocket messages internally using JavaScript (e.g., via the bbb-commons library). These messages are not exposed as separate network requests but are instead handled by event listeners in the code.
3. How to Debug WebSocket Messages
In Firefox:
- Open DevTools (
F12).
- Go to the Network tab.
- Filter by
WS (WebSocket).
- Click on the active WebSocket connection.
- Switch to the Messages tab to see real-time frames (both sent and received).
- Look for text or binary frames containing chat messages (often in JSON or serialized format).
In Chrome:
- Similar to Firefox, but Chrome’s DevTools shows WebSocket frames more prominently under the Network > WS filter.
Server-Side Logging:
4. Example: Chat Message Flow
- User A sends a chat message:
- The client sends a WebSocket frame (e.g.,
{type: "chat", message: "Hello", sender: "UserA"}).
- Server processes the message:
- The
bbb-akka-apps service broadcasts the message to all participants in the room.
- Other clients receive the message:
- Each client receives the message as a WebSocket frame (visible in DevTools under the WebSocket’s Messages tab).
- The client-side JavaScript parses the frame and updates the chat UI without triggering a new HTTP request.
5. Common Pitfalls
- Missing WebSocket Filter: If you don’t filter by
WS in the Network tab, you’ll miss WebSocket activity.
- Binary Frames: Some messages may be binary (e.g., serialized with msgpack). Use a tool like WebSocket King to decode them.
- Caching: Firefox may not show WebSocket frames if the connection is reused. Refresh the page and rejoin the session to force a new connection.
6. Tools for Advanced Debugging
- Browser Extensions:
- Proxy Tools:
Key Takeaway
BigBlueButton chat messages are sent over a persistent WebSocket connection, not as individual HTTP requests. To see them:
- Filter by
WS in Firefox’s Network tab.
- Inspect the WebSocket’s Messages sub-tab.
- Check server logs if you suspect issues with message delivery.