2016-04-12 151 views
0

我有以下使用websockets與服務器通信的html/javascript代碼。看起來我只能在onmessage()onopen()功能裏只有send(message)。我如何在這些功能之外發送數據?用Websockets發送消息

<!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,就必須確保連接已打開。現在,您正試圖在連接實際打開之前同步使用這些send調用。

0

這是中信高科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>