Question

我有一个Reactjs和Expressjs的Web应用程序。我正在尝试让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接收套接字），我打开2个标签，连接到io服务器（expressjs），我有一个setInterval在我的expressjs上运行，每2秒运行一次“客户端”。发射” 2个客户端正在接收它并控制台记录它。

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

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

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

谢谢！

Answer 1

根据“.broadcast.emit（）”
上的socket.io文档

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

所以，如果您使用.broadcast.emit，socket.io会将数据发送给除发件人之外的所有客户端。

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

下面是socket.io docs上“emit cheatsheet”的链接，这是一个简短描述的事件列表。

socket.io emit-cheatsheet

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

1 个答案: