Web Sockets React

const io = require("socket.io")(3000, {
  cors: {
    origin: "http://localhost:5173",
  },
});

io.on("connection", (socket) => {
  console.log("User connected!", socket.id);

  // Listen and Emit custom events
  socket.on("foo", (msg) => {
    io.emit("bar", ` $${msg} from$$ {socket.id}`);
  });

  socket.on("disconnect", () => {
    console.log("User disconnected!", socket.id);
  });
});

import { io } from "socket.io-client";

const URL = "http://localhost:3000";

// By default, connects automatically on load
export const socket = io(URL, {
  autoConnect: false,
});

import { useEffect, useState } from "react";
import { socket } from "./socket";
import { ConnectionManager } from "./components/ConnectionManager";

export default function App() {
  const [isConnected, setIsConnected] = useState(socket.connected);
  const [messages, setMessages] = useState([]);

  // Handle states with socket connection
  useEffect(() => {
    socket.on("connect", () => {
      setIsConnected(true);
      socket.emit("foo", "Hello Everyone!"); // emit a custom event
    });

    socket.on("disconnect", () => setIsConnected(false));

    // Listen for a custom event
    socket.on("bar", (msg) => {
      setMessages((prev) => [...prev, msg]);
    });

    // clean up event listens on unmount
    return () => {
      socket.off("connect");
      socket.off("disconnect");
      socket.off("bar");
    };
  }, []);

  return (
    <>
      {/* Socket Dynamic Rendering */}
      <p>Connected: {isConnected ? "Yes" : "No"}</p>
      <h2>Messages</h2>
      <ul>
        {messages.map((msg, i) => (
          <li key={i}>{msg}</li>
        ))}
      </ul>
      <ConnectionManager />
    </>
  );
}

import { socket } from "../socket";

export function ConnectionManager() {
  return (
    <>
      <button onClick={() => socket.connect()}>Connect</button>
      <button onClick={() => socket.disconnect()}>Disconnect</button>
    </>
  );
}

useEffect(() => {
  // no-op if the socket is already connected
  socket.connect();

  return () => {
    socket.disconnect();
  };
}, []);

  function onSubmit(event) {
    event.preventDefault();
    setIsLoading(true);

    socket.timeout(5000).emit('create-something', value, () => {
      setIsLoading(false);
    });
  }