客户端关闭WebSocket后Chrome网络面板仍显示101状态，React代码是否有误？

你的处理方式没有本质问题，Chrome开发者工具网络面板显示的101是WebSocket初始握手成功的状态码，这个状态会固定显示在对应的网络条目上，不会随连接关闭而更新——这是DevTools的显示逻辑，不是代码错误。

关键细节说明 #

• 你调用socket?.close(4003, 'Clicked close socket button')是标准的客户端关闭WebSocket方式，自定义状态码4003属于WebSocket规范允许的私有状态码范围（4000-4999），完全合规。
• onclose事件触发并打印日志、服务器确认关闭、重新连接生成新网络条目，这些都是WebSocket的正常行为：每次新连接都是独立的TCP连接，会在网络面板新增一条记录。

可选优化建议 #

• 关闭连接后，建议将socket实例置为null，避免后续误操作调用已失效的连接对象：

  onClick={() => {
    socket?.close(4003, 'Clicked close socket button');
    setSocket(null); // 假设使用useState管理socket实例
  }}
  

• 可以在onclose事件中添加连接状态同步逻辑，优化UI交互：

  newSocket.onclose = (event) => {
    console.log('WebSocket closed:', event.code, event.reason);
    setIsConnected(false); // 用状态变量跟踪连接状态，更新对应UI
  };
  

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