📌 +) Socket.IO로 채팅기능 구현 해보기

✍️ 프로젝트 채팅 기능 구현을 위해 zoom 클론코딩 실습(바닐라 JS, socket.io)을 해보면서 기록한 내용이다.(2)

WebSocket & Socket.IO

웹 페이지의 한계에서 벗어나 실시간으로 상호작용하는 웹 서비스를 만드는 표준 기술인 WebSocket 그리고 다양한 방식의 실시간 웹 기술을 손쉽게 사용할 수 있는 Socket.io에 대해서 알아보자! 🤔

• 기존의 HTTP 프로토콜은 서버와 클라이언트 사이의 연결이 유지되지 않는다. (connectionless) 따라서 상호작용(실시간 통신)하는 웹 서비스를 위해서는 숨겨진 프레임(Hidden Frame)을 이용한 방법이나 Long Polling, Stream 등 다양한 방법을 사용하며 복잡하고 어려운 코드로 구현했다.

• 보다 쉽게 상호작용하는 웹 페이지를 만들려면 브라우저와 웹 서버 사이에 더욱 자유로운 양방향 메시지 송수신이 필요하다. 그래서 HTML5 표준 기술로 Websocket API가 등장하게 되었다.
  WebSocket은 소켓을 이용하여 서버와 클라이언트 사이에서 자유롭게 데이터를 주고 받는 양방향 통신을 가능하게 하므로 기존의 요청-응답 관계 방식보다 더 쉽게 데이터 교환이 가능하게 되었다.

• 실시간 작동
• 브라우저와 back-end간의 양방향 통신
• 메세지를 주고 받을 수 있으며 event 기반의 통신

1) WebSocket

• HTML5 웹 표준 기술
• 매우 빠르게 작동하며 통신할 때 아주 적은 데이터를 이용한다.
• 이벤트를 단순히 듣고, 보내는 것만 가능하다.
• HTML5 Websocket은 유용한 기술이지만, 브라우저별로 지원하는 웹소켓 버전이 다르며 오래된 브라우저의 경우엔 지원하지 않는다.
  따라서 JS를 이용하여 브라우저에 상관없이 실시간 웹을 구현할 수 있는 Socket.IO를 더 많이 사용하고 있다.

2) Socket.IO

Socket.IO는 node.js 기반으로 만들어진 기술로, 거의 모든 웹 브라우저와 모바일 장치를 지원하는 실시간 웹 애플리케이션 지원 라이브러리이다.

• 여러 선택지 중에서 websocket을 이용해서 실시간 & 양방향 & event기반 통신을 기능을 제공한다. (websocket을 실행하는게 아니다.)

• 어떤 브라우저나 핸드폰이 websocket을 지원하지 않을 때(websocket연결을 할 수 없을 경우) socket.IO는 다른 방법(HTTP long polling 등)을 이용해서 계속 작동을 한다.
  → 즉 socket.IO는 websocket의 부가기능이 아니다.

• 소켓 연결 실패 시 fallback을 통해 다른 방식으로 알아서 해당 클라이언트와 연결을 시도한다.
  만약 wifi연결이 잠시동안 끊겨도 재연결을 시도한다. (webSockets의 경우 이 재연결 기능을 직접 만들어줘야만 한다.)

• 모든 플랫폼, 브라우저, 디바이스에서 이용 가능하다.

📌 어떤 상황에서 어떤걸 사용해야 할까?

• 서버에서 연결된 소켓(사용자)들을 세밀하게 관리해야하는 서비스인 경우에는 Broadcasting 기능이 있는 socket.io를 쓰는 게 유지보수 측면에서 이점이 많다.
• 가상화폐 거래소와 같이 데이터 전송이 많은 경우에는 빠르고 비용이 적은 표준 WebSocket을 이용하는게 좋다.

Socket IO 설치하기

• npm i socket.io
• 브라우저가 주는 websocket은 socket.IO와 호환이 되지 않는다. (socket.IO가 더 많은 기능을 주기 때문)

프론트와 백엔드에 socket.IO 설치해주기

// server.js
const io = SocketIO(httpServer);

• sicketIO를 설치해주면 화면에서 io라는 function을 볼 수 있다.
• io는 자동적으로 back-end socket.io와 연결해주는 함수이다.

