从客户端调用服务器端内部函数

Question

我有一张扑克牌，它使用cardCreateNode方法来显示卡片图像。我在服务器端有这张卡.js文件。发牌后，我希望客户端使用 card.createNode 方法显示牌的图像，客户端文件是全局的.js。但是我收到错误"createNode不是一个函数。

节点服务器上的卡.js文件 .js 卡

function Card(rank, suit) {
this.rank = rank;
this.suit = suit;
this.toString   = cardToString;
this.createNode = cardCreateNode;
}

用于卡片显示的 DIV 节点

function cardCreateNode() {
var cardNode, frontNode, indexNode, 
spotNode, tempNode, textNode;
var indexStr, indexStrB, spotChar, 
backNode;
// This is the main node, a DIV tag.
cardNode = 
document.createElement("DIV");
cardNode.className = "card";
// Build the back of the card
backNode = 
document.createElement("DIV");
backNode.setAttribute("style", 
"background-color:red; font- 
size:2em;");
backNode.className = "back";
// Build the front of card.
frontNode = 
document.createElement("DIV");
frontNode.className = "front";
// Get proper character for card suit 
and change font color if necessary.
spotChar = "u00a0";
switch (this.suit) {
case "C" :
spotChar = "u2663";
break;
case "D" :
frontNode.className += " red";
spotChar = "u2666";
break;
case "H" :
frontNode.className += " red";
spotChar = "u2665";
break;
case "S" :
spotChar = "u2660";
break;
}
// Create and add the index (rank) to 
the upper-left corner of the card.
indexStr = this.rank;
if (this.toString() == "")
indexStr = "u00a0";
spotNode = 
document.createElement("DIV");
spotNode.className = "index";
textNode = 
document.createTextNode(indexStr);
spotNode.appendChild(textNode);
spotNode.appendChild
(document.createElement("BR"));
textNode = 
document.createTextNode(spotChar);
spotNode.appendChild(textNode);
frontNode.appendChild(spotNode);
// Create and add the index (rank) to 
the bottom-right corner of the card.
indexStrB = this.rank;
if (this.toString() == "")
indexStrB = "u00a0";
spotNode = 
document.createElement("DIV");
spotNode.className = "bottomindex";
textNode = 
document.createTextNode(indexStrB);
spotNode.appendChild(textNode);
spotNode.appendChild
(document.createElement("BR"));
textNode = 
document.createTextNode(spotChar);
spotNode.appendChild(textNode);
frontNode.appendChild(spotNode);
// Create and add spots based on card 
rank (Ace thru 10).
spotNode = 
document.createElement("DIV");
textNode = 
document.createTextNode(spotChar);
spotNode.appendChild(textNode);
if (this.rank == "A") {
spotNode.className = "ace";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
}
if (this.rank == "3" || this.rank == 
"5" || this.rank == "9") {
spotNode.className = "spotB3";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
}
if (this.rank == "3") {
spotNode.className = "spotB1";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
}
if (this.rank == "3") {
spotNode.className = "spotB5";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
}
if (this.rank == "4" || this.rank == 
"5" || this.rank == "6" ||
this.rank == "7" || this.rank == "8" 
|| this.rank == "9" ||
this.rank == "10") {
spotNode.className = "spotA1";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
spotNode.className = "spotA5";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
spotNode.className = "spotC1";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
spotNode.className = "spotC5";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
}
if (this.rank == "6" || this.rank == 
"7" || this.rank == "8") {
spotNode.className = "spotA3";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
spotNode.className = "spotC3";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
}
if (this.rank == "7" || this.rank == 
"8" || this.rank == "10") {
spotNode.className = "spotB2";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
}
if (this.rank == "8" || this.rank == 
"10") {
spotNode.className = "spotB4";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
}
if (this.rank == "9" || this.rank == 
"10") {
spotNode.className = "spotA2";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
spotNode.className = "spotA4";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
spotNode.className = "spotC2";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
spotNode.className = "spotC4";
tempNode = spotNode.cloneNode(true);
frontNode.appendChild(tempNode);
}
// Add front node to the card node.
cardNode.appendChild(frontNode);
// Add Back node to the card node.
cardNode.appendChild(backNode);
// Return the card node.
return cardNode;
}

在服务器端，我把牌发给玩家 然后向客户端发送套接字请求以显示已发牌。

//gameController.js
socket.on('deal', function() {
var gbaguduGame = 
tables[socket.room];
gbaguduGame.deal();
var gameData = {};
gameData.players = 
gbaguduGame.players;
io.to(socket.room).emit('dealt', 
gameData);
});

在全局.js文件中的客户端，我有此代码

socket.on('dealt', function(gameData) {
for(var i=0; i<Object.keys(gameData.players).length; i++) {
for(var n=0; n < gameData.players[Object.keys(gameData.players)[i]].cardsHand.length; n++) {
var whom = gameData.players[Object.keys(gameData.players)[i]];
console.log("The whom in gamedata players: " + JSON.stringify(whom));
whom.cardsNode = whom.seat + "Cards";
var node = whom.cardsHand[n].createNode();
node.setAttribute("id", "card" + n);
node.firstChild.style.visibility = "hidden";
whom.cardsNode.appendChild(node);
}
};
});

我在var node = whom.cardsHand[n].createNode((中得到错误;因为它说createNode不是一个函数。如何从客户端调用 Card 对象中的创建节点函数？

Answer 1

var node = whom.cardsHand[n].createNode(); 

不起作用，因为客户端无法访问服务器上的功能。(我相信这是一项安全功能(。它可以访问卡的其他属性，如下所示; var node = whom.cardsHand[n].rank; 或 'var node = whom.cardsHand[n].suit; 但它无法访问 var node = whom.cardsHand[n].toString; 或 var node = whom.cardsHand[n].createNode((; 因为这些是函数。

解决方法和对我问题的回答是将 cardCreateNode 函数移动到客户端，因为它可以并且只会在客户端用于将卡片图像呈现给客户端。

希望我没有浪费你的时间，这在某种程度上很有用！！ 谢谢。