[socket.io 기록] Memo & Full-Stack _ front/back comparison

Darcy Daeseok YU ·2023년 9월 2일

정리

// 전체 메시지
req.app.get("io").emit("이벤트" ,"메시지")

// 네임스페이스 안에 전체 메시지
req.app.get("io").of("네임스페이스").emit("이벤트" ,"메시지")

// 네임스페이스 > 룸 안에 전체 메시지
req.app.get('io').of('네임스페이스').to(roomId).emit("이벤트" ,"메시지")

// 특정 유저에게 메시지 1:1 대화 귓속말
req.app.get('io').to(socket.id).emit("이벤트" ,"메시지")

// 나를 제외한 모든 유저에게
req.app.get('io').broadcast.emit("이벤트", '메시지')

path : just same to router path

1. make namespace on Server Side

room / chat


  const io = new Server(server, {
    path: "/my_path_name.io",
    transports: ["polling", "websocket"],
    cors: {
      origin: allowlist,
      methods: ["GET", "POST"],
      // allowedHeaders: socketAllowedHeaders,
      // credentials: true,
    },
  });

  const NS_ROOM = "room";
  const NS_CHAT = "chat";
  // 네임스페이스
  const room = io.of(`/${NS_ROOM}`);
  const chat = io.of(`/${NS_CHAT}`);

  // ROOM 네임스페이스 전용 이벤트
  room.on("connection", (socket) => {
    const req = socket.request;
    const ip = req.headers["x-forwarded-for"] || req.socket.remoteAddress;
    console.log(" room 커넥션 접속 io :: ", ip, socket.id);

    //
    socket.on("newRoom", (data) => {
      console.log("new room :: ", data, ip, socket.id);
    });

    //
    socket.on("disconnect", (data) => {
      console.log("room 나감 :: ", data, ip, socket.id);
    });
  });

  // CHAT 네임스페이스 전용 이벤트
  chat.on("connection", (socket) => {
    const req = socket.request;
    const ip = req.headers["x-forwarded-for"] || req.socket.remoteAddress;
    console.log(" chat 커넥션 접속 io :: ", ip, socket.id);

    //
    socket.on("join", (data) => {
      console.log("chat join :: ", data, ip, socket.id);
    });

    //
    socket.on("exit", (data) => {
      console.log("chat exit 나감 :: ", data, ip, socket.id);
    });

    //
    socket.on("disconnect", (data) => {
      console.log("chat disconnect :: ", data, ip, socket.id);
    });
  });
  return io;
};

2. make connection on Client side

	const namespace = "room"
    const socket = io(`http://localhost:4013/${namespace}`, {
      path: "/my_socket_router_name",
    });

when client try to connect to server
path would be like http://localhost:3000/my_socket_router_name/

profile
React, React-Native https://darcyu83.netlify.app/

0개의 댓글