Почему сообщения отправляются несколько раз? - PullRequest
Новая
       24

Почему сообщения отправляются несколько раз?

0 голосов
/ 09 апреля 2020

У меня уже есть проверка, что socket-io-messages-two-messages .

Стек: Nest js сервер и React / Next js app.

На моем гнезде js сервер у меня есть маршрут, который позволяет мне отправлять сообщения через socketIo. Чтобы отправить сообщение, вам нужно сделать сообщение с правильным телом.

Во время первого сообщения в целом все в порядке, но если я отправляю сообщение в целом, сообщения умножаются.

Код

Гнездо js

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;
  }

}

Реагировать / Далее js

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;
...