Question

$('#ws-show-log').click(function(){
  var webSocket = new WebSocket('ws://myhost.loc:8080');
  webSocket.onopen = function() {
    console.log('onopen');
  };
  webSocket.onmessage = function(event) {
    console.log('onmessage: ' + event.data);
  };
  webSocket.onclose = function() {
    console.log('onclose');
  };
  webSocket.onerror = function() {
    console.log('onerror');
  };
});

当我点击＃ws-show-log时 - 我会看到来自webSocket canal的所有消息：

onopen
onmessage message1
onmessage message2

但是当我第二次在控制台中的＃ws-show-log上点击时，所有邮件都是重复的，我看到了：

onopen
onmessage message1
onmessage message1
onmessage message2
onmessage message2

Answer 1

如果你想使用jQuery的once（）处理程序就建立一个与websocket的连接。

像这样使用

$('#ws-show-log').once('click', function() {
    // inner code
 }

如果要在每次单击#ws-show-log时建立与服务器的新连接，则应在使用后关闭连接。否则，连接将保持打开状态，每次单击#ws-show-log都会导致与服务器的额外连接。

您可以使用webSocket.close();关闭WebSocket。您可以将此关闭函数放在onmessage处理程序中。现在，当您收到服务器发来的消息时，WebSocket将被关闭。

你可以这样做：

webSocket.onmessage = function(event) {
    console.log('onmessage: ' + event.data);
    webSocket.close();
};

Answer 2

thnx @David，但在创建新的连接之前，所有工作都关闭。

var webSocket;
$('#ws-show-log').click(function(){

  if (webSocket) webSocket.close();

  webSocket = new WebSocket('ws://myhost.loc:8080');
  webSocket.onopen = function() {
    console.log('onopen');
  };
  webSocket.onmessage = function(event) {
    console.log('onmessage: ' + event.data);
  };
  webSocket.onclose = function() {
    console.log('onclose');
  };
  webSocket.onerror = function() {
    console.log('onerror');
  };
});

WebSocket收集回调

2 个答案: