如何通过Node.js Socket.IO检测聊天对方的输入框或标签页是否聚焦

看起来你完全搞反了逻辑方向哦！现在你的代码是在**接收消息的客户端（比如A）**检查自己的输入框状态，而不是你真正需要的——**聊天对象（B）**把自己的聚焦状态同步给A。这就是为什么不管实际情况如何，都只会显示"No new Message"的核心原因。

下面我给你梳理出完整的解决方案：

第一步：修正服务器逻辑（server.js） #

我们需要新增一个事件，用来接收客户端的聚焦状态并广播给其他用户：

io.on('connection', function(socket){
  // 原有的聊天消息处理逻辑
  socket.on('chatMessage', function(from, msg){
    io.emit('chatMessage', from, msg);
  });

  // 新增：处理客户端聚焦状态的同步广播
  socket.on('focusStatus', function(user, isFocused){
    // 把状态发送给除了当前用户之外的所有在线客户端
    socket.broadcast.emit('updateFocusStatus', user, isFocused);
  });
});

第二步：修改客户端交互逻辑（index.js） #

客户端需要完成三件事：监听自身的聚焦/失焦事件、把状态同步给服务器、接收对方的状态并在收到消息时做出正确判断：

var socket = io();
// 存储聊天对象的聚焦状态，默认设为未聚焦
var otherUserIsFocused = false;
// 假设当前用户的昵称存在#user输入框中
var currentUser = $('#user').val();

// 监听输入框的聚焦/失焦事件
$('#m').on('focus blur', function(e){
  var isFocused = e.type === 'focus';
  socket.emit('focusStatus', currentUser, isFocused);
});

// 监听浏览器标签页的聚焦/失焦事件
$(window).on('focus blur', function(e){
  var isFocused = e.type === 'focus';
  socket.emit('focusStatus', currentUser, isFocused);
});

// 接收服务器转发的对方聚焦状态更新
socket.on('updateFocusStatus', function(user, isFocused){
  // 如果是多用户聊天场景，这里需要判断user是不是当前聊天对象（比如B）
  otherUserIsFocused = isFocused;
});

// 原有的消息提交函数
function submitfunction(){
  var from = currentUser;
  var message = $('#m').val();
  socket.emit('chatMessage', from, message);
  $('#m').val('').focus();
  return false;
}

// 接收消息时根据对方的聚焦状态修改标题
socket.on('chatMessage', function(from, msg){
  $('#messages').append('<li><b style="color:' + color + '">' + from + '</b>: ' + msg + '</li>');
  
  if(otherUserIsFocused){
    document.title = "No new Message";
  }else{
    document.title = "New message just arrive";
  }
});

额外说明 #

如果是多用户聊天场景，你需要在updateFocusStatus事件里加一层判断：只有当发送状态的用户是当前聊天对象（比如B）时，才更新otherUserIsFocused的值，避免其他用户的状态干扰判断。

这样修改后，A就能准确获取B的输入框或标签页聚焦状态，从而正确修改页面标题啦！

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