QF.EDU

Docs
WRoom

WRoom

临时、点对点、安全的聊天室

导言

WRoom是一个基于浏览器的分散式应用程序，使用PeerJS构建，无需依赖中央服务器即可实现用户之间的实时通信。该聊天室利用 WebRTC 技术，同时支持文本和图像消息，是点对点互动的多功能工具。该应用程序采用React和Next.js构建的现代响应式用户界面，可在桌面和移动设备上提供无缝体验。

主要功能

  • 去中心化通信**： 使用 PeerJS 进行点对点直接连接，无需中央服务器。
  • 文本信息： 收发带有时间戳和用户名的实时文本信息。
  • 图片信息**： 与聊天室中的其他用户共享图片（最大 5MB），并与消息一起在线显示。
  • 用户管理**： 显示已连接用户的列表，这些用户都有自己的头像和用户名。
  • 创建和共享聊天室**： 使用唯一的对等 ID 创建新聊天室或加入现有聊天室，并通过生成的 URL 轻松共享。
  • 响应式设计： 适应各种屏幕尺寸，为移动用户提供可折叠侧边栏。
  • 连接状态： 实时显示在线用户和连接状态。
  • 黑暗模式**： 根据用户偏好在浅色和深色主题之间切换。

技术要点

  • 采用Next.js构建，用于服务器端渲染和客户端交互。
  • 利用PeerJS与 STUN 服务器建立可靠的 WebRTC 连接。
  • 信息以结构化对象的形式传输，以确保数据完整性，尤其是 Base64 编码的图像。
  • 使用 @scaleway/random-name 库生成随机用户名。
  • 使用 Tailwind CSS 和自定义渐变头像设计风格。

使用指南

本节将逐步介绍如何有效使用 WRoom。

先决条件

  • 支持 WebRTC 的现代网络浏览器（如 Chrome、Firefox、Edge）。
  • 互联网连接（通过 STUN 服务器进行初始对等连接时需要）。
  • 无需额外安装软件，只需在浏览器中打开应用程序即可。

入门

  1. 进入聊天室
  • 在浏览器中打开 https://qf.edu.kg/chat。
  • 聊天室将自动初始化，并为您分配一个唯一的同伴 ID。
  1. 创建新房间
  • 加载聊天室时，您默认是新聊天室的 "所有者"。
  • 您的同伴 ID （例如 "abc123-xyz789"）会显示在 "您的 ID "下。
  • 与他人分享此 ID 可邀请他们进入您的聊天室。
  1. 加入现有房间
  • 如果您有其他用户的房间 ID，请在 "房间 ID "字段中输入。
  • 单击连接按钮加入房间。
  • 连接后，按钮将变为绿色并显示 "已连接"。
  1. 分享您的房间
  • 点击 "您的 ID "旁边的共享房间按钮，复制一个 URL（例如，https://qf.edu.kg/chat?room=abc123-xyz789）。
  • 通过电子邮件、信息应用程序或任何首选方式将此 URL 发送给其他人。
  • 收件人可以打开 URL 直接加入您的房间。

发送信息

  1. 文本信息
  • 在聊天窗口底部的文本区键入信息。
  • 按Enter（不带 Shift 键）或点击发送按钮（纸飞机图标）发送。
  • 您的信息将显示在右侧，并带有您的用户名和时间戳，而其他人的信息则显示在左侧。
  1. 图像信息
  • 单击图像图标（发送按钮旁边），打开文件选择器。
  • 从您的设备中选择一个图像文件（最大大小：5MB，支持格式：PNG、JPG 等）。
  • 图片将自动发送，并在聊天中显示您的用户名和时间戳。
  • 注意*： 如果图片超过 5MB，会出现错误提示。

管理聊天室

  • 查看用户**

  • 切换侧边栏（通过菜单图标），查看已连接用户的列表。

  • 房间所有者带有 "所有者 "徽章。

  • 每个用户都有一个基于其用户名的独特渐变头像。

  • 创建新房间

    • 如果您是所有者，请单击侧边栏中的新房间，重置当前房间并生成一个新的 Peer ID。

  • 这将断开所有用户的连接，并开始一个全新的会话。

  • 断开

  • 只需关闭浏览器标签页即可离开房间。如果您是房间的所有者，只要其他同行仍保持连接，房间就会继续存在。

用户界面定制

  • 黑暗模式: 使用右上角的切换按钮在明暗主题之间切换。
  • 侧边栏: 在移动设备上，侧边栏默认是隐藏的；轻点菜单图标即可显示。

故障排除

  • 连接问题： 如果出现 "断开连接"，请检查网络连接或尝试刷新页面。
  • 图像无法显示： 确保图像小于 5MB，并且是受支持的格式。如果问题仍然存在，请检查收件人的浏览器控制台是否存在错误。
  • 同行 ID 无法使用： 确认 ID 正确且房间所有者仍在线。

说明

  • 限制： 聊天室依赖于 WebRTC，因此防火墙或网络限制可能会影响连接性。为防止出现性能问题，大于 5MB 的图片将被屏蔽。
  • 隐私： 服务器端不存储任何信息；所有通信都是点对点的。不过，在共享敏感信息时请谨慎。
  • 未来增强功能： 潜在功能包括文件压缩、多文件支持或端到端加密。

该 WRoom 为实时通信提供了一个轻量级、用户友好的解决方案。请访问 https://qf.edu.kg/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。
    • 聊天室将自动初始化并为您分配一个唯一的 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://qf.edu.kg/chat，享受与您的朋友聊天和分享吧！

DNS 记录Overview