如何通过Socket.io向所有连接客户端推送数据（含发送者）

我来帮你搞定这个广播消息的问题！你现在遇到的核心问题是当前代码只给发送消息的客户端自己推送了数据，没有把消息扩散到其他连接的用户。咱们一步步来改：

问题根源分析 #

在你的App.js里，当收到socket.on('send')事件时，你用了socket.emit('msgResult', data.msg)——这个方法只会给触发事件的那个socket（也就是发送消息的客户端自己）发送响应，其他在线用户根本收不到。而你需要的是广播给所有连接的客户端，包括发送者自己。

修改步骤 #

1. 修正后端（App.js）的广播逻辑 #

把原来的socket.emit换成io.emit，这样就能把消息推送给所有当前连接的客户端（包括发送者）：

const app = express();
const http = require("http").Server(app);
const io = require("socket.io")(http);

io.on('connection', (socket) => {
  console.log('Socket.io connected...');
  
  socket.on('send', (data) => {
    // 用io.emit替代socket.emit，实现全客户端广播
    io.emit('msgResult', data.msg);
  });
  
  socket.on('disconnect', () => {
    console.log("A socket disconnected ..");
  });
});

如果之后你需要给除发送者之外的所有用户发消息，可以用socket.broadcast.emit('msgResult', data.msg)，但这次你的需求是包括发送者，所以io.emit更合适。

2. 修正前端（Custom.js）的事件监听逻辑 #

你现在把socket.on('msgResult')放在了AJAX的success回调里，这会导致每次发送请求时都重复绑定这个事件，时间长了可能会出现一条消息被多次追加的问题。应该把事件监听移到AJAX外面，页面加载完成后就绑定一次：

var socket = io.connect("http://localhost:3000/");

// 提前绑定消息接收事件，只绑定一次
socket.on('msgResult', result => {
  $(".msgDiv").append(result);
});

$.ajax({
  url: 'sent',
  type: 'POST',
  data: { msg: 'Some message' },
  dataType: "json",
  success: function (data) {
    if (data.message) {
      // 只负责发送消息，接收逻辑已经在外面绑定好了
      socket.emit('send', { msg: data.msgResult });
    }
  }
});

验证效果 #

现在重启你的服务，打开多个浏览器窗口或者标签页连接到你的应用，当其中一个客户端发送消息时，所有窗口的.msgDiv都会追加这条消息，完美实现你要的实时同步效果！

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