// app.js
const socket = io();

• io 함수는 알아서 socket.io를 실행하고 있는 서버를 찾는다.

(여기서는 WebSocket이 아니라 Socket으로 보임)

• 연결된 모든 socket을 자동적으로 추적하고 있다. (이전에는 sockets.push(socket)을 했다. ☺️)
• 쉽게 sockets에서 socket id를 볼 수 있다.
  

Socket IO 사용해보기 ✨ socket.emit

ROOM

• user가 웹사이트로 가면 방을 만들거나 방에 참가할 수 있는 form을 보게 된다.
• socket IO에는 이미 room기능이 있다.

더 나은 socket IO 활용성

1) 특정한 event를 emit해줄 수 있다.
어떤이름이든 상관 X (꼭 message 이벤트가 아니라 원하는 이벤트면 된다 !)

2) 오브젝트를 전송할 수 있다. 이전처럼 string만 전송할 필요 X
→ socket IO는 obj를 string으로 알아서 바꿔주고, 다시 알아서 JS object로 만들어준다.🌟

// app.js
const socket = io();

const welcome = document.getElementById('welcome');
const form = welcome.querySelector('form');

function handleRoomSubmit(e) {
  e.preventDefault();
  const input = form.querySelector('input');
  socket.emit('enter_room', { payload: input.value }); // enter_room이라는 event를 emit
  input.value = '';
}

form.addEventListener('submit', handleRoomSubmit);

// server.js
io.on('connection', (socket) => {
  console.log(socket);
  socket.on('enter_room', (msg) => console.log(msg)); // 이전처럼 'message' 할 필요 없이 원하는 이벤트를 넣음
});
// 📌 socket.on과 app.js의 socket.emit의 'enter_room' 이름 맞춰주기 !!
// 📌 msg는 app.js의 두번째인자가 보낸 JSON 오브젝트이다.

3) socket.emit의 세번째 argument

// app.js
function handleRoomSubmit(e) {
  e.preventDefault();
  const input = form.querySelector('input');
  socket.emit('enter_room', { payload: input.value }, () => {
    console.log('server id done!');
  });
  input.value = '';
}

// server.js
io.on('connection', (socket) => {
  // console.log(socket);
  socket.on('enter_room', (msg, done) => {
    console.log(msg);
    setTimeout(() => {
      done();
    }, 5000);
  });
});

• 첫 번째 argument에는 이벤트 이름
• 두 번째 argument에는 보내고싶은 payload (무수히 많이 넣을 수 있다.)
• 마지막 argument에는 서버에서 호출하는 function가 들어감
  
  📌 app.js에서 마지막 인자로 콜백함수를 보내면 서버는 back-end에서 function을 호출하지만 function은 front-end에서 실행된 것!
  수정) 끝날 때 실행되는 function을 보내고 싶으면 마지막인자에 넣으면 된다 !

❓ 궁금했던 것
인자에 어떤걸 넣어도 보낼 수 있는데 세번째 인자가 콜백함수를 꼭 받는게 아닌건가?

❗️ 답: 마지막 인자에 함수를 넣으면 된다. 😀 그외에는 무제한 으로 인자를 넘겨주고 다 받아올 수 있다.

❓ 어디에서 실행시키는 거야 🧐?

// server.js
io.on('connection', (socket) => {
  // console.log(socket);
  socket.on('enter_room', (msg, done) => {
    console.log(msg);
    setTimeout(() => {
      done('안녕 프론트엔드 ?'); // 1)
    }, 5000);
  });
});

// app.js
function handleRoomSubmit(e) {
  e.preventDefault();
  const input = form.querySelector('input');
  socket.emit('enter_room', { payload: input.value }, (msg) => {
    console.log('백엔드에서 보낸 메세지: ', msg); // 2)
  }); 
  input.value = '';
}

1) done() 함수를 실행시키면 back-end에서 이 코드를 실행시키지 않는다. 보안 문제가 생기기 때문이다. (❗️신뢰하지 못하는 코드를 back-end에서 실행시키면 안된다.)

2) front-end에서 실행 버튼을 눌러주는 거라고 이해하기!
→ 즉, Front-end에서 실행된 코드는 back-end가 실행을 시킨것이다. 🤔

