İyi forumlar,

React, NodeJs ve Socket.io kullanarak basit bir sohbet uygulaması yapmaya çalışıyorum.

React'tan arka uca herhangi bir sorun olmadan veri gönderebilsem de, React'ta useEffect ile döndürülen verileri dinlerken sorun yaşıyorum.

Bazen verileri dinleyebiliyorum, bazen dinleyemiyorum.

Bu backend kodum:

import express from "express";
import http from "http";
import cors from "cors";
import { Server } from "socket.io";

const app = express();

app.use(cors());

const server = http.createServer(app);

const REACT_URL = "http://localhost:5173";
const PORT = 8080;

const io = new Server(server, {
  cors: {
    origin: REACT_URL,
    methods: ["GET", "POST"],
  },
});

io.on("connection", (socket) => {
  console.log("user has joined:", socket.id);

  socket.on("join", (data) => {
    console.log(data); // data returns smoothly
    socket.join(data.roomId);
  });

  socket.on("sendMessage", (data) => {
    console.log(data); // data returns smoothly
    socket
      .to(data.roomId)
      .emit("msgReturn", { username: data.username, message: data.message });
  });

  socket.on("disconnect", () => {
    console.log("user has left.", socket.id);
  });
});

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

Bu da React kodum:

import { useEffect, useState, useRef } from "react";
import io from "socket.io-client";

const socket = io.connect("http://localhost:8080");

function App() {
  const btn = useRef(null);

  const [roomId, setRoomId] = useState("");
  const [username, setUsername] = useState("");
  const [message, setMessage] = useState("");

  const joinRoom = () => {
    socket.emit("join", { roomId, username });
    btn.current.disabled = true;
  };

  const sendMessage = async () => {
    if (message) {
      await socket.emit("sendMessage", { roomId, username, message });
      setMessage("");
    }
  };

  useEffect(() => {
    socket.on("msgReturn", (data) => {
      console.log(data); // no data returns
    });
  }, [socket]);

  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 100 }}>
        <div>
          <input
            placeholder="room id..."
            type="text"
            value={roomId}
            onChange={(e) => setRoomId(e.target.value)}
          />
          <input
            placeholder="username..."
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
          <button ref={btn} onClick={joinRoom}>
            Join Room
          </button>
        </div>

        <div>
          <input
            placeholder="write somethings..."
            type="text"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          />
          <button onClick={sendMessage}>Send</button>
        </div>
      </div>
    </>
  );
}

export default App;

Arka uçtan dönen verileri sorunsuz dinleyebilmek istiyorum, ne yapmalıyım?