Svelte中onMount内定义的WebSocket实例无法发送消息问题

问题根源 #

你在组件顶层声明的let socket和onMount钩子内用const socket创建的WebSocket实例，是两个互不关联的变量：

• 顶层的let socket是组件级变量，作用域覆盖整个组件；
• onMount里的const socket是钩子函数内部的局部变量，只在该函数内有效，完全没有给顶层的socket赋值。

所以点击发送按钮时，顶层的socket仍然是undefined，后续发送逻辑自然无法执行。

修复方法 #

直接去掉onMount里的const关键字，把WebSocket实例赋值给顶层的let socket，确保整个组件使用同一个变量：

<script>
  import { onMount, onDestroy } from 'svelte';

  // 顶层声明socket变量
  let socket;

  onMount(() => {
    // 直接赋值给顶层socket，不要重新声明
    socket = new WebSocket('ws://你的WebSocket服务地址');

    // 可选：监听连接状态
    socket.onopen = () => {
      console.log('WebSocket连接已建立');
    };

    socket.onerror = (error) => {
      console.error('WebSocket连接出错:', error);
    };
  });

  function sendMessage() {
    console.log('I am trying to send a message');
    // 先判断socket存在且处于连接状态
    if (socket && socket.readyState === WebSocket.OPEN) {
      socket.send('要发送的消息内容');
      console.log('消息发送成功');
    } else {
      console.log('socket未初始化或未连接');
    }
  }

  // 组件销毁时关闭socket，避免内存泄漏
  onDestroy(() => {
    socket?.close();
  });
</script>

<button on:click={sendMessage}>发送消息</button>

额外注意事项 #

• 发送消息前一定要检查socket.readyState，只有当状态为WebSocket.OPEN（值为1）时，才能安全调用send方法；
• 组件销毁时记得关闭WebSocket连接，防止不必要的资源占用。

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