[TIL] 210708

이번 심화주는 기초주보단 시간이 살짝 소비가 많았지만 하루정도 일찍 기본 CRUD는 다 끝냈다. 강의에서 socket.io를 통한 알람기능을 소개 해줘서 이거에 대해 조금 찾아보다가 채팅기능을 또 만들수 있다고해서 도전해봤다.
처음에는 어떻게 작동하는지 자세히는 몰라서 이것저것 실험을 하다가 socket.emit(보냄)과 socket.on(받음)으로 이벤트를 듣고 작동시키는걸 잘 티키타카한다는 개념으로 이해했다.

-------🖥️ Frontend-------

📂 알람기능

일단 프론트에서 io.connect로 '/'(포트3000) 서버에 연결을 해주고 이벤트가 발생하기까지 기다린다. 순서대로 설명해보자면,

1. 글쓰기 버튼에 onclick="postToServer()"을 달아준다
2. 쓰기버튼이 눌리면 'posting'이라는 이름으로 보내고 싶은 데이터를 서버에 socket.emit 한다.
3. 그럼 서버에서 'posting'이라는 이름을 가진 이벤트를 받길 기다리는 socket.io로 받는다
4. 받은데이터를 socket.emit으로 프론트에 넘겨준다.
5. 그 데이터를 프론트에서 띄어주는 작업을 한다

const socket = io.connect('/');

function postToServer(user, data) {
  socket.emit('posting', {
    nickname: user.nickname,
    channel: data.channel,
    title: data.title,
  });
}
socket.on('postingAlarm', function (data) {
  const { nickname, channel, title, date } = data;
  makePostNotification(nickname, channel, title, date);
});

function makePostNotification(targetNickname, channel, title, date) {
  const messageHtml = `<span class="alertMessage"> > <a style="color:yellow">${targetNickname}<a/>님이 방금 
  <a href="/${channel}" style="color: rgb(229, 33, 255); text-transform: uppercase;">${channel}</a>채널에 
  "${title}" 라는 새게시물을 작성했습니다.<br /><small>(${date})</small></span><br>`;
  const alt = $('#alertBox');
  if (alt.length) {
    alt.append(messageHtml);
  } else {
    return;
  }
}

📂 채팅기능

1:1채팅 단체채팅방만들기 까지는 시간이 부족했다.. 기본적인 emit과 on으로 만든 채팅이다. 한마디로 하나의 방에 사람들이 다 모여서 채팅하는 공간이다.

1. 전송버튼을 누르면(사진엔 안나왔지만) msgToServer 함수가 실행되게 해놨다.
2. 그 메세지를 socket.emit으로 메세지를 쓴 유저정보와 내용을 보낸다.
3. 서버에서 socket.on으로 그걸 받고 또 socket.emit으로 데이터를 가공해서 보내준다.
4. 프론트에서 socket.on으로 또 받아서 화면에 보여준다.

function msgToServer() {		
  let message1 = $('#putMessage').val();
  if (message1 == '') {
    return;
  }
  socket.emit('chatMessage', { message1, user });
}

socket.on('receiveMsg', function (data) {
  showMessage(data);
});

function showMessage(data) {
  let msgHtml = `<span style="color: white;">>..${data['nickname']}님: ${data['sendMsg']} (${data['date']})</span><br>`;
  $('#chats').append(msgHtml);
  $('#putMessage').val('');
}

-------⚙️ Backend-------

일단 socket.io를 express 안에서 실행시키는게 아니기때문에 둘다 http로 감싸줘야한다. 그래서 일단 패키지를 npm으로 다운받고

npm install socket.io -S

위에서 불러준다.

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

📂 알람기능

그리고 아까 말했듯이 socket.on으로 받으면 그걸 현재 시각과 함께 가공해서 socket.emit으로 돌려준다.

io.on('connection', (socket) => {
  const currentDate = moment().format('YYYY-MM-DD HH:mm:ss');

  socket.on('posting', (data) => {
    const payload = {
      nickname: data.nickname,
      channel: data.channel,
      title: data.title,
      date: currentDate,
    };
    io.emit('postingAlarm', payload);
  });

📂 채팅기능

  socket.on('chatMessage', (data) => {
    const msg = {
      sendMsg: data.message1,
      nickname: data.user1.nickname,
      date: currentDate,
    };
    io.emit('receiveMsg', msg);
  });
});