是否可以在浏览器中使用websockets等待服务器

我想在浏览器（Chrome）和Android手机之间建立连接。我有一个应该一直打开的网页，应该等待在 Android 上的某个事件启动的服务器。

我的代码：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function waitForSocketConnection(socket, callback){
    setTimeout(
        function () {
            if (socket.readyState === 1) {
                console.log("Connection is made")
                if(callback != null){
                    callback();
                }
                return;
            } else {
                console.log("wait for connection...")
                waitForSocketConnection(socket);
            }
        }, 5); // wait 5 milisecond for the connection...
}
function WebSocketTest()
{
  if ("WebSocket" in window)
  {
     alert("WebSocket is supported by your Browser!");
     // Let us open a web socket
     var ws = new WebSocket("ws://192.168.0.15:8887");
     waitForSocketConnection(ws, function() {alert('callback')})
     ws.onopen = function()
     {
        // Web Socket is connected, send data using send()
        ws.send("Message to send");
        alert("Message is sent...");
     };
     ws.onmessage = function (evt) 
     { 
        var received_msg = evt.data;
        alert("Message is received...");
     };
     ws.onclose = function()
     { 
        // websocket is closed.
        alert("Connection is closed..."); 
     };
  }
  else
  {
     // The browser doesn't support WebSocket
     alert("WebSocket NOT supported by your Browser!");
  }
}
</script>
</head>
<body>
<div id="sse">
   <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>

如果我在服务器未运行时单击"运行 WebSocket"，则会收到警报"连接已关闭"，即使我启动服务器，也不会在控制台上收到"已建立连接"。它仅在我单击"运行 WebSocket"之前服务器运行时起作用。如何让它工作？

我认为你在WebSocketTest中遗漏了一些东西......

在ws.onclose您应该再次调用ws = new WebSocket..以在错误/断开连接时重新连接...

正常等待服务器可用是这样的

var ws = new WebSocket(host);
// if no connection is available or error occurred
ws.onclose = function() {
  // wait a bit and retry, don't flood the network ;)
  setTimeout( function(){ ws = new WebSocket(host); }, 100 );
}

同样有了这个，您不必显式检查就绪状态 - 只需将您的代码放在ws.onopen

编辑：

很难描述..阅读评论中指出的示例请;)

我正在执行以下操作来准备我的 WebSocket 以便在许多其他地方使用，而不仅仅是在 WebSocket readyState 更改后立即使用：

// https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
};
// (inside of async function)...
  const ws = new WebSocket(<webSocketServerUri>);
  let timeToConnect = 0;
  while (ws.readyState !== ws.OPEN) {
    await sleep(1);
    ++timeToConnect;
  };
  console.log('The WebSocket took ' + timeToConnect + ' milliseconds to connect.');
// (inside of async function)...
// ...
// (some other place in the code where 'ws' is accessible)...
  ws.send('my msg');
// (some other place in the code where 'ws' is accessible)...

相关内容

最新更新

热门标签：