Socket.IO客户端接收rating值先显示后变为undefined问题求助

看起来你遇到的问题根源其实出在服务器端的Socket.IO数据发送方式，再加上客户端代码里的一个小细节，导致了rating显示异常的情况。

1. 服务器端的核心错误 #

你的server.js里，io.sockets.emit的调用方式不对：

io.sockets.emit('broadcast',{description: outputText}, {rating: rating});

Socket.IO的emit方法，在发送事件数据时，应该把所有需要传递的字段放在同一个对象里，而不是传两个独立的对象。你现在的写法相当于给broadcast事件发送了两个分开的参数，客户端只接收了第一个参数（也就是包含description的对象），所以客户端里的data.rating自然是undefined。

2. 客户端的覆盖问题 #

再看你的客户端代码：

socket.on('broadcast',function(data) { 
  document.getElementById("output").innerHTML = data.rating; 
  document.getElementById("output").innerHTML = data.description; 
  console.log(data); 
  console.log(data.rating); 
});

就算服务器端传对了数据，你这里先把output的内容设为data.rating，紧接着又把它改成data.description，页面上只会显示最后赋值的description，这也会让你误以为rating“消失”了。

修正后的代码 #

服务器端（server.js）

把两个字段合并到同一个对象里发送：

biasDetector.stdout.on('data', function(data) { 
  var outputText = data.toString('utf8'); 
  var rating = (reliabilityResult['type']); 
  console.log(outputText); 
  console.log("Second check" + rating); 
  // 把description和rating放在同一个对象中
  io.sockets.emit('broadcast', {
    description: outputText,
    rating: rating
  }); 
});

客户端代码

如果要同时显示rating和description，不要覆盖同一个元素的innerHTML，比如可以用两个不同的元素，或者把内容拼接起来：

var socket = io(); 
socket.on('broadcast',function(data) { 
  // 示例1：用两个不同的元素分别显示
  document.getElementById("rating-output").innerHTML = data.rating; 
  document.getElementById("description-output").innerHTML = data.description; 

  // 示例2：如果要放在同一个元素里，拼接内容
  // document.getElementById("output").innerHTML = `评分：${data.rating}，描述：${data.description}`;

  console.log(data); 
  console.log(data.rating); 
});

这样修改后，rating和description就能正常显示，不会出现undefined的情况了。

内容的提问来源于stack exchange，提问作者javathunderman