ReactJS Socket io其他用户未收到套接字

Question

我有一个 Web 应用程序，它是 Reactjs 和 Expressjs。我试图让socket io在reactjs上工作，我遇到了一个问题，当我从前端发出一些东西时，后端会得到socket，但是当它发射回前端时，发送socket的用户会得到它，但其他用户不是。

代码如下：

服务器

io.on('connection', (client) => {

  setInterval(() => {
    client.emit('testing', 'From backend')
  }, 2000)

  client.on('sendMessage', (data) => {
    client.emit('fromBackend', 'This is from Backend boi');
  });

});

客户端 - apisocket.js

import openSocket from 'socket.io-client';

const socket = openSocket('http://localhost:8000');

export const sendMessage = (data) => {
  socket.emit('sendMessage', data)
}

export const messageListen = (cb) => {
  socket.on('fromBackend', data => {
    return cb(null, data);
  });
}

export const messageTestListen = (cb) => {
  socket.on('testing', data => {
    return cb(null, data);
  });
}

组件

import React, { Component } from "react";
import { sendMessage, messageListen, messageTestListen } from "../../api";

class Controls extends Component {
  constructor() {
    super();
    this.state = {
      message: ""
    };
  }

  componentDidMount() {
    messageListen((err, data) => {
      console.log("Message from the Backend: ");
      console.log(data);
    });
    messageTestListen((err, data) => {
      console.log("Interval");
      console.log(data)
    })
  }

  socketTest = () => {
    sendMessage();
  };

  render() {
    return (
      <button className="btn btn-primary" onClick={this.socketTest}>
        Test
      </button>
    );
  }
}

export default Controls;

这是我的代码， 现在我尝试调试它并遇到 3 个奇怪的行为：

第一个（两个选项卡都通过 setInterval 从后端接收套接字），我打开 2 个选项卡，连接到 io 服务器（expressjs），我在我的 expressjs 上运行了一个 setInterval，它每 2 秒运行一次“client.发射” 2 个客户端正在接收它并在控制台记录它。

第二个（前端单击“测试”按钮，向后端发出套接字），同样，打开 2 个选项卡，第一个用户单击向后端发出套接字的 TEST 按钮，然后在后端，它侦听套接字事件，现在它发回具有事件名称“fromBackend”的前端，该事件在我正在侦听它的组件上运行“messageListen”到 ComponentDidMount 生命周期。现在的问题是，点击TEST按钮的用户，从后端收到了数据，但其他用户没有收到任何东西

最后一个（将 client.emit('fromBackend') 更改为 client.broadcast.emit('fromBackend') ），与第二个场景相同，第一个用户单击 TEST 按钮，向后端发出，现在发出回到前端，这次点击TEST按钮的用户没有收到任何东西（因为广播），但是现在另一个用户从后端收到了套接字。

为什么会这样？任何帮助将不胜感激。

谢谢！

Answer 1

根据 socket.io 文档“.broadcast.emit()”

为后续的事件发射设置一个修饰符，即事件数据只会广播到除发送者之外的每个套接字。

所以如果你使用 .broadcast.emit socket.io 将数据发送给除发送者之外的所有客户端。

如果你只使用 .emit ，它只会将数据发送到服务器接收数据的客户端。

下面是 socket.io 文档中“发送备忘单”的链接，这是一个带有简短描述的事件列表。

socket.io emit-cheatsheet