未接收套接字的其他用户ReactJS套接字

Question

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

下面是代码：

服务器

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从后端接收套接字)，我打开两个选项卡，连接到io服务器(高速公路)，在我的高速公路上运行一个setInterval，它每2秒运行一次"client.emit“，两个客户端接收它，控制台记录它。

第二个选项(前端单击" TEST“按钮，向后端发出一个套接字)，相同，打开2个选项卡，第一个用户单击向后端发射套接字的测试按钮，然后在后端，它侦听事件套接字，现在它返回到具有事件名称"fromBackend”的前端，该前端在组件im侦听它，运行"messageListen“到ComponentDidMount生命周期。现在的问题是，单击“测试”按钮的用户从后端接收回数据，但其他用户没有收到任何信息

最后一个(将client.emit('fromBackend')更改为client.broadcast.emit('fromBackend') )，与第二个场景相同，第一个用户单击测试按钮，发送到后端，现在又发送回前端，这一次，单击测试按钮的用户没有收到任何消息(因为广播)，但是现在另一个用户从后端接收到套接字。

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

谢谢!

Answer 1

根据socket.io关于".broadcast.emit()“的文档 设置后续事件发射的修饰符，该事件数据将只广播到每个套接字，而不是发送方。

因此，如果使用.broadcast.emit，socket.io会将数据发送到除发送方以外的所有客户端。

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

下面是到socket.io文档上的“发出备忘单”的链接，wich是一个简短描述的事件列表。

socket.io发出-作弊表