如何在async/await式WebSocket主题订阅前执行取消订阅操作？

我们实现了WebSocket主题管理的两个核心方法：

• on(topic)：异步函数，调用后建立对应主题的WebSocket连接，返回通信实例Subject
• off(topic)：用于取消指定主题的订阅、断开连接

但实际使用中发现只有在调用await on(topic)完成后，再调用off(topic)才能生效；如果先调用off再执行on，取消操作完全无效。

示例代码 #

无效场景

// 无效：先调用off，再执行on的异步订阅
this.websocketTopicTest.off('FOO');
await this.websocketTopicTest.on('FOO');

有效场景

// 有效：等on的异步订阅完成后，再调用off
await this.websocketTopicTest.on('FOO');
this.websocketTopicTest.off('FOO');

问题原因 #

核心在于off方法的实现逻辑依赖于on方法已经完成初始化的主题连接实例：

1. on是异步函数，await之前WebSocket连接还未建立，对应的主题实例也没有被注册到内部管理容器（比如Map/Set）中；
2. 此时调用off，方法内部找不到该主题对应的连接记录，自然无法执行取消订阅的逻辑。

解决办法 #

1. 基础方案：确保off仅在on完成后调用

在调用off的时机，先检查目标主题是否已完成订阅。可以在管理器内部维护一个subscribedTopics集合，每次on完成后添加主题，off时先判断是否存在：

// 调用off前先检查订阅状态
if (this.websocketTopicTest.isSubscribed('FOO')) {
  this.websocketTopicTest.off('FOO');
}

2. 进阶方案：给off添加预取消逻辑

修改off方法，当检测到主题未被订阅时，添加一个"预取消"标记。后续调用on时，先检查是否有该标记，若有则直接跳过订阅流程：

class WebSocketTopicManager {
  constructor() {
    this.subscribed = new Map(); // 存储已订阅的主题实例
    this.pendingUnsubscribes = new Set(); // 预取消主题集合
  }

  async on(topic) {
    // 检查是否有预取消标记，有则直接跳过订阅
    if (this.pendingUnsubscribes.has(topic)) {
      this.pendingUnsubscribes.delete(topic);
      return;
    }

    // 实际建立WebSocket连接的逻辑
    const subject = await this.initWebSocketConnection(topic);
    this.subscribed.set(topic, subject);
    return subject;
  }

  off(topic) {
    const subject = this.subscribed.get(topic);
    if (subject) {
      // 执行取消订阅、断开连接操作
      subject.unsubscribe();
      this.subscribed.delete(topic);
    } else {
      // 未订阅则添加预取消标记
      this.pendingUnsubscribes.add(topic);
    }
  }

  // 模拟WebSocket连接初始化
  async initWebSocketConnection(topic) {
    // 这里替换成实际的WebSocket连接代码
    return new Subject();
  }
}

这种方案下，无论先调用off还是on，都能正确处理订阅状态：

• 先off再on：on时检测到预取消标记，直接跳过订阅
• 先on再off：直接找到已订阅的实例并执行取消操作

内容的提问来源于stack exchange，提问作者THIAGO DE BONIS