Question

我有以下html / javascript代码，它使用websockets与服务器通信。我似乎只能在send(message)和onmessage()函数内部onopen()。如何在这些功能之外发送数据？

<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript">
        function WebSocketTest() {
            if ("WebSocket" in window) {
                var ws = new WebSocket("ws://localhost:57252/");

                ws.onopen = function () {
                    ws.send("Hi, from the client."); // this works
                    alert("Connection opened...");
                };

                ws.onmessage = function (event) {
                        alert("Message received..." + event.data);
                };

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

                ws.send("Hi, from the client."); // doesn't work
                ws.send("Hi, from the client."); // doesn't work
            }
        }
    </script>
</head>
<body>

<div id="sse">
    <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>

</body>
</html>

Answer 1

即使套接字尚未打开，您可能会遇到竞争条件，即尝试执行send命令。有一个重要的注释on the MDN描述了这种行为：

由于建立连接是异步的并且容易出现故障，因此无法保证在创建WebSocket对象后立即调用send（）方法将成功。

基本上，您在创建WebSocket后立即调用send方法。

如果您将该逻辑移动到某个函数并在您知道连接已打开时调用该函数，那么您可能没问题。例如，尝试将代码移动到超时或其他可以在您知道已建立套接字连接后手动触发的函数：

function sendMyMessages() {
    ws.send("Hi, from the client.");
    ws.send("Hi, from the client.");
}

<button onclick="sendMyMessages()">Test</button>

Answer 2

因为onopen是异步事件。

这与此类似：

var value;
$.ajax({
   url: '/post/data',
   success: function(response) {
        value = response;
   }
});

alert(value);

我们在警报中得到什么？ undefined。

websocket以类似的方式工作，在连接完成打开之前，您不能send。它以异步方式打开。因此，只要您尝试使用send，就必须确保连接已经打开。现在，您正在尝试在连接实际打开之前同步使用这些send调用。

Answer 3

这是Sanic webserver websocket demo的html文件。

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket demo</title>
</head>
<body>
    <script>
        var ws = new WebSocket('ws://' + document.domain + ':' + location.port + '/feed'),
            messages = document.createElement('ul');
        ws.onmessage = function (event) {
            var messages = document.getElementsByTagName('ul')[0],
                message = document.createElement('li'),
                content = document.createTextNode('Received: ' + event.data);
            message.appendChild(content);
            messages.appendChild(message);
        };
        document.body.appendChild(messages);
        window.setInterval(function() {
            data = 'bye!'
            ws.send(data);
            var messages = document.getElementsByTagName('ul')[0],
                message = document.createElement('li'),
                content = document.createTextNode('Sent: ' + data);
            message.appendChild(content);
            messages.appendChild(message);
        }, 1000);
    </script>
</body>

使用Websockets发送消息

3 个答案: