如何使用onMount中定义的const发送WebSocket消息

pprl5pva 于 2023-10-20 发布在其他

关注(0)|答案(2)|浏览(157)

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

    let socket
    
    onMount(async () => {
        const socket = new WebSocket("ws://51.255.44.20:8001/test")
        socket.addEventListener("open", ()=> {
            console.log("Opened")
        })
        socket.addEventListener('message', function (event) {
            console.log(event.data);
        })
    });

    function onSendMessage() {
        console.log("I am trying to send a message");
        if (socket){
                console.log("Sending a message");
                if (socket.readyState <= 1) {
                    socket.send("test message");
                }
        }
    }

</script>

<div class="container h-full mx-auto flex justify-center items-center">
    <div>
        <button on:click={onSendMessage}>
            Send Message
        </button>
    </div>
</div>

我正在尝试向打开的WebSocket客户端发送消息。我在开头添加了一个let socket。在控制台上，我只能读到：

I am trying to send a message

所以控制台从不打印“发送消息”。我猜这个套接字对象不存在，但为什么呢？

websocket

来源：https://stackoverflow.com/questions/76979833/how-to-use-a-const-defined-in-onmount-to-send-a-websocket-message

2条答案

按热度按时间

3phpmpom1#

const socket"shadows"是外部声明，你在一个更有限的范围内创建一个新变量，而外部变量仍然是未定义的。只需删除const设置外部的一个。

赞(0）回复(0）举报 2023-10-20

4ktjp1zp2#

另一点要指出的是，对于只运行一次的代码，您不需要使用onMount。onMount将确保代码在组件第一次呈现后只运行一次。对于您的代码，您可以简单地删除onMount。代码也只会在组件创建时运行一次，您不必担心重复它（至少不会比onMount多）。

<script>
  const socket = new WebSocket("ws://51.255.44.20:8001/test");

  socket.addEventListener("open", ()=> {
    console.log("Opened");
  });

  socket.addEventListener('message', function (event) {
    console.log(event.data);
  });

  function onSendMessage() {
    console.log("I am trying to send a message");
    if (socket){
      console.log("Sending a message");
      if (socket.readyState <= 1) {
        socket.send("test message");
      }
    }
  }
</script>

赞(0）回复(0）举报 2023-10-20

我来回答

如何使用onMount中定义的const发送WebSocket消息

2条答案

相关问题

热门标签

最新问答