✍️ 헷갈리는 느낌이라서 직접 생각해보자면, 함수호출은 백엔드, 실행은 프론트 !!!!
프론트엔드에서 실행코드를 만들고, 백엔드가 그 코드를 호출하는데 실행자체는 백에서 되는게 아니라 백이 호출한 프론트로 넘어와서 프론트에서 실행이 된다고 이해했다. 이때 백엔드에서 인자를 넣어서 프론트로 보내는 것도 가능!

Chat rooms 관련 socket API들 살펴보기✨

Socket.IO API

socket.join

• socket IO 는 기본적으로 room을 제공한다.
• 방에 참가하기

socket.join('') // room이름만 넣어주면 된다.

// 공식문서
io.on("connection", (socket) => {
  socket.join("room 237");
  
  console.log(socket.rooms); // Set { <socket.id>, "room 237" }

  socket.join(["room 237", "room 238"]); // 동시에 여러방에 참가도 가능!

  io.to("room 237").emit("a new user has joined the room"); // broadcast to everyone in the room
});

socket.leave

• 방을 나가기

io.on("connection", (socket) => {
  socket.leave("room 237");

  io.to("room 237").emit(`user ${socket.id} has left the room`);
});

socket.to

• 방전체에 메세지를 보낼 수 있다.

io.on("connection", (socket) => {

  // to one room
// others 라는방에 이벤트를 보낼 수 있다.
  socket.to("others").emit("an event", { some: "data" });

  // to multiple rooms
  socket.to("room1").to("room2").emit("hello");

  // or with an array
  socket.to(["room1", "room2"]).emit("hello");

  // a private message to another socket
// 다른 socket의 ID를 안다면 프라이빗 메세지를 보낼 수 있다!
  socket.to(/* another socket id */).emit("hey");

  // WARNING: `socket.to(socket.id).emit()` will NOT work, as it will send to everyone in the room
  // named `socket.id` but the sender. Please use the classic `socket.emit()` instead.
});

socket.id & socket.rooms

// 공식문서
io.on("connection", (socket) => {

  console.log(socket.rooms); // Set { <socket.id> } // 1)

  socket.join("room1");

  console.log(socket.rooms); // Set { <socket.id>, "room1" }

});

• 1) 현재 socket이 있는 rooms를 보여준다.

socket.onAny

socket.onAny((event, ...args) => {
  console.log(`got ${event}`);
});

• 어느 event에서든지 console.log를 할 수 있다.

io.on('connection', (socket) => {
  socket.onAny((e) => {
    console.log(`소켓이벤트: ${e}`);
  });
  socket.on('enter_room', (roomName, done) => {
    console.log('socket.rooms(1): ', socket.rooms); // 소켓이 어떤 방에 있는지 알기위해 출력
    socket.join(roomName); // 방에 참가를 하고
    console.log('socket.rooms(2): ', socket.rooms); // 소켓이 어떤 방에 있는지 알기위해 출력
    setTimeout(() => {
      done('안녕 프론트엔드 ?');
    }, 5000);
  });
});

• 앞에찍히는 문자는 socket.id 를 콘솔로 출력하면 확인 가능한, 즉 소켓 아이디이다. 😀!! (아이디로 구별가능)
  → user의 id는 user가 있는 방의 id와 같다.
  → socket.IO 에서 모든 socket은 기본적으로 User와 Server 사이에 private room이 있다!

server.sockets

• 서버를 가져오고, io.sockets.emit 을 하면 모두에게 메세지를 보낼 수 있다.

io.sockets.emit("hi", "everyone");
// is equivalent to
io.of("/").emit("hi", "everyone");

server.socketsJoin(rooms)

• 유저 한 명을 만들어서 강제로 socket이 방에 입장하게 할 수 있다.

// make all Socket instances join the "room1" room
// 모든 소켓이 이 room에 강제로 들어가게 함
io.socketsJoin("room1");

// make all Socket instances in the "room1" room join the "room2" and "room3" rooms
// room1에 있는 모든 socket을 room2와 room3에 들어가게 함
io.in("room1").socketsJoin(["room2", "room3"]);

// this also works with a single socket ID
io.in(theSocketId).socketsJoin("room1");

ex.) socket이 연결되었을 때 모든 socket이 공지방에 입장하게 된다.

io.on('connection', (socket) => {
  io.socketsJoin('공지방');
...

방에 참가 & 메세지 보내기

방에 참가하기

// server.js
io.on('connection', (socket) => {
  socket.onAny((e) => {
    console.log(`소켓이벤트: ${e}`);
  });
  socket.on('enter_room', (roomName, done) => {
    socket.join(roomName);
    done();
  });
});

방에 누가 참가했는지 알려주기

// server.js
io.on('connection', (socket) => {
  socket.onAny((e) => {
    console.log(`소켓이벤트: ${e}`);
  });
  socket.on('enter_room', (roomName, done) => {
    socket.join(roomName); // 1. 방에 참가하면
    done(); // 2. 함수를 호출하고
    socket.to(roomName).emit('웰컴'); // 4. '웰컴' event를 rommName에 있는 모든 사람들에게 emit 함
  });
});
// 📌 소켓이 다르므로 위 노랑새색 코드는 사파리에서 한번, 크롬에서 한번 더 실행된다. 두번 실행

// add.js
function addMessage(msg) {
  const ul = room.querySelector('ul');
  const li = document.createElement('li');
  li.innerText = msg;
  ul.appendChild(li);
}

// 3. done()은 프론트엔드에 있는 showRoom()을 실행
function showRoom() {
  console.log('백엔드에서 호출');
  welcome.hidden = true;
  room.hidden = false;
  const h3 = room.querySelector('h3');
  h3.innerText = `Room ${roomName}`;
}

function handleRoomSubmit(e) {
  e.preventDefault();
  const input = form.querySelector('input');
  socket.emit('enter_room', input.value, showRoom);
  roomName = input.value;
  input.value = '';
}

form.addEventListener('submit', handleRoomSubmit);

socket.on('웰컴', () => {
  addMessage('누군가 들어왔습니다!');
});

4. 우리가 ‘웰컴' 을 방안에 있는 모두에게 보낸다. 우리를 제외하고!
   → socket.IO는 내가 나를 제외한 모든 사람에게 메세지를 보내고 싶다는 것을 알고있으므로!
   → 따라서 내방에서는 메세지를 받지 않았지만 다른 브라우저에서는 메세지를 받음! ▼
   

알림띄우기

disconnecting

• disconnect랑 다르다. disconnect는 연결이 완전히 끊어졌다는 의미이다.
• disconnecting은 고객이 접속을 중단할 것이지만 아직 방을 완전히 나가지는 않은 것이다.
  → 완전히 끊기기 전에, 즉 창을 닫거나 컴퓨너가 꺼졌을 때 방에 message를 보낼 수 있음!

io.on("connection", (socket) => {
  socket.on("disconnecting", (reason) => {
    console.log(socket.rooms); // Set { ... } //<- 여기서 Set은 반복가능하므로 forEach문 작성 가능!
  });
});

socket.on('disconnecting', () => {
      socket.rooms.forEach(room => socket.to(room).emit('바이'))
    });

• 클라이언트가 서버와 연결이 끊어지기 전에 마지막 ‘바이’ 메세지를 보낼 수 있다.

떠났을때 메세지 보내기

io.on('connection', (socket) => {
  socket.onAny((e) => {
    console.log(`소켓이벤트: ${e}`);
  });
  socket.on('enter_room', (roomName, done) => {
    socket.join(roomName); 
    done(); 
    socket.to(roomName).emit('웰컴'); 
    socket.on('disconnecting', () => {
      socket.rooms.forEach((room) => socket.to(room).emit('바이'));
    });
  });
});

socket.on('바이', () => {
  addMessage('누군가 떠났습니다 ㅠㅠ...');
});

메세지 보내기

// server.js
io.on('connection', (socket) => {
  socket.onAny((e) => {
    console.log(`소켓이벤트: ${e}`);
  });
  socket.on('enter_room', (roomName, done) => {
    socket.join(roomName); // 1. 방에 참가하면
    done(); // 2. 함수를 호출하고
    socket.to(roomName).emit('웰컴'); // 4. '웰컴' event를 rommName에 있는 모든 사람들에게 emit 함
    socket.on('disconnecting', () => {
      socket.rooms.forEach((room) => socket.to(room).emit('바이'));
    });
    socket.on('new_message', (msg, room, done) => {
      socket.to(room).emit('new_message', msg); // new_message 이름이 같아도 상관 없다. / 이 작업이 끝난 뒤 아래 done 함수 호출
      done();
    });
  });
});


// app.js
function addMessage(msg) {
  const ul = room.querySelector('ul');
  const li = document.createElement('li');
  li.innerText = msg;
  ul.appendChild(li);
}

	...

// socket.on('new_message', (msg)=>{addMessage(msg)})와 같음
socket.on('new_message', addMessage);

닉네임 지정하기

메세지 앞에 닉네임 추가하기

// 함수 로직 변경
// app.js
function handleNicknameSubmit(e) {
  e.preventDefault();
  const input = room.querySelector('#name input');
  socket.emit('nickname', input.value);
}

...
  const msgForm = room.querySelector('#msg');
  const nameForm = room.querySelector('#name');
  msgForm.addEventListener('submit', handleMessageSubmit);
  nameForm.addEventListener('submit', handleNicknameSubmit);
...

// server.js
socket.on('nickname', (nickname) => (socket['nickname'] = nickname));

io.on('connection', (socket) => {
  socket['nickname'] = '익명';
  socket.onAny((e) => {
    console.log(`소켓이벤트: ${e}`);
  });
  socket.on('enter_room', (roomName, done) => {
    socket.join(roomName); 
    done(); 
    socket.to(roomName).emit('웰컴', socket.nickname); 
  });
  socket.on('disconnecting', () => {
    socket.rooms.forEach((room) =>
      socket.to(room).emit('바이', socket.nickname)
    );
  });
  socket.on('new_message', (msg, room, done) => {
    socket.to(room).emit('new_message', `${socket.nickname}: ${msg}`);
    done();
  });
  socket.on('nickname', (nickname) => (socket['nickname'] = nickname));
  
});

Adapter

• Adapter가 기본적으로 하는 일은 다른 서버들 사이에 실시간 어플리케이션을 동기화 하는 것!😀

• 현재 우리는 서버의 메모리에서 Adapter를 사용하고있다. 데이터베이스에는 아무것도 저장하고 있지 않음. → 우리가 서버를 종료하고 다시 시작할 때 모든 room과 message와 socket은 없어진다.
  → ❗️ 우리는 백엔드에 데이터베이스를 가지고 싶음 !!
  

• 또한 앱 안에 많은 클라이언트가 있을 때, 모든 클라이언트에 대해서 connection을 열어둬야한다. (사파리와 크롬 브라우저를 우리 서버에 연결했듯)
  → 그러한 연결은 어딘가에 있어야 하고, 즉 실시간으로 서버 메모리에 있어야 한다.
  → 즉 서버는 이 connection을 오픈된 상태를 유지해야 한다.

• 많은 브라우저들은 하나의 서버에 connection들을 열 것 → 서버에 많은 connection이 들어온다.
  서버는 그 많은 connection들을 메모리에 저장할 것이며 서버 2 혹은 3개를 만들 수도 있게 될 것이다. 이경우 모든 클라이언트가 동일한 서버에 연결되는 것은 아닐 수 있다.
  → 이때 Adapter 를 사용 해서 서버 A에 있는 클라이언트가 서버 B에 메세지를 보낼 수 있다.

• Adapter는 어플리케이션으로 통하는 창문!

• Adapter는 누가 연결되었는지, 현재 어플리케이션에 room이 얼마나 있는지 알려준다.

Map(get,set)을 통해 Private rooms와 Public rooms 알기

Private rooms와 Public rooms

• 두 개의 프라이빗 룸 & 한 개의 퍼블릭 룸 → ‘123’ 을 확인할 수 있다.
• Rooms 확인하기 & Map에 있는 모든 rooms확인, room ID도 확인

📌 내가 하고 싶은 것 : 모든 sids에 대한 map을 만들기

const sids = new Map()
undefined

sids.set('nCc3Xbqinz2m9Pe_AAAN', true)
Map(1) {'nCc3Xbqinz2m9Pe_AAAN' => true}

sids.set('KMA__nvZDIDHjaLWAAAP', true)
Map(2) {'nCc3Xbqinz2m9Pe_AAAN' => true, 'KMA__nvZDIDHjaLWAAAP' => true}

sids
Map(2) {'nCc3Xbqinz2m9Pe_AAAN' => true, 'KMA__nvZDIDHjaLWAAAP' => true}

const rooms = new Map()
undefined

rooms.set('KMA__nvZDIDHjaLWAAAP', true)
Map(1) {'KMA__nvZDIDHjaLWAAAP' => true}

rooms.set('nCc3Xbqinz2m9Pe_AAAN', true)
Map(2) {'KMA__nvZDIDHjaLWAAAP' => true, 'nCc3Xbqinz2m9Pe_AAAN' => true}

rooms.set('seul',true)
Map(3) {'KMA__nvZDIDHjaLWAAAP' => true, 'nCc3Xbqinz2m9Pe_AAAN' => true, 'seul' => true}

• 우리에겐 sids가 있다 → 우리 백엔드에 연결된 모든 sockets들의 map
• 모든 socket은 private room 이 있다는 걸 기억하기!! 🧐
  → id가 방제목인 경우이다. 그래서 우리가 private message를 보낼 수 있다.
• get과 key를 이용해서 key가 socket ID 인지 아니면 방제목인지 알 수 있다.
  

rooms.forEach((_,key)=> {
    if(sids.get(key) !== undefined){ // 프라이빗 룸을 찾을 수 있다.
        console.log(key)
    }
})
// KMA__nvZDIDHjaLWAAAP
// VM10984:3 nCc3Xbqinz2m9Pe_AAAN


rooms.forEach((_,key)=> {
    if(sids.get(key) === undefined){ // 퍼블릭 룸을 찾을 수 있다.
        console.log(key)
    }
})
// seul

Map 적용해보기

// io.sockets.adapter로 부터 sids와 rooms를 가져와서 위 예시와 같은 작업
function publicRooms() {
  const {
    sockets: {
      adapter: { sids, rooms },
    },
  } = io;
  // const sids = io.sockets.adapter.sids; // 
  // const rooms = io.sockets.adapter.rooms; // 이 코드 두줄은 위처럼 정의하는 것과 같다

  const publicRooms = [];
  rooms.forEach((_, key) => {
    if (sids.fet(key) === undefined) {
      publicRooms.push(key);
    }
  });
  return publicRooms;
}

메세지를 모두에게 보내기

server.sockets.emit

• 연결된 모든 socket에게 message를 보내준다.

// server.js
function publicRooms() {
  const {
    sockets: {
      adapter: { sids, rooms }, // sids랑 rooms를 io로부터 구조분해 해오는 코드
    },
  } = io;

  const publicRooms = [];
  rooms.forEach((_, key) => {
    if (sids.get(key) === undefined) {
      publicRooms.push(key);
    }
  });
  return publicRooms;
}

socket.on('enter_room', (roomName, done) => {
    socket.join(roomName);
    done();
    socket.to(roomName).emit('웰컴', socket.nickname); // 1)
    io.sockets.emit('room_change', publicRooms()); // 2)
  });


// app.js
// socket.on('room_change', (msg) => console.log(msg));와 같음
socket.on('room_change', console.log);

• 1) 하나의 소켓에만 메세지를 보내준다.
• 2) 모든 소켓에 메세지를 보내준다.
  

socket.on('disconnect', () => {
    io.sockets.emit('room_change', publicRooms());
  });

열려있는 rooms 보기

// server.js
socket.on('enter_room', (roomName, done) => {
    socket.join(roomName);
    done();
    socket.to(roomName).emit('웰컴', socket.nickname);
    io.sockets.emit('room_change', publicRooms());
  });
socket.on('disconnect', () => {
    io.sockets.emit('room_change', publicRooms());
  });


// app.js
socket.on('room_change', (rooms) => {
	roomList.innerHTML = ''; // 2)
  const roomList = welcome.querySelector('ul');
  if (rooms.length === 0) { // 1)
    roomList.innerHTML = '';
    return;
  }
  rooms.forEach((room) => {
    const li = document.createElement('li');
    li.innerText = room;
    roomList.append(li);
  });
});

• 1) [] 일때는 업데이트를 안해주므로(?) 사용자가 나가더라도 방 이름이 존재한다. 따라서 배열의 길이에 따라 보여질 문구를 지정해주면 사용자가 다 나가서 배열이 길이가 0일경우 ‘’ 를 출력할 수 있다.

• 2) ❗️해당 코드를 넣어주지 않았더니 방이름이 중복으로 생성 되었다. (세 개 브라우저 이상일때 확인 가능)

방 안에 있는 사람들 세기 / Set

Set

• Set은 유니크하다 (중복되지 않음)
• 사이즈도 알 수 있음 / 추가하거나 삭제할 수도 있음

const food = new Set(['a','b','b'])

console.log(food) // Set(2) {'a', 'b'}
console.log(food.size) // 2

• 즉, 한 방에 몇명이 있는지 알기 위해서는 rooms 에서 찾고있는 방의 key 를 얻고 set.size 해주면 될듯하다. 😀

rooms 사이즈 얻기

function countRoom(roomName) {
  io.sockets.adapter.rooms.get(roomName)?.size
}

socket.on('enter_room', (roomName, done) => {
    socket.join(roomName);
    done();
    socket.to(roomName).emit('웰컴', socket.nickname, countRoom(roomName));
    io.sockets.emit('room_change', publicRooms());
  });

  socket.on('disconnecting', () => { // 1)
    socket.rooms.forEach((room) => // 2)
      socket.to(room).emit('바이', socket.nickname, countRoom(roomName)-1) // 3)
    );
  });

• roomName을 얻을 수도 있고 얻지 않을 때도 있으므로 ? 를 붙여준다.
• io.socketsadapter.rooms.get(roomName) 이게 Set임을 알고있으므로 바로 .size 해줄 수 있다.

1) 방을 완전히 떠나지 않은 상태이니 아직 room에 접근할 수 있다.
2) 하지만 아직 방을 떠나지 않았으므로 우리도 포함되어서 계산된다.
3) 따라서 -1을 한다.

→ 즉 ‘웰컴' 과 ‘바이' 를 할 때 newCount를 받는다는 의미! → app.js (프론트쪽)에서도 해주자.

socket.on('웰컴', (user, newCount) => {
  const h3 = room.querySelector('h3');
  h3.innerText = `Room ${roomName} (${newCount})`;
  addMessage(`${user}님이 들어왔습니다!`);
});

socket.on('바이', (left, newCount) => {
  const h3 = room.querySelector('h3');
  h3.innerText = `Room ${roomName} (${newCount})`;
  addMessage(`${left}님이 떠났습니다 ㅠㅠ...`);
});

React + Socket.IO

✍️ 리액트와 Socket.IO를 활용해서 채팅 기능 구현해보기

📌 사용자 정보가 안뜨는 이슈 해결하기
❓ 왜 사용자 정보가 뜨지 않을까? 🤔

• server에서 addUser에게 정보를 넘겨줄때..
  const { user } = addUser({ id: socket.id }, name, room);
  → 수정후
  const { user } = addUser({ id: socket.id, name, room });
  이렇게 넘겨줬어야 했다..!

✍️ 에러 역추적!!
1) 클라이언트 Chat.js 에서 socket.emit ‘입장’ 데이터 넘어가는 거 확인! → 콘솔 문제없음
2) 서버 index.js 에서 socket.on '입장' 에서 데이터 받아오는 거 확인! → 콘솔 문제없음
3) addUser에 값을 잘 넘기고 있는지 확인!! → addUser에서 콘솔 확인했더니 name과 room이 undefined가 잘 찍힘!!
→ 2) 에서 잘 받아와지는데 왜 addUser에서 안되는지 고민하며 해결!!!! 😀✨

Admin Panel

• @socket.io/admin-ui

프로젝트 채팅 기능 구현에 앞서 Websocket과 Socket.IO 개념 알고 익히기. 실습 프로젝트 !
1. JavaScript + Websocket 👉 WebSocket 으로 채팅기능 구현 해보기
2. JavaScript + Socket.IO 👉 Socket.IO로 채팅기능 구현 해보기
3. React + Socket.IO 👉 Socket.IO로 채팅기능 구현 해보기
✨ with-dog 프로젝트 채팅 기능 구현 👉 채팅기능 구현하기

reference) websocket, socket.io

참고1 참고2 참고3