닉네임 서비스 제공하기

0. 들어가기 앞서

하나씩 내 손으로 만들어 나가는 것도 좋지만, 지금은 연습을 하는 단계다. 상용화할 제품을 만드는 것도 아니고, 조금씩 실력을 늘려나가고자 하는데 초점을 맞추고 있다.

그래서 하나의 아이디어를 적용시킬 때 우선 내가 고민해보고 개발해도, 사실 상 이게 잘 적용된 것인지 알기는 어렵다. 그래서 다른 사람의 코드를 보면서 확인해가고자 했다.

이근둥 님의 Node.js 실시간 채팅 서비스 만들기 시리즈를 참고했다.

1. 클라이언트의 사이트 접속

const socket = io();

socket.on('connect', () => {
  const nickname = prompt('Please enter your nickname for chatting.');
  
  if (!nickname) {
    socket.emit('newUser', 'Guest');
  } else {
    socket.emit('newUser', nickname);
  }
});

클라이언트가 접속했을 때(connect 이벤트가 발생했을 때) 사용자에게서 닉네임을 입력받을 수 있는 프롬포트 창을 하나 띄운다.

사용자가 닉네임을 입력하였다면 해당 닉네임으로, 입력하지 않았다면 Guest라는 이름으로 newUser 이벤트를 서버로 전송한다.

2. 서버로 newUser 이벤트가 전달됨

const io = require('socket.io')(http);

io.on('connection', (socket) => {
  socket.on('newUser', (nickname) => {
    socket.nickname = nickname;
    io.emit('update', {
      type: 'join',
      nickname: 'SERVER',
      message: nickname + '님이 접속했습니다.'
    });
  });
  ... 생략 ...

newUser 이벤트는 반드시 사용자가 입력한 닉네임(혹은 Guest)을 받아서 그 닉네임을 socket 객체에 저장한다. 이후, 모든 클라이언트에게 update 이벤트를 전송한다.

3. update 이벤트를 전달받은 클라이언트

socket.on('update', (data) => {
  const chat = document.getElementById('chat-log');

  const message = document.createElement('div');
  const node = document.createTextNode(`${data.nickname}: ${data.message}`);
  const className = data.type;

  message.classList.add(className);
  message.appendChild(node);
  chat.appendChild(message);
});

이후, 기존의 채팅 로그 이후에 방금 전달된 메시지를 추가한다.

4. 실행 결과

바로 사이트에 접속하고 원하는 닉네임을 입력하면 서버의 알림이 오는 것을 볼 수 있다.

다른 사용자의 접속도 화면에 출력되는 것을 볼 수 있다.

5. 개선할 수 있는 점

일단, 지금 당장 생각나는 개선할 수 있을법한 점들을 적어놓는다.

1. 닉네임 중복 체크
   사용자를 식별하기 위해 닉네임을 사용할 경우, 닉네임이 유니크해야하므로 입력한 닉네임이 현재 접속 중인 사용자들의 닉네임과 중복되지 않을 때만 접속을 허용해야 한다.

   이렇게 되는 경우 Guest도 단순히 Guest로 고정시키면 안 되고, 중복되지 않도록 설정할 필요가 있다.

2. SERVER 닉네임 설정
   SERVER 하니까 조금 그런 느낌이다. 차라리 Notice로 바꾸던가 아니면 출력되지 않도록 하는 것이 좋을 것 같다.

3. SERVER 알림이 검은색 텍스트로 출력되어 보기 좋지 앟음
   배경 색이랑 조화가 안 된다고 해야 하나? 아무튼, 뭔가 보기 불편한 점이 있음. 이 점을 고치면 좋을 것 같다.