我正在编写一个基于websocket的页面,该页面应该发送消息,然后获取一堆消息,更新UI并等待下一个用户操作。
然而,似乎每个传入的消息(即页面上的多个消息)都会撤消前一个消息所做的事情,这不是我想要的。我添加了警报,似乎每次send()的接收都会调用$ document.ready()和websocket.onload(尽管同一个send的多条消息都不会这样做)。有没有办法防止这种情况,或者我必须维护本地数据结构?或者我可能需要在每条消息上发送整个数据正文?
<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;
}
}