javascript - 从客户端调用服务器端内部函数
问题描述
我有一张扑克牌,它使用 cardCreateNode 方法显示卡片图像。我在服务器端有这个 card.js 文件。发牌后,我希望客户端使用 card.createNode 方法显示卡片的图像,客户端文件是 global.js。但我收到错误“createNode 不是函数。
Node.js 服务器上的 card.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);
});
在 global.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 = who.cardsHand[n].createNode(); 中得到错误 正如它所说的 createNode 不是一个函数。如何从客户端调用 Card 对象中的创建节点函数?
解决方案
var node = whom.cardsHand[n].createNode();
没有工作,因为客户端无法访问服务器上的功能。(我相信这是一项安全功能)。它可以访问卡片的其他属性,如下所示;var 节点 = who.cardsHand[n].rank; //或`var node = who.cardsHand[n].suit; 但它无法访问 var node = who.cardsHand[n].toString; 或 var node = who.cardsHand[n].createNode(); 因为这些是功能。
我的问题的解决方法和答案是将 cardCreateNode 函数移动到客户端,因为它可以并且只会在客户端用于将卡片图像呈现给客户端。
希望我没有浪费您的时间,这在某种程度上很有用!谢谢。
推荐阅读
- android - Appium - 无法创建新的远程会话
- php - 如何通过数组的值过滤我的学说请求?
- gradle - 如何在 Java 中使用 Tensorflow lite?
- gradle - 梯度异常。未找到 Flutter SDK
- android - 从类到活动使用 startActivityForResult
- windows - 从位于子模块中的目标构建安装程序
- java - 为什么我的 ArrayList 只打印出最后一个被调用的子类?
- fortran - 如果在 fortran 77 中使用算术
- spring - 如何使用 ExceptionHandler 在 Spring Boot Rest 中包装 Path Not Found 异常?
- r - 在 R 中提炼一个简单的代码,一切正常,我想完善它