websocket - svelte 中的 Websocket 连接到 esp asyncwebserver

问题描述

我是 svelte 新手，想构建一个 websocket 服务器（在 esp32 asyncwebserver 中）以使用 websocket 连接到浏览器（使用 svelte 构建）。但我不知道为什么我的浏览器无法连接到服务器。我在普通的 html 文件上执行相同的 js 代码，它可以正常工作，但是当我在 svelte 的脚本标记中执行相同操作时，它不起作用。如果您知道我的问题是什么，请帮助我，非常感谢。这是我在浏览器中的 html 中的 websocket 配置（它有效，但在 svelte 上也没有）

<!-- WEBSOCKET INTERFACE -->
<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>

<script language="javascript" type="text/javascript">

    var url = "ws://192.168.1.8/ws";
    var output;
    var button;
    var canvas;
    var context;

    // This is called when the page finishes loading
    function init() {

        // Assign page elements to variables
        button = document.getElementById("toggleButton");
        output = document.getElementById("output");
        canvas = document.getElementById("led");

        // Draw circle in canvas
        context = canvas.getContext("2d");
        context.arc(25, 25, 15, 0, Math.PI * 2, false);
        context.lineWidth = 3;
        context.strokeStyle = "black";
        context.stroke();
        context.fillStyle = "black";
        context.fill();

        // Connect to WebSocket server
        wsConnect(url);
    }

    // Call this to connect to the WebSocket server
    function wsConnect(url) {

        // Connect to WebSocket server
        websocket = new WebSocket(url);

        // Assign callbacks
        websocket.onopen = function (evt) { onOpen(evt) };
        websocket.onclose = function (evt) { onClose(evt) };
        websocket.onmessage = function (evt) { onMessage(evt) };
        websocket.onerror = function (evt) { onError(evt) };
    }

    // Called when a WebSocket connection is established with the server
    function onOpen(evt) {

        // Log connection state
        console.log("Connected");

        // Enable button
        button.disabled = false;

        // Get the current state of the LED
        doSend("getLEDState");
    }

    // Called when the WebSocket connection is closed
    function onClose(evt) {

        // Log disconnection state
        console.log("Disconnected");

        // Disable button
        button.disabled = true;

        // Try to reconnect after a few seconds
        setTimeout(function () { wsConnect(url) }, 2000);
    }

    // Called when a message is received from the server
    function onMessage(evt) {

        // Print out our received message
        console.log("Received: " + evt.data);

        // Update circle graphic with LED state
        switch (evt.data) {
            case "zero":
                console.log("LED is off");
                context.fillStyle = "black";
                context.fill();
                break;
            case "one":
                console.log("LED is on");
                context.fillStyle = "red";
                context.fill();
                break;
            default:
                break;
        }
    }

    // Called when a WebSocket error occurs
    function onError(evt) {
        console.log("ERROR: " + evt.data);
    }

    // Sends a message to the server (and prints it to the console)
    function doSend(message) {
        console.log("Sending: " + message);
        websocket.send(message);
    }

    // Called whenever the HTML button is pressed
    function onPress() {
        doSend("toggleLED");
        doSend("getLEDState");
    }

    // Call the init function as soon as the page loads
    window.addEventListener("load", init, false);

</script>

<h2>LED Control</h2>

<table>
    <tr>
        <td><button id="toggleButton" onclick="onPress()" disabled>Toggle LED</button></td>
        <td><canvas id="led" width="50" height="50"></canvas></td>
    </tr>
</table>

标签： websocketsvelte

websocket - svelte 中的 Websocket 连接到 esp asyncwebserver

问题描述

解决方案

推荐阅读