时间戳

首页 > 解决方案 > 如何在 HTML 中更新 var 的值？

javascript - 如何在 HTML 中更新 var 的值？

问题描述

我有一个关于通过 websocket 连接 java 服务器和 javascript 客户端的简单项目。这是我的 HTML 文件：

<body>

    <h3>Demo WebSocket</h3>


    <script type="text/javascript">
        var arr;
        var websocket;
        connect();
        function connect() {
            websocket = new WebSocket('ws://127.0.0.1:4444');

            websocket.onopen = function () {
                var i = (typeof websocket != 'undefined' && websocket.readyState == WebSocket.OPEN);
                textAreaMessage.value += "Server  ..." + i + "\n";
            };
            websocket.onmessage = function (message) { processMessage(message); };
            websocket.onclose = function (message) { processClose(message); };
            websocket.onerror = function (message) { processError(message); };
        }
        function disconnect() {
            websocket.close();
        }

        function processOpen(message) {
        }
        function processMessage(message) {
            console.log(message);
            arr = JSON.parse(message.data)
            textAreaMessage.value += "Response From Server ==> " + arr[0] + " \n";
        }
        function processClose(message) {
            textAreaMessage.value += "Server Disconnect... \n";
        }
        function processError(message) {
            textAreaMessage.value += "Error... " + message + " \n";
        }
        function sendMessage() {
            if (typeof websocket != 'undefined' && websocket.readyState == WebSocket.OPEN) {
                websocket.send(textMessage.value);
                textAreaMessage.value += "Send to Server ==> " + textMessage.value + " \n";
                textMessage.value = "";
            }
        }
    </script>
</body>

当服务器通过 websocket 向客户端发送字符串时，按摩的值将存储mesage.data但我将其转换为 JavaScript 对象使用arr = JSON.parse(message.data)
然后conole.log(arr)我看到：

在此处输入图像描述

我通过索引获得 arr 的每个元素，例如：arr[index]。
重要的是当新值通过 websocket 来时，元素的值也会改变。我想在页面中显示元素的值，当它的值改变时，它的显示值会自动改变。
有人可以帮助我吗？
对不起我的语法。
太感谢了！

标签： javascripthtml

解决方案

推荐阅读