一个使用 html、javascript 和 jQuery 的简单示例答案

【问题标题】：A simple example using html, javascript and jQuery一个使用 html、javascript 和 jQuery 的简单示例
【发布时间】：2018-02-12 17:48:19
【问题描述】：

我从 javascript、websockets 和 jQuery 开始开发一个简单的示例。在 html 页面中，我只有一个按钮，按下时必须发送其状态（例如 ON/OFF）。在 index html 中，我有以下代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"></meta>
    <title>First App</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/APP.js"></script>
</head>

<body>
        <div id='hello_message'>
                Connecting...
        </div>
        <button id='state'>Turn on</button>
        <div id='off'>OFF</div>
        <div id='on'>ON</div>

</body>
</html>

我的目的是在加载页面时在客户端和服务器之间打开一个 websocket，并保持打开状态以便在两者之间发送任何信息。为此，我有以下包含js代码（APP.js）的文件：

window.onload = APPStart;

// Page onload event handler
function APPStart() {
    state = false;

    if ("WebSocket" in window)
    {
        var ws = new WebSocket("ws://10.30.0.142:8020");

        ws.onopen = function()
        {
            alert ("Connected");
            $('#hello_message').text("Connected");
        };

        ws.onmessage = function (evt)
        {
            var received_msg = evt.data;
        };

        ws.onclose = function()
        {
             alert("Connection is closed...");
        };

        window.onbeforeunload = function(event) {
             socket.close();
        };
    }

    else
    {
        // The browser doesn't support WebSocket
        alert("WebSocket NOT supported by your Browser!");
    }}

现在，每次有人点击按钮时，我想执行以下代码：

        // program checks if led_state button was clicked
        $('#state').click(function() {
            alert ("click");
            // changes local led state
            if (led_state == true){
                $('#on').hide();
                $('#off').show();
                state = false;
                ws.send("ON");
            }
            else{
                $('#off').hide();
                $('#on').show();
                state = true;
                ws.send("OFF");
            }
        });

我尝试将这部分代码放在函数 APPStart 中，但它不起作用。我还怀疑 jQuery 也无法正常工作，因为消息没有更新。有什么建议让它发挥作用吗？

【问题讨论】：

好吧，ws 是在 APPStart 内部定义的，所以您是否在 APPStart 内部添加了 onclick？
您的客户端控制台有错误吗？你能提供你的服务器实现吗？

标签： javascript jquery html button

【解决方案1】：

感谢 cmets。代码有效，问题出在浏览器的缓存中。一旦我注意到它，我就清理了缓存，一切都开始工作了。傻我。

【讨论】：