为什么多次发送消息？

Question

我怀疑socket-io-sends-two-messages。

Stack：Nestjs服务器和一个React / Nextjs应用程序。

---

在我的nestjs服务器上，我有一条路由，该路由允许我通过socketIo发送消息。要发送消息，您只需要在正确的正文中发布即可。

一般来说，在第一篇文章中，一切都很好，但是如果我再发回一篇文章，消息就会成倍增加。

---

代码

Nestjs

events.gateway.ts

handleHttpMessage(data: {id: string; msg: string}): void {
  /** this emit msg to everyone */
  this.wss.emit(`msgToClient${data.id}`, data.msg);
}

events.controller.ts

@Controller('alert')
export class EventsController {

  constructor(private eventsGateway: EventsGateway) {}

  @Post()
  @HttpCode(200)
  sendAlertToAll(@Body() dto: {id: string; msg: string}): any {
    this.eventsGateway.handleHttpMessage(dto);
    return dto;
  }

}

React / Nextjs

import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';
import { Card } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const TestSocket: React.FC = () => {
  const [d1, setD1] = useState<string[]>([]);
  const [d2, setD2] = useState<string[]>([]);
  const [d3, setD3] = useState<string[]>([]);
  const [v, setV] = useState<string>('');
  const [i, setI] = useState<string>('');
  const [socket] = useState(io('http://localhost:3001'));

  useEffect(() => {
    socket.on('msgToClient1', (msg: string) => {
      const data = d1;
      data.push(msg);
      setD1([...data]);
      setV('');
      setI('');
    });

    socket.on('msgToClient2', (msg: string) => {
      const data = d2;
      data.push(msg);
      setD2([...data]);
      setV('');
      setI('');
    });

    socket.on('msgToClient3', (msg: string) => {
      const data = d3;
      data.push(msg);
      setD3([...data]);
      setV('');
      setI('');
    });

  }, [d1, d2, d3]);

  /**
   * lorem ipsum
   */
  function handleClick(): void {
    socket.emit('msgToServer', { id: i, msg: v });
  }

  return (
    <div>
      <h1>Test Socket</h1>
      <p>Id list : [1, 2, 3]</p>
      <input type="text" value={i} placeholder='id' onChange={(e): void => setI(e.target.value)}/>
      <input type="text" value={v} placeholder='msg' onChange={(e): void => setV(e.target.value)}/>
      <button onClick={(): void => handleClick()}>Trigger socket</button>
      <Card>
        <p>1</p>
        <ul>
          {d1.length === 0 ? 'no data received' : d1.map((msg: string) => (
            <li key={msg}>{msg}</li>
          ))}
        </ul>
      </Card>
      <Card>
        <p>2</p>
        <ul>
          {d2.length === 0 ? 'no data received' : d2.map((msg: string) => (
            <li key={msg}>{msg}</li>
          ))}
        </ul>
      </Card>
      <Card>
        <p>3</p>
        <ul>
          {d3.length === 0 ? 'no data received' : d3.map((msg: string) => (
            <li key={msg}>{msg}</li>
          ))}
        </ul>
      </Card>
    </div>
  );
};

export default TestSocket;