2016-04-12 14 views
0

私は以下のhtml/javascriptコードを使用してWebSocketを使用してサーバーと通信しています。私はonmessage()onopen()の機能の中でしかsend(message)しかできないようです。どうすればこれらの機能の外にデータを送信できますか?Websocketでメッセージを送信する

<!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> 

答えて

2

ソケットがまだ開かれていない場合でも、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> 
1

onopenは非同期イベントであるためです。

それは、これを行うに似て:私たちは、アラートに

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

alert(value); 

何を得るのですか? undefined

websocketも同様の方法で動作しますが、接続が完了するまでsendを実行することはできません。非同期で開きます。したがって、いつでもsendを使用しようとすると、接続が既に開いていることを確認する必要があります。今、接続が実際に開かれる前に、これらの呼び出しを同期的に使用しようとしています。

0

これはSanic Webサーバ用WebSocketのデモの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> 

関連する問題