Dynamic WS routing works similarly to dynamic HTTP routing, where certain parts of the URL are treated as variables.
Total.js v5: Dynamic WebSocket Routing
Welcome back to our Beginner's Guide to Total.js! In the previous post, we introduced you to WebSocket routing and explored a simple real-time communication example. In this second part, we’ll delve deeper into dynamic WebSocket (ws) routing, which allows you to create more flexible and dynamic connections based on specific URL parameters, such as chat rooms or unique user IDs.
Dynamic routing is especially useful when building applications like multi-room chat systems or collaborative spaces where clients need to be grouped based on specific dynamic parameters.
What is Dynamic WS Routing?
Dynamic WS routing works similarly to dynamic HTTP routing, where certain parts of the URL are treated as variables. These variables can represent things like room names, user IDs, or session identifiers.
By using dynamic routing, you can create WS endpoints that are disigned to individual connections. For example, instead of creating separate WS routes for each room in a chat app, you can use a dynamic route like /chat/{room}/
where {room}
is a placeholder for the actual room name.
In Total.js, setting up a dynamic WS route is simple and effective, allowing you to handle custom parameters in your WS connections.
Setting up dynamic WS Routing
Let’s dive into a practical example where we create a dynamic WS route that allows users to connect to specific chat rooms. The dynamic part of the route will be the room name passed in the URL.
How It Works:
- Dynamic Route: The
ROUTE('SOCKET /{room}/', socket)
defines a WS route where{room}
is a dynamic parameter. The actual room name will be extracted from the URL when a client connects.
- Accessing the Room Parameter: Inside the
socket
function, you can access the room name through$.params.room
. This allows you to differentiate between different rooms and handle them accordingly.
- ws Events: The standard WS events (
open
,message
, andclose
) are used to manage the connection lifecycle. Each event can now handle interactions specific to the room.
- When a client connects, they receive a welcome message mentioning the room they’ve joined.
- The server logs messages received from clients, noting the room they came from.
- The server also logs when clients disconnect from specific rooms.
Example: Multi-Room Chat Application
Let’s enhance this example by creating a multi-room chat application. Users can connect to different chat rooms via dynamic WS URLs, and messages sent in one room are broadcasted to all clients in the same room.
How This Example Works:
- Dynamic Room Routing: Users connect to specific rooms via URLs like
/chat/lobby/
or/chat/room1/
. The room name is extracted dynamically from the URL and used to manage messages within that room.
- Message Broadcasting: The
broadcast
function sends a message to all connected clients in the room, excluding the sender. This ensures that clients only receive messages meant for their room.
- Connection Events:
- When a client connects, all other clients in the room are notified.
- When a client sends a message, it’s broadcast to all clients in the room.
- When a client disconnects, the remaining clients are informed.
This simple structure allows you to scale easily, adding more functionality like private rooms, user authentication, or message logging.
Testing the Dynamic WS Server
To test the dynamic WS server, you can use ws clients such as Postman or Websocket King, or even create a simple HTML client to simulate the behavior.
Here’s an example HTML client that allows users to connect to different rooms dynamically:
Steps to Test:
- When you load the page, you’ll be prompted to enter a room name (e.g.,
lobby
,room1
, etc.). - The client will connect to the WebSocket server using the dynamic route corresponding to the room.
- You can send messages by typing in the input field and clicking the "Send" button.
- Messages sent in the room are broadcast to all other clients connected to the same room.
Conclusion
Dynamic WebSocket routing in Total.js is a powerful feature that allows you to handle flexible, real-time interactions based on dynamic URL parameters. Whether you're building a multi-room chat application, a real-time collaborative tool, or a game server, dynamic routing makes it easy to manage different contexts for different users.
In this post, we’ve covered:
- How to set up a dynamic WebSocket route.
- Accessing URL parameters in WebSocket connections.
- Building a multi-room chat application with dynamic room names.
Stay tuned for the next installment, where we’ll explore more advanced WSocket use cases.
Thanks for reading, and feel free to experiment with dynamic WebSocket routing in your projects!
Other posts from Total.js Platform
- 2024-10-01September report 2024
- 2024-09-27Total.js UI Builder: #2 designing your first interface
- 2024-09-26Total.js V5: Middlewares
- 2024-09-23Beginner Guide to Total.js UI: # 05 Client-side routing
- 2024-09-23Total.js UI #4: Data Binding (Part 2 – Practical Example)
- 2024-09-20Introduction to Total.js UI Builder: A Beginner’s Guide
- 2024-09-13Total.js v5: #06 Understanding File Routing
- 2024-09-09Total.js v5: Defining Routes for Internal Errors
- 2024-09-09Total.js V5: Websocket Routing
- 2024-09-09Total.js v5: Understanding standard routing