MoodStream - Waku Reliable Channels Workshop Example

MoodStream is a minimalist web application that demonstrates the use of Waku's Reliable Channels for real-time mood sharing. Users can select from 10 emoji options to express their current mood, and these moods are shared across the network with automatic synchronization and conflict resolution.

Features

• Emoji Mood Selection: 10 emoji buttons allow users to quickly share their current mood
• Real-time Display: Moods are displayed in a grid showing only the last hour of activity
• Mood Direction Tracking: Visual indicators show whether a user's mood is improving (↗️), worsening (↘️), or stable (➡️)
• User Avatars: Each user has a colored circle avatar with initials derived from their nickname
• Persistent Nicknames: User nicknames are stored in localStorage and can be customized
• 2-Word Nickname Generation: Default nicknames are generated using adjective-noun combinations (e.g., "Fierce Seal")
• Offline Support: The application works even when temporarily disconnected, with messages synchronized when reconnected

Technical Architecture

Waku Reliable Channels

The application uses Waku's Reliable Channels to ensure message delivery and synchronization across peers. This provides:

• Message reliability with acknowledgment
• Automatic recovery of missed messages
• State synchronization with automatic conflict resolution
• Decentralized peer-to-peer communication

Data Model

Mood messages are serialized using Protocol Buffers with the following schema:

message MoodMessage {
  uint64 timestamp = 1;
  string userId = 2;
  string emoji = 3;
  string previousEmoji = 4;  // For tracking mood direction
}

State Management

The application maintains two key data structures:

• moods: A Map that stores the latest mood for each user, keyed by userId
• userEmojiHistory: A Map that tracks each user's previous emoji for direction calculation

UI Components

The interface consists of:

1. Header: Shows connection status and nickname input
2. Emoji Selector: Grid of 10 emoji buttons for mood selection
3. Mood Display: Grid showing recent moods from all users

Code Organization

The application is implemented as a single HTML file (index.html) with the following key classes and methods:

MoodStream Class

The main application class that encapsulates all functionality.

Key Methods:

• constructor(): Initializes the application state and UI elements
• init(): Sets up Waku, Protobuf, and the user interface
• initWaku(): Creates the Waku light node and reliable channel
• setupEventListeners(): Configures event handlers for Waku messages
• sendMood(emoji): Sends a mood message to the network
• handleIncomingMood(wakuMessage): Processes incoming mood messages
• updateMoodDisplay(): Refreshes the mood grid with recent moods
• createMoodItem(mood): Creates a DOM element for a mood entry
• getMoodDirectionElement(mood): Determines and creates the mood direction indicator

Nickname Management:

• generateNickname(): Creates a 2-word nickname (e.g., "Fierce Seal")
• getNickname(): Retrieves nickname from localStorage or generates a default
• updateNickname(nickname): Updates the user's nickname and saves to localStorage

UI Helpers:

• formatTimeAgo(timestamp): Converts timestamps to human-readable relative times
• updateStatus(text, statusType): Updates the connection status display

Getting Started

1. Open index.html in a modern web browser
2. Enter your preferred nickname or use the generated one
3. Click any emoji to share your current mood
4. Watch as moods from other users appear in the grid

Workshop Usage

This example is designed to demonstrate:

• Decentralized real-time communication with Waku
• Reliable message delivery using Reliable Channels
• Conflict resolution in distributed systems
• Single-file web application architecture
• Protocol Buffers for message serialization
• Local storage for user preferences

The code is heavily commented to facilitate understanding of each component and its role in the overall system.

Try It Live

You can try the current version of this application deployed on IPFS at: https://ipfs.io/ipfs/bafkreia2hbf3wfa4mnfogs44ws3oopkzwbdxmoryzer3zcoypyfagc564e