如何使用JavaScript Chat API实现话题层级及嵌套话题多订阅功能？

以下是支持嵌套话题订阅与消息推送的基础实现代码，核心包含话题层级管理、订阅机制和消息分发逻辑：

完整代码示例 #

HTML结构 #

<div class="chat-app">
  <div class="topic-manager">
    <input type="text" id="topicInput" placeholder="输入话题名（如：前端/React）">
    <button onclick="subscribeTopic()">订阅话题</button>
    <div id="subscribedTopics">已订阅话题：</div>
  </div>
  <div class="message-area">
    <input type="text" id="messageInput" placeholder="输入消息">
    <input type="text" id="targetTopic" placeholder="目标话题（如：前端/React/Hooks）">
    <button onclick="publishMessage()">发送消息</button>
    <div id="messageList" class="message-list"></div>
  </div>
</div>

CSS基础样式 #

.chat-app {
  max-width: 800px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

.topic-manager {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.topic-manager input, .message-area input {
  padding: 8px;
  margin-right: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

#subscribedTopics span {
  display: inline-block;
  margin: 4px 8px 4px 0;
  padding: 4px 8px;
  background: #e9ecef;
  border-radius: 4px;
}

.message-area {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.message-list {
  margin-top: 10px;
  max-height: 300px;
  overflow-y: auto;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.message-item {
  margin-bottom: 8px;
  padding: 6px;
  background: #f8f9fa;
  border-radius: 4px;
}

JavaScript核心逻辑 #

// 话题树：存储所有话题的层级关系（ID -> 话题对象）
const topicTree = new Map();
// 订阅者映射：话题ID -> 订阅者回调集合
const subscribers = new Map();

// 初始化根话题（作为所有话题的顶级父节点）
topicTree.set('root', { id: 'root', name: '根话题', parentId: null });
subscribers.set('root', new Set());

/**
 * 解析话题路径为层级数组
 * @param {string} path - 话题路径（如"前端/React/Hooks"）
 * @returns {string[]} 拆分后的话题段数组
 */
function parseTopicPath(path) {
  return path.split('/').filter(segment => segment.trim() !== '');
}

/**
 * 确保话题路径对应的所有层级话题存在，不存在则自动创建
 * @param {string} path - 话题路径
 * @returns {string} 最终话题的ID
 */
function ensureTopicExists(path) {
  const segments = parseTopicPath(path);
  let currentParentId = 'root';
  
  for (const segment of segments) {
    const topicId = `${currentParentId}/${segment}`;
    if (!topicTree.has(topicId)) {
      topicTree.set(topicId, {
        id: topicId,
        name: segment,
        parentId: currentParentId
      });
      subscribers.set(topicId, new Set());
    }
    currentParentId = topicId;
  }
  return currentParentId;
}

/**
 * 订阅指定话题
 */
function subscribeTopic() {
  const topicPath = document.getElementById('topicInput').value.trim();
  if (!topicPath) return;
  
  const topicId = ensureTopicExists(topicPath);
  // 定义当前订阅者的消息接收回调
  const receiveMessage = (message, topicName) => {
    addMessageToUI(`[${topicName}] ${message}`);
  };
  
  // 添加订阅者到话题的订阅集合
  subscribers.get(topicId).add(receiveMessage);
  
  // 更新已订阅话题的UI展示
  const subscribedEl = document.getElementById('subscribedTopics');
  const topicTag = document.createElement('span');
  topicTag.textContent = topicPath;
  subscribedEl.appendChild(topicTag);
  
  document.getElementById('topicInput').value = '';
}

/**
 * 发布消息到指定话题，并推送给该话题及所有父话题的订阅者
 */
function publishMessage() {
  const message = document.getElementById('messageInput').value.trim();
  const targetTopicPath = document.getElementById('targetTopic').value.trim();
  if (!message || !targetTopicPath) return;
  
  const targetTopicId = ensureTopicExists(targetTopicPath);
  // 收集需要推送消息的所有话题（当前话题 + 所有层级父话题）
  const topicsToNotify = [];
  let currentTopicId = targetTopicId;
  
  while (currentTopicId) {
    topicsToNotify.push(currentTopicId);
    const currentTopic = topicTree.get(currentTopicId);
    currentTopicId = currentTopic.parentId;
  }
  
  // 向所有相关话题的订阅者推送消息
  topicsToNotify.forEach(topicId => {
    const topic = topicTree.get(topicId);
    subscribers.get(topicId).forEach(callback => {
      callback(message, topic.name);
    });
  });
  
  document.getElementById('messageInput').value = '';
}

/**
 * 将消息添加到UI列表
 * @param {string} content - 消息内容
 */
function addMessageToUI(content) {
  const messageList = document.getElementById('messageList');
  const messageItem = document.createElement('div');
  messageItem.className = 'message-item';
  messageItem.textContent = content;
  messageList.appendChild(messageItem);
  // 自动滚动到最新消息
  messageList.scrollTop = messageList.scrollHeight;
}

核心功能说明 #

1. 嵌套话题管理：通过路径格式（如前端/React/Hooks）自动创建层级话题，话题间的父子关系存储在topicTree中。
2. 灵活订阅机制：用户可同时订阅任意层级的话题（父话题/子话题），订阅后会收到对应话题及其所有子话题的消息（因为消息发布时会向上推送到所有父话题）。
3. 消息分发逻辑：发布消息到目标话题时，会自动将消息推送给该话题的订阅者，以及所有上层父话题的订阅者，确保订阅父话题的用户能收到所有子话题的消息。
4. 基础UI交互：提供话题订阅、消息发布的交互界面，实时展示已订阅话题和收到的消息。

可扩展方向 #

• 增加订阅去重逻辑：避免用户同时订阅父/子话题时重复收到同一条消息
• 支持话题取消订阅功能
• 实现用户身份标识，区分不同订阅者
• 添加消息持久化存储

内容的提问来源于stack exchange，提问作者nolanism