如何使用WebSocket Resource Id关闭已建立的对应WebSocket连接？

问题根因 #

你现有代码的核心问题是：每次执行new WebSocket()都会创建一个全新的连接实例，和你已经存在的历史活跃连接没有关联，自然无法关闭目标连接。你需要提前把所有已创建的活跃连接实例统一存储，后续操作时直接取出对应实例执行关闭即可。

实现步骤 #

1. 声明全局的连接映射表，用你持有的Resource Id作为键，对应的WebSocket实例作为值存储
2. 所有连接在初始化创建时就存入该映射表，避免重复创建
3. 点击Unlock按钮时，传入对应连接的Resource Id，从映射表中取出目标实例执行关闭操作

参考代码 #

// 全局活跃连接映射表
const activeSocketMap = new Map()

// 初始化连接的方法，连接创建时调用
function createSocket(resourceId, wsAddress) {
  // 避免重复创建同Resource Id的连接
  if (activeSocketMap.has(resourceId)) return
  const socket = new WebSocket(wsAddress)
  socket.onopen = () => {
    console.log(`连接${resourceId}已建立`)
  }
  // 连接自然关闭时自动从映射表移除
  socket.onclose = () => {
    activeSocketMap.delete(resourceId)
    console.log(`连接${resourceId}已断开`)
  }
  socket.onerror = (err) => {
    console.error(`连接${resourceId}出错`, err)
  }
  // 存入映射表
  activeSocketMap.set(resourceId, socket)
}

// Unlock按钮点击触发的关闭方法
function closeTargetSocket(resourceId) {
  if (!activeSocketMap.has(resourceId)) {
    console.log(`未找到${resourceId}对应的活跃连接`)
    return
  }
  const targetSocket = activeSocketMap.get(resourceId)
  // 重写onclose逻辑避免冲突
  targetSocket.onclose = () => {
    activeSocketMap.delete(resourceId)
    console.log(`连接${resourceId}已手动关闭`)
  }
  targetSocket.close()
}

使用示例 #

初始化连接时调用：

createSocket('CP0002', 'ws://localhost:6001/ocpp/CP0002')

Unlock按钮绑定逻辑：

<button onclick="closeTargetSocket('CP0002')">Unlock</button>

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