javascript - 为什么网页会在 Websocket.onmessage 上重新加载

Question

我正在编写一个基于 websocket 的页面，它应该发送一条消息，然后获取一堆消息，更新 UI 并等待下一个用户操作。

然而，似乎每条传入的消息（即页面上的多个 onmessage）都会撤消前一个消息所做的事情，这不是我想要的。

我添加了警报，似乎在每次 send() 的接收中，都调用了 $document.ready() 和 websocket.onload（尽管发送到同一发送的多条消息不会这样做）。有什么办法可以防止这种情况发生，还是我必须维护一个本地数据结构？或者我可能需要在每条消息上发送整个数据体？

<script language="javascript" type="text/javascript">
<!--
var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket;
var wsUri = "ws://localhost:9000/nodeWS";

window.addEventListener("load", init, false);

function init() {
  alert("init")
  $("#addNodeForm").submit(function(evt){
    addNode();
  }); 
  testWebSocket();
}

function testWebSocket() {
  /*var createSocket = new WS("@routes.Nodes.watchNodeCollection");*/
  if ('WebSocket' in window) {
    try{
      websocket = new WebSocket(wsUri);
  /*      alert("WebSocket created");*/
    } catch (e) {
      alert("exception creating WebSocket: " + e);
    }
  }
  else if ('MozWebSocket' in window) {
    try{
      websocket = new MozWebSocket(wsUri);
  /*      alert("MozWebSocket created");*/
    } catch (e) {
      alert("exception creating MozWebSocket: " + e);
    }
  }
  else {

    alert("no websocket support found");
  }   
  /*  alert("websocket created");*/
    websocket.onopen = function(evt) {
      alert("onopen")
      getAllNodes();
    };
    websocket.onclose = function(evt) { 
      onClose(evt);
      alert("onClose ended");
    };
  websocket.onmessage = receive
}

var receive = function onMessage(evt) { 
  evt.stopPropagation()
  evt.preventDefault()
  var data = JSON.parse(evt.data);

  if (data.error){   document.getElementById("messageBox").removeClass().addClass("errorbox").innerHTML(data.error).fadeIn(2000).fadeOut(4000);
  } 
  if (data.message){
document.getElementById("messageBox").removeClass().addClass("confirmbox").innerHTML(data.message)/*.fadeIn(2000).fadeOut(4000);
  }
  if (data._id) { 
      addNodeRowToTable(data.doc);
  }
}
function addNodeRowToTable(data){
...add node to table...
}

function addNode() {
  var address = document.getElementById("address")

  websocket.send(JSON.stringify({
    type : "addNode",
    address : address.value.length>0 ? address.value : null
  }))      
}

function getAllNodes(){
  websocket.send(JSON.stringify(
      {
      type : "getAllNode"
    }
    )) 
}


var handleReturnKey = function(e) {
  if(e.charCode == 13 || e.keyCode == 13) {
    e.preventDefault()
    addNode()
    return false;
  }
}