首页 > 解决方案 > 从客户端调用服务器端内部函数

问题描述

我有一张扑克牌,它使用 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 对象中的创建节点函数?

标签: javascriptnode.js

解决方案


    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 函数移动到客户端,因为它可以并且只会在客户端用于将卡片图像呈现给客户端。

希望我没有浪费您的时间,这在某种程度上很有用!谢谢。


推荐阅读