проблемы с чатом socket.io реагируют - PullRequest
Новая
       14

проблемы с чатом socket.io реагируют

1 голос
/ 26 февраля 2020

Я работаю над проектом create-реагировать на приложение и пытаюсь включить консоль чата, основанную на sockets.io. Проблема заключается в том, что в то время как сообщение чата правильно перехватывается внешним интерфейсом, отправляется обратно на сервер io, а затем отправляется, и внешний интерфейс успешно перехватывает эти сообщения, между пользователями не передается никакая информация, все только происходит на одном экземпляре браузера. На бэкэнде у меня есть консоль, записывающая «новый клиент подключен», когда кто-то подключается Я заметил, что эта консоль запускается пару раз при каждом отправлении сообщения, что заставляет меня думать, что проблема где-то в процессе реактивного повторного рендеринга (поэтому повторные вызовы вызывают переподключение к серверу сокетов.)

Код:

Сервер: 

const express = require("express");
const http = require("http");
const socketIo = require("socket.io");

const PORT = process.env.PORT || 4001;
const index = require("./routes/index");

const app = express();
app.use(index);

const server = http.createServer(app);

const io = socketIo(server);

io.on("connection", socket => {
  console.log("New client connected");
  socket.on("chat message", function(msg) {
    console.log("message: " + msg);
    socket.emit("chat message", [msg]);
  });
  socket.on("disconnect", () => console.log("Client disconnected"));
});

server.listen(PORT, () => console.log(`Listening on port ${PORT}`));

приложение. js (root компонент) 

import React, { useState, useEffect } from "react";
import "./App.css";
import Board from "./components/Board/Board";
import TileCard from "./components/TileCard/TileCard";
import Chat from "./components/Chat/Chat";
import Choice from "./components/Choice/Choice";
import Header from "./components/Header/Header";

import socketIOClient from "socket.io-client";

function App() {
  const socket = socketIOClient("http://127.0.0.1:4001");
  const [textValue, setTextValue] = useState("");
  function handleChatSend(chatMsg) {
    setTextValue(chatMsg);
    socket.emit("chat message", chatMsg);
  }

  useEffect(() => {
    socket.on("chat message", msg => {
      setTextValue(msg);

      console.log("receiving:" + msg);
    });
  }, [textValue]);

  return (
    <>
      <Header />

      <div className="content-container">
        <Board />

        <div className="cards-container col">
          <Chat handleChatSend={handleChatSend} textValue={textValue} />
          <TileCard />
          <Choice />
        </div>
      </div>
    </>
  );
}

export default App;

компонент чата: 

import React from 'react';
import "./chat.css"

function Chat ({handleChatSend, textValue}) {

   return (
      <div className="chatbox">
         <ul id="messages">
         {textValue !== "" ? <li>{textValue}</li> : null}
         </ul>
    <form onSubmit={event =>{
       event.preventDefault();
       let chatMsg = event.target.elements[0].value;
       handleChatSend(chatMsg)}}>
      <input type="text" id="m" autoComplete="off" /><button type="submit">Send</button>
    </form>
      </div>
   )
}

export default Chat;
...