io.socket在函数声明中未定义,在其外部定义

时间:2014-08-14 06:51:39

标签: javascript node.js sockets sails.js

所以我试图使用io.socket对一些控制器动作进行POST调用。奇怪的是,当我在这样的脚本标签中使用io.socket.someMethod()时,它可以正常工作:

<script>
io.socket.post('/visualization/star', { id: visualID }, function (resData, jwres) {
  var star = document.getElementById("star-" + visualID.toString());
  if (star.className == "gold-star glyphicon glyphicon-star-empty md") {
    star.className = "grey-star glyphicon glyphicon-star-empty md";
  } else {
    star.className = "gold-star glyphicon glyphicon-star-empty md";
  }
});
</script>

但是将它放在函数声明中会使io.socket呈现undefined

<script>
function starVisual(visualID) {
  io.socket.post('/visualization/star', { id: visualID }, function (resData, jwres) {
    var star = document.getElementById("star-" + visualID.toString());
    if (star.className == "gold-star glyphicon glyphicon-star-empty md") {
      star.className = "grey-star glyphicon glyphicon-star-empty md";
    } else {
      star.className = "gold-star glyphicon glyphicon-star-empty md";
    }
  });
}
</script>

alert(io.socket)放在函数声明之外会产生一个对象,而将它放在函数声明中的第一行会产生undefined

我也试过了window.io.socket,但这导致了同样的事情。当页面首次通过我的sails.io.js加载时,JS文件layouts.ejs在开头就被包含并正确加载。还尝试<script>window.io = io</script>无效。

我将它放在一个函数声明中,以便我可以在单击图标时将其用作onclick属性的一部分: <td class="star-wrap"><span id="star-<%= visualization.id %>" class="grey-star glyphicon glyphicon-star-empty md" onclick="starVisual(<%= visualization.id %>).bind(this);"></span></td>

任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:0)

我设置了与您相似的功能,一切似乎都很开心。

问题可能是竞争条件。 sails.io脚本加载在正文的底部(确保将脚本置于其下)。如果在加载脚本之前console.log()有任何内容,则会出现未定义的错误。

答案 1 :(得分:0)

如果有人遇到此问题,以备将来参考,我通过执行以下操作解决了这个问题:

<script>
window.socket = socket.io
function starVisual(visualID) {
io.socket.post('/visualization/star', { id: visualID }, function (resData, jwres) {
  var star = document.getElementById("star-" + visualID.toString());
  if (star.className == "gold-star glyphicon glyphicon-star-empty md") {
    star.className = "grey-star glyphicon glyphicon-star-empty md";
  } else {
    star.className = "gold-star glyphicon glyphicon-star-empty md";
    }
  });
}
</script>