Real time web applications in Rust

Build a real-time chat web server in Rust using Rocket 0.5 and rocket_ws to upgrade http connections to WebSocket, with a chat endpoint and async streams.

Learn how to broadcast messages to all connected users by splitting a duplex stream into read and write parts, exposing a writable sink via a registry of streams.

Assign unique user ids with an atomic counter using fetch_add and relaxed ordering, and store connections in a Rocket managed chatroom registry (hash map) with thread-safe access.

Use arcs and Tokio mutexes to share and mutate a chatroom across threads in a real-time Rust web app, while scoping locks to avoid deadlocks and enable message broadcast.

Move to a chatroom struct, add and remove connections with async methods, and broadcast messages over websockets, unwrapping results to support a minimal real-time Rust backend.

Enable wasm and trunk for the Yew frontend by installing trunk and adding wasm32 target. Use trunk to build, serve, and load app from index.html, mounting a Yew function component.

Establish a websocket connection with the use WebSocket hook at ws scheme port 8000, and manage incoming messages using useState, updating via useEffect to render them in an HTML list.

Learn real-time message sending in Rust by building a chat user interface with a text area and send button, wired to a WebSocket for live broadcasting.

Apply Bootstrap styling to a real-time chat UI by loading Bootstrap 5.1, using a container and grid rows, and styling inputs, lists, and buttons with Bootstrap classes.

Expand a real-time chat in Rust by introducing a json based chat message contract with author and createdat metadata, enabling backend and frontend serialization and deserialization.

Develop a backend that serializes chat messages to json for a websocket stream, using a chat message struct with author and createdat timestamp via chrono.

Render json in the front end by deserializing strings into a chat message struct, formatting dates with Chrono, and displaying messages with bootstrap styling.

Introduce a WebSocket message envelope with a type enum to carry either a new message or a users list, and update the frontend to deserialize and route payloads accordingly.

Implement a reusable broadcast user list function that gathers active connections, builds a users list WebSocket message, and broadcasts it to all clients, updating the frontend sidebar.

Refactor a real-time Rust UI into reusable components—message list, user list, and send dialog—by introducing props and public interfaces. Enable WebSocket communication and Bootstrap grid layout for clarity.

Make usernames visible and changeable by introducing a json-based username change message and updating the front-end and back-end to render and apply the username in real time.

Store each user's username in a chatroom connection and insert it into the mutex-protected connections map; broadcast username updates to the frontend via a dedicated send_username function.

Learn to implement frontend logic for changing a username in real-time web apps, including toggling edit state, rendering input, and applying updates via websocket with structured json messages.

Implement backend websocket handling in Rust by deserializing json messages, validating types, and broadcasting chat updates while adding a username change flow to update the user list.

Add system messages that broadcast username changes in real time, constructing a system chat message and updating the user list from the backend to keep conversations clear.

Learn how to style system messages distinctly in real-time web apps by conditionally applying an info class via a classes macro, improving usability and readability.