wr.do/content/docs/wroom.mdx

---
title: WRoom
description: A temporary, peer-to-peer, and secure chat room
---

## Introduction

The **WRoom** is a decentralized, browser-based application built using **PeerJS**, enabling real-time communication between users without relying on a central server. Leveraging WebRTC technology, this chat room supports both text and image messaging, making it a versatile tool for peer-to-peer interaction. The application features a modern, responsive UI built with **React** and **Next.js**, offering a seamless experience across desktop and mobile devices.

### Key Features
- **Decentralized Communication**: Uses PeerJS for direct peer-to-peer connections, eliminating the need for a central server.
- **Text Messaging**: Send and receive real-time text messages with timestamps and usernames.
- **Image Messaging**: Share images (up to 5MB) with other users in the chat room, displayed inline with messages.
- **User Management**: Displays a list of connected users with unique avatars and usernames.
- **Room Creation and Sharing**: Create new rooms or join existing ones using a unique peer ID, with easy sharing via a generated URL.
- **Responsive Design**: Adapts to various screen sizes, with a collapsible sidebar for mobile users.
- **Connection Status**: Real-time indicators for online users and connection state.
- **Dark Mode**: Toggle between light and dark themes for user preference.

### Technical Highlights
- Built with **Next.js** for server-side rendering and client-side interactivity.
- Utilizes **PeerJS** with STUN servers for reliable WebRTC connections.
- Messages are transmitted as structured objects to ensure data integrity, especially for Base64-encoded images.
- Random usernames are generated using the `@scaleway/random-name` library.
- Styled with **Tailwind CSS** and custom gradient-based avatars.

## Usage Guide

This section provides step-by-step instructions on how to use the WRoom effectively.

### Prerequisites
- A modern web browser (e.g., Chrome, Firefox, Edge) with WebRTC support.
- An internet connection (required for initial peer connection via STUN servers).
- No additional software installation is needed—just open the application in your browser.

### Getting Started

1. **Access the Chat Room**
   - Open [https://wr.do/chat](https://wr.do/chat) in your browser.
   - The chat room will automatically initialize and assign you a unique **Peer ID**.

2. **Create a New Room**
   - Upon loading, you are the "owner" of a new chat room by default.
   - Your **Peer ID** (e.g., `abc123-xyz789`) is displayed under "Your ID."
   - Share this ID with others to invite them to your room.

3. **Join an Existing Room**
   - If you have a room ID from another user, enter it in the "Room ID" field.
   - Click the **Connect** button to join the room.
   - Once connected, the button will turn green and display "Connected."

4. **Share Your Room**
   - Click the **Share Room** button next to "Your ID" to copy a URL (e.g., `https://wr.do/chat?room=abc123-xyz789`).
   - Send this URL to others via email, messaging apps, or any preferred method.
   - Recipients can open the URL to join your room directly.

### Sending Messages

1. **Text Messages**
   - Type your message in the text area at the bottom of the chat window.
   - Press **Enter** (without Shift) or click the **Send** button (paper plane icon) to send.
   - Your message will appear on the right side with your username and timestamp, while others' messages appear on the left.

2. **Image Messages**
   - Click the **Image** icon (next to the Send button) to open a file picker.
   - Select an image file from your device (max size: 5MB, supported formats: PNG, JPG, etc.).
   - The image will be sent automatically and displayed in the chat with your username and timestamp.
   - *Note*: If the image exceeds 5MB, an error toast will appear.

### Managing the Chat Room

- **View Users**
  - Toggle the sidebar (via the menu icon) to see a list of connected users.
  - The room owner is marked with an "Owner" badge.
  - Each user has a unique gradient avatar based on their username.

- **Create a New Room**
  - If you’re the owner, click **New Room** in the sidebar to reset the current room and generate a new Peer ID.
  - This disconnects all users and starts a fresh session.

- **Disconnect**
  - Simply close the browser tab to leave the room. If you’re the owner, the room persists as long as other peers remain connected.

### UI Customization
- **Dark Mode**: Use the toggle in the top-right corner to switch between light and dark themes.
- **Sidebar**: On mobile devices, the sidebar is hidden by default; tap the menu icon to show it.

### Troubleshooting
- **Connection Issues**: If "Disconnected" appears, check your internet connection or try refreshing the page.
- **Image Not Displaying**: Ensure the image is under 5MB and in a supported format. If the issue persists, verify the recipient’s browser console for errors.
- **Peer ID Not Working**: Confirm the ID is correct and the room owner is still online.

## Notes
- **Limitations**: The chat room relies on WebRTC, so firewall or network restrictions may affect connectivity. Images larger than 5MB are blocked to prevent performance issues.
- **Privacy**: No messages are stored server-side; all communication is peer-to-peer. However, use caution when sharing sensitive information.
- **Future Enhancements**: Potential features include file compression, multi-file support, or end-to-end encryption.

This WRoom offers a lightweight, user-friendly solution for real-time communication. Enjoy chatting and sharing with your peers at [https://wr.do/chat](https://wr.do/chat)!


Chinese (Simplified):

## 介绍

**WRoom 聊天室** 是一款基于浏览器的去中心化应用程序，利用 **PeerJS** 实现用户之间的实时通信，无需依赖中央服务器。通过 WebRTC 技术，该聊天室支持文本和图片消息，使其成为一个多功能的点对点交互工具。应用采用 **React** 和 **Next.js** 构建，拥有现代化的响应式用户界面，适用于桌面和移动设备。

### 主要功能
- **去中心化通信**：通过 PeerJS 实现直接的点对点连接，无需中央服务器。
- **文本消息**：实时发送和接收带有时间戳和用户名的文本消息。
- **图片消息**：与聊天室中的其他用户分享图片（最大 5MB），图片将内嵌显示在消息中。
- **用户管理**：显示连接用户的列表，每个用户拥有独特的头像和用户名。
- **房间创建与分享**：创建新房间或加入现有房间，使用唯一的 Peer ID，并通过生成的 URL 轻松分享。
- **响应式设计**：适配不同屏幕尺寸，移动端用户可折叠侧边栏。
- **连接状态**：实时显示在线用户数和连接状态。
- **暗色模式**：可在浅色和深色主题之间切换，满足用户偏好。

### 技术亮点
- 使用 **Next.js** 实现服务端渲染和客户端交互。
- 利用 **PeerJS** 和 STUN 服务器确保 WebRTC 连接的可靠性。
- 消息以结构化对象形式传输，确保数据完整性，特别是 Base64 编码的图片。
- 使用 `@scaleway/random-name` 库生成随机用户名。
- 使用 **Tailwind CSS** 进行样式设计，搭配基于梯度的自定义头像。

## 使用指南

本节提供逐步说明，帮助您有效使用 P2P 聊天室。

### 前提条件
- 一个支持 WebRTC 的现代浏览器（如 Chrome、Firefox、Edge）。
- 互联网连接（通过 STUN 服务器建立初始 Peer 连接时需要）。
- 无需安装额外软件，直接在浏览器中打开应用即可。

### 开始使用

1. **访问聊天室**
   - 在浏览器中打开 [https://wr.do/chat](https://wr.do/chat)。
   - 聊天室将自动初始化并为您分配一个唯一的 **Peer ID**。

2. **创建新房间**
   - 加载应用后，您默认成为新聊天室的“拥有者”。
   - 您的 **Peer ID**（例如 `abc123-xyz789`）会显示在“Your ID”字段中。
   - 将此 ID 分享给他人，邀请他们加入您的房间。

3. **加入现有房间**
   - 如果您有其他用户的房间 ID，请在“Room ID”字段中输入。
   - 点击 **Connect（连接）** 按钮加入房间。
   - 连接成功后，按钮将变为绿色并显示“Connected（已连接）”。

4. **分享您的房间**
   - 点击“Your ID”旁边的 **Share Room（分享房间）** 按钮，复制包含您 Peer ID 的 URL（例如 `https://wr.do/chat?room=abc123-xyz789`）。
   - 通过电子邮件、消息应用或其他方式将此 URL 发送给他人。
   - 接收者可直接打开 URL 加入您的房间。

### 发送消息

1. **文本消息**
   - 在聊天窗口底部的文本区域输入消息。
   - 按 **Enter** 键（不按 Shift）或点击 **Send（发送）** 按钮（纸飞机图标）发送。
   - 您的消息将显示在右侧，带有您的用户名和时间戳；他人的消息显示在左侧。

2. **图片消息**
   - 点击 **Image（图片）** 图标（位于发送按钮旁）打开文件选择器。
   - 从设备中选择图片文件（最大 5MB，支持 PNG、JPG 等格式）。
   - 图片将自动发送并在聊天中显示，带有您的用户名和时间戳。
   - *注意*：如果图片超过 5MB，会显示错误提示。

### 管理聊天室

- **查看用户**
  - 通过菜单图标切换侧边栏，查看连接用户列表。
  - 房间拥有者标有“Owner（拥有者）”徽章。
  - 每个用户拥有基于用户名的独特梯度头像。

- **创建新房间**
  - 如果您是拥有者，点击侧边栏中的 **New Room（新房间）** 重置当前房间并生成新的 Peer ID。
  - 这将断开所有用户连接并开始一个新会话。

- **断开连接**
  - 关闭浏览器标签即可离开房间。如果您是拥有者，只要其他 Peer 仍在线，房间会继续存在。

### 界面自定义
- **暗色模式**：使用右上角的切换按钮在浅色和深色主题间切换。
- **侧边栏**：在移动设备上，侧边栏默认隐藏，点击菜单图标可显示。

### 故障排除
- **连接问题**：如果显示“Disconnected（已断开）”，请检查网络连接或刷新页面。
- **图片未显示**：确保图片小于 5MB 且格式支持。如问题持续，请检查接收方浏览器控制台是否有错误。
- **Peer ID 无效**：确认 ID 正确且房间拥有者仍在线。


## 注意事项
- **限制**：聊天室依赖 WebRTC，防火墙或网络限制可能影响连接。图片大小超过 5MB 将被阻止以避免性能问题。
- **隐私**：消息不存储在服务器端，所有通信均为点对点。但分享敏感信息时仍需谨慎。
- **未来改进**：可能添加的功能包括文件压缩、多文件支持或端到端加密。

**WRoom** 提供了一个轻量级、用户友好的实时通信解决方案。立即访问 [https://wr.do/chat](https://wr.do/chat)，享受与您的朋友聊天和分享吧！