Vanilla Comments - Answer Overflow

Vanilla

Posts Comments

KPCKevin Powell - Community

•Created by Vanilla on 12/26/2023 in #back-end

Socket.io

also I get this error on back: "Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client"

14 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/26/2023 in #back-end

Socket.io

well cors was pointed to the localHost before and defaultURL was pointed to localhost of backend

14 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/26/2023 in #back-end

Socket.io

and that's front

14 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/26/2023 in #back-end

Socket.io

https://github.com/GeorgeBazerashvili/chat-CLIENT

14 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/26/2023 in #back-end

Socket.io

here is back

14 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/26/2023 in #back-end

Socket.io

https://github.com/GeorgeBazerashvili/chat-REST

14 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/26/2023 in #back-end

Socket.io

that's what I get in the end

14 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/26/2023 in #back-end

Socket.io

14 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/26/2023 in #back-end

Socket.io

Edit: on frontend code I added

socket.on("connecet", () => {
   console.log("socket connected")
})

socket.on("connecet", () => {
   console.log("socket connected")
})

but it's not happening

14 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/26/2023 in #back-end

Socket.io

can someone help?

14 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/26/2023 in #back-end

Socket.io

It should obviously work but it's not working 😄

14 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/26/2023 in #back-end

Socket.io

  Frontend:
useEffect(() => {
    socket.on("send-info", (room) => {
      // console.log(room);
      if (rooms.length < 5) setRooms((prev) => [...prev, room]);
    });

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

  function createRoom() {
    if (room.trim()) {
      socket.emit("addroom", room.trim());
      setActive(false);
    }
  }

  function handleSubmit(e) {
    createRoom();
    e.preventDefault();
  }

  Frontend:
useEffect(() => {
    socket.on("send-info", (room) => {
      // console.log(room);
      if (rooms.length < 5) setRooms((prev) => [...prev, room]);
    });

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

  function createRoom() {
    if (room.trim()) {
      socket.emit("addroom", room.trim());
      setActive(false);
    }
  }

  function handleSubmit(e) {
    createRoom();
    e.preventDefault();
  }

Backend:

io.on("connection", (socket) => {
  // console.log(`user with id of ${socket.id} has joined`);

  socket.on("addroom", (room) => {
    socket.emit("send-info", room);
  });

  socket.on("disconnect", () => {
    `User with id of ${socket.id} has been disconnected.`;
  });
});

io.on("connection", (socket) => {
  // console.log(`user with id of ${socket.id} has joined`);

  socket.on("addroom", (room) => {
    socket.emit("send-info", room);
  });

  socket.on("disconnect", () => {
    `User with id of ${socket.id} has been disconnected.`;
  });
});

I map the array in this component like this:

{source.rooms.length === 0 ? (
        <p className="mt-1 ml-2 text-xl font-mono">No rooms yet</p>
      ) : (
        <div>
          {source.rooms.map((room, index) => {
            return (
              <div
                key={index}
                className="border-2 border-black rounded-md p-2 bg-gray-500 flex flex-col justify-center text-center mt-1 relative"
              >
                <i
                  className="absolute -top-1 right-0 text-lg font-bold rounded-full border-black text-black bg-white px-1"
                  onClick={(e) => {
                    source.rooms.length -= 1;
                    e.target.parentNode.remove();
                  }}
                >
                  X
                </i>
                <p>Join the room: {room}</p>
                <button className="bg-popup-bg" onClick={joinRoom}>
                  Join
                </button>
              </div>

{source.rooms.length === 0 ? (
        <p className="mt-1 ml-2 text-xl font-mono">No rooms yet</p>
      ) : (
        <div>
          {source.rooms.map((room, index) => {
            return (
              <div
                key={index}
                className="border-2 border-black rounded-md p-2 bg-gray-500 flex flex-col justify-center text-center mt-1 relative"
              >
                <i
                  className="absolute -top-1 right-0 text-lg font-bold rounded-full border-black text-black bg-white px-1"
                  onClick={(e) => {
                    source.rooms.length -= 1;
                    e.target.parentNode.remove();
                  }}
                >
                  X
                </i>
                <p>Join the room: {room}</p>
                <button className="bg-popup-bg" onClick={joinRoom}>
                  Join
                </button>
              </div>

source is useContext that imports those useStates

14 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/16/2023 in #back-end

sockets issue

I already fixed it thx

5 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/16/2023 in #back-end

sockets issue

and here is server side code:

  const express = require("express");
const app = express();
const httpServer = require("http").createServer(app);

const io = require("socket.io")(httpServer, { cors: { origin: "*" } });

io.on("connection", (socket) => {
  console.log(`The user with the id of ${socket.id} has been connected`);

  socket.on("joinRoom", (ID) => {
    socket.join(ID);
    console.log(`A user with the id of ${socket.id} has joined the room ${ID}`);
  });

  socket.on("sendMessage", (INFO) => {
    socket.to(INFO.room).emit("broadcast-message", INFO.message);
  });

  socket.on("disconnect", () => {
    console.log(`User with the id of ${socket.id} has been disconnected...`);
  });
});

httpServer.listen(3000, () => {
  console.log("Listening on port 3000...");
});

  const express = require("express");
const app = express();
const httpServer = require("http").createServer(app);

const io = require("socket.io")(httpServer, { cors: { origin: "*" } });

io.on("connection", (socket) => {
  console.log(`The user with the id of ${socket.id} has been connected`);

  socket.on("joinRoom", (ID) => {
    socket.join(ID);
    console.log(`A user with the id of ${socket.id} has joined the room ${ID}`);
  });

  socket.on("sendMessage", (INFO) => {
    socket.to(INFO.room).emit("broadcast-message", INFO.message);
  });

  socket.on("disconnect", () => {
    console.log(`User with the id of ${socket.id} has been disconnected...`);
  });
});

httpServer.listen(3000, () => {
  console.log("Listening on port 3000...");
});

5 replies

KPCKevin Powell - Community

•Created by Vanilla on 12/16/2023 in #back-end

sockets issue

here is client side code:
import { useEffect, useState } from "react";
import io from "socket.io-client";

function App() {
  const socket = io("http://localhost:3000");
  const [roomID, setRoomID] = useState("");
  const [message, setMessage] = useState("");
  const [joined, setJoined] = useState(false);

  useEffect(() => {
    socket.on("connect", () => {
      console.log(socket.connected);
    });

    socket.on("broadcast-message", (message) => {
      console.log(message);
    });

    return () => {
      socket.off("message-delivery");
      socket.off("broadcast-message");
    };
  }, []);

  function joinRoom() {
    if (roomID.trim()) {
      console.log(`joining room ${roomID}`);
      socket.emit("joinRoom", roomID);

      setJoined(true);
    }
  }

  function sendMessage() {
    socket.emit("sendMessage", {
      room: roomID,
      message,
    });
  }

  return (
    <>
      {!joined ? (
        <>
          <h2>Chat App</h2>
          <div className="container">
            <label htmlFor="room">Enter room ID</label>
            <input
              type="text"
              id="room"
              value={roomID}
              onChange={(e) => setRoomID(e.target.value)}
              placeholder="Room ID..."
            />
            <button onClick={joinRoom}>Join Room</button>

            <h2>{message}</h2>
          </div>
        </>
      ) : (
        <>
          <label>Send Message</label>
          <input
            placeholder="message..."
            id="message"
            type="text"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          />
          <button onClick={sendMessage}>Send</button>
        </>
      )}
    </>
  );
}

export default App;

here is client side code:
import { useEffect, useState } from "react";
import io from "socket.io-client";

function App() {
  const socket = io("http://localhost:3000");
  const [roomID, setRoomID] = useState("");
  const [message, setMessage] = useState("");
  const [joined, setJoined] = useState(false);

  useEffect(() => {
    socket.on("connect", () => {
      console.log(socket.connected);
    });

    socket.on("broadcast-message", (message) => {
      console.log(message);
    });

    return () => {
      socket.off("message-delivery");
      socket.off("broadcast-message");
    };
  }, []);

  function joinRoom() {
    if (roomID.trim()) {
      console.log(`joining room ${roomID}`);
      socket.emit("joinRoom", roomID);

      setJoined(true);
    }
  }

  function sendMessage() {
    socket.emit("sendMessage", {
      room: roomID,
      message,
    });
  }

  return (
    <>
      {!joined ? (
        <>
          <h2>Chat App</h2>
          <div className="container">
            <label htmlFor="room">Enter room ID</label>
            <input
              type="text"
              id="room"
              value={roomID}
              onChange={(e) => setRoomID(e.target.value)}
              placeholder="Room ID..."
            />
            <button onClick={joinRoom}>Join Room</button>

            <h2>{message}</h2>
          </div>
        </>
      ) : (
        <>
          <label>Send Message</label>
          <input
            placeholder="message..."
            id="message"
            type="text"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          />
          <button onClick={sendMessage}>Send</button>
        </>
      )}
    </>
  );
}

export default App;