9/23 TIL : koa, pug, 채팅 기능 구현

KDT/TIL

9/23 TIL : koa, pug, 채팅 기능 구현

ebulsok 2022. 9. 26. 13:44

🔎 koa

express 팀에서 만든 프레임워크
express 대비 더 가볍고 빠름
미들웨어 레벨에서도 async/await를 제공하여 비동기 프로그래밍을 더 편리하게 사용 가능
프레임워크 설치: [터미널] npm i koa

// @ts-check
const Koa = require('koa');

const app = new Koa();
const PORT = 4500;

app.use(async (ctx, next) => {
  console.log(ctx.request);
  console.log(ctx.response);
  ctx.body = 'Hello, koa world!';
});

app.listen(PORT, () => {
  console.log(`서버는 ${PORT}에서 작동 중입니다.`);
});

🚩 Pug

node.js용 view engine
html 대비 간단하게 태그 사용
템플릿 기능 제공

설치: [터미널] npm i koa-pug -s
app.js에 pug 미들웨어 적용

// @ts-check
const Koa = require('koa');

const Pug = require('koa-pug');
const path = require('path');

const app = new Koa();
const PORT = 4500;

const pug = new Pug({
  viewPath: path.resolve(__dirname, './views'),
  app,
});

app.use(async (ctx, next) => {
  await ctx.render('chat');
});

app.listen(PORT, () => {
  console.log(`서버는 ${PORT}에서 작동 중입니다.`);
});

/views/chat.pug(+부트스트랩 적용)

html 
    head 
        link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous")
    body.d-flex.flex-column.text-center.align-items-center
        h1.w-100.p-3.bg-primary.text-white.font-bold Chat
        div.w-50.h-75.p-5.bg-secondary.text-bottom.overflow-auto 
            p.p-2.bg-warning.fw-bold.text-white 채팅 예시
        form.w-50(action="/chat")
            input.w-75.m-3.p-3(type="text" placeholder="채팅을 입력하세요")
            a.p-3.btn.btn-primary 보내기

🚩 koa-web socket

모듈 설치: [터미널] npm i koa-websocket
[터미널] npm i koa-route
/chat 이라는 경로로 들어오면 웹 소켓 통신을 통해 클라이언트로 문구를 전송
클라이언트에서 message가 오면 받아서 서버에 출력

const websockify = require('koa-websocket');
const route = require('koa-route');

const app = websockify(new Koa());

app.ws.use(
  route.all('./chat', (ctx) => {
    ctx.websocket.send('서버입니다.');
    ctx.websocket.on('message', (message) => {
      console.log(message.toString());
    });
  })
);

🚩 /public/chat.js 를 생성하고 클라이언트 채팅 관련 기능을 구현

express는 내장 모듈로도 특정 주소에 대한 static 폴더 설정 가능
koa는 koa-static과 koa-mount 모듈을 설치해야 가능
[터미널] npm i koa-static
[터미널] npm i koa-mount
클라이언트에서 WebSocket 서버를 연결하고 서버에 addEventListener-open을 등록하여 이전에 준비해두었던 서버로 통신 보내기

🔎 IIFE(Immediately Invoked Function Expression)

함수가 정의되자마자 사용되는 즉시 실행 함수
함수의 정의 부분을 외부로부터 감추고 싶을 때 사용

// @ts-check
// IIFE
(() => {
  const socket = new WebSocket(`ws://${window.location.host}/chat`);

  socket.addEventListener('open', () => {
    socket.send('클라이언트 입니다.');
  });
})();

🔎 Broadcast

웹 소켓 서버는 app.ws에 할당되어 있으므로 server라는 변수에 구조 분해 할당 문법으로 받아오기

app.ws.use(
  route.all('/chat', (ctx) => {
    const { server } = app.ws;

    server?.clients.forEach((client) => {
      client.send('모든 클라이언트에게 메시지 보내기');
    });

    ctx.websocket.on('message', (message) => {
      console.log(message.toString());
    });
  })
);

🔎 실제 채팅의 흐름

클라이언트의 form에 내용을 입력하고 보내기를 누르면 서버로 데이터 전달
서버는 해당 정보를 다시 모든 클라이언트에게 보내는 형태
chat.pug에서 id 부여

html 
    head 
        link(href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous")
    body.d-flex.flex-column.text-center.align-items-center
        h1.w-100.p-3.bg-primary.text-white.font-bold Chat
        div#chat.w-50.h-75.p-5.bg-secondary.text-bottom.overflow-auto 
            p.p-2.bg-warning.fw-bold.text-white 채팅 예시
        form(action="/chat" onsubmit="return false;")#form.w-50
            input(type="text" placeholder="채팅을 입력하세요")#input.w-75.m-3.p-3
            a#btn.p-3.btn.btn-primary 보내기
    script(src="public/chat.js")

/public/chat.js

// @ts-check
// IIFE
(() => {
  const socket = new WebSocket(`ws://${window.location.host}/chat`);
  const btnEl = document.getElementById('btn');
  const inputEl = document.getElementById('input');
  const chatEl = document.getElementById('chat');

  btnEl?.addEventListener('click', () => {
    const msg = inputEl?.value;
    const data = {
      name: 'ebulsok',
      msg: msg,
    };
    socket.send(JSON.stringify(data));
    inputEl.value = '';
  });

  socket.addEventListener('open', () => {
    // socket.send('클라이언트 입니다.');
  });

  socket.addEventListener('message', (event) => {
    const { name, msg } = JSON.parse(event.data);

    const msgEl = document.createElement('p');
    msgEl.innerText = `${name}: ${msg}`;
    msgEl.classList.add('p-2');
    msgEl.classList.add('bg-warning');
    msgEl.classList.add('fw-bold');
    // msgEl.classList.add('text-white');
    chatEl?.appendChild(msgEl);
    chatEl.scrollTop = chatEl.scrollHeight - chatEl.clientHeight;
  });
})();

app.js

// @ts-check
const Koa = require('koa');
const websockify = require('koa-websocket');
const route = require('koa-route');
const serve = require('koa-static');
const mount = require('koa-mount');

const Pug = require('koa-pug');
const path = require('path');

const app = websockify(new Koa());
const PORT = 4500;

app.use(mount('/public', serve('public')));

const pug = new Pug({
  viewPath: path.resolve(__dirname, './views'),
  app,
});

app.ws.use(
  route.all('/chat', (ctx) => {
    const { server } = app.ws;

    server?.clients.forEach((client) => {
        // client.send('모든 클라이언트에게 메시지 보내기');
    });

    ctx.websocket.on('message', (message) => {
      server?.clients.forEach((client) => {
        client.send(message.toString());
      });
    });
  })
);

app.use(async (ctx, next) => {
  await ctx.render('chat');
});

app.listen(PORT, () => {
  console.log(`서버는 ${PORT}에서 작동 중입니다.`);
});

🚩 app.js에 새로운 유저가 접속했다는 메시지, 나갔다는 메시지 안내 코드 추가

// @ts-check
const Koa = require('koa');
const websockify = require('koa-websocket');
const route = require('koa-route');
const serve = require('koa-static');
const mount = require('koa-mount');

const Pug = require('koa-pug');
const path = require('path');

const app = websockify(new Koa());
const PORT = 4500;

app.use(mount('/public', serve('public')));

const pug = new Pug({
  viewPath: path.resolve(__dirname, './views'),
  app,
});

app.ws.use(
  route.all('/chat', (ctx) => {
    const { server } = app.ws;

    server?.clients.forEach((client) => {
      client.send(
        JSON.stringify({
          name: 'system',
          msg: `새로운 유저가 참여했습니다. 현재 유저 수: ${server.clients.size}`,
          bg: 'bg-danger',
          textColor: 'text-white',
        })
      );
    });

    ctx.websocket.on('message', (message) => {
      server?.clients.forEach((client) => {
        client.send(message.toString());
      });
    });

    ctx.websocket.on('close', (message) => {
      server?.clients.forEach((client) => {
        client.send(
          JSON.stringify({
            name: 'server',
            msg: `유저가 퇴장했습니다. 현재 유저 수: ${server.clients.size}`,
            bg: 'bg-dark',
            textColor: 'text-white',
          })
        );
      });
    });
  })
);

app.use(async (ctx, next) => {
  await ctx.render('chat');
});

app.listen(PORT, () => {
  console.log(`서버는 ${PORT}에서 작동 중입니다.`);
});

🚩 chat.js 랜덤한 닉네임 정하기

// @ts-check
const adj = [
  '멋진',
  '잘생긴',
  '예쁜',
  '졸린',
  '우아한',
  '힙한',
  '배고픈',
  '집에 가기 싫은',
  '집에 가고 싶은',
  '귀여운',
  '중후한',
  '똑똑한',
  '이게 뭔가 싶은',
  '까리한',
  '프론트가 하고 싶은',
  '백엔드가 재미 있는',
  '몽고 디비 날려 먹은',
  '열심히하는',
  '피곤한',
  '눈빛이 초롱초롱한',
  '치킨이 땡기는',
  '술이 땡기는',
];

const member = [
  'a님',
  'b님',
  'c님',
  'd님',
  'e님',
  'f님',
  'g님',
  'h님',
  'i님',
  'j님',
  'k님',
  'l님',
  'm님',
  'n님',
  'o님',
  '세영님',
  '의진님',
  '승수님',
  '해성님',
  '허원님',
];

const bootColor = [
  { bg: 'bg-primary', text: 'text-white' },
  { bg: 'bg-success', text: 'text-white' },
  { bg: 'bg-warning', text: 'text-black' },
  { bg: 'bg-info', text: 'text-white' },
  { bg: 'alert-primary', text: 'text-black' },
  { bg: 'alert-secondary', text: 'text-black' },
  { bg: 'alert-success', text: 'text-black' },
  { bg: 'alert-danger', text: 'text-black' },
  { bg: 'alert-warning', text: 'text-black' },
  { bg: 'alert-info', text: 'text-black' },
];

// IIFE
(() => {
  const socket = new WebSocket(`ws://${window.location.host}/chat`);
  const btnEl = document.getElementById('btn');
  const inputEl = document.getElementById('input');
  const chatEl = document.getElementById('chat');

  function pickRandom(arr) {
    const index = Math.floor(Math.random() * arr.length);
    console.log(index);
    return arr[index];
  }

  const nickName = pickRandom(adj) + ' ' + pickRandom(member);
  const theme = pickRandom(bootColor);

  btnEl?.addEventListener('click', () => {
    const msg = inputEl?.value;
    const data = {
      name: nickName,
      msg: msg,
      bg: theme.bg,
      textColor: theme.text,
    };
    socket.send(JSON.stringify(data));
    inputEl.value = '';
  });

  socket.addEventListener('open', () => {
    // socket.send('클라이언트 입니다.');
  });

  socket.addEventListener('message', (event) => {
    const { name, msg, bg, textColor } = JSON.parse(event.data);

    const msgEl = document.createElement('p');
    msgEl.innerText = `${name}: ${msg}`;
    msgEl.classList.add('p-2');
    msgEl.classList.add(bg);
    msgEl.classList.add('fw-bold');
    msgEl.classList.add(textColor);
    chatEl?.appendChild(msgEl);
    chatEl.scrollTop = chatEl.scrollHeight - chatEl.clientHeight;
  });
})();

🚩 MongoDB 연결

모듈 설치: [터미널] npm i mongodb
public/mongo.js

// @ts-check
const { MongoClient, ServerApiVersion } = require('mongodb');

const uri =
  'mongodb://ebulsok:<password>@localhost:27017/?authMechanism=DEFAULT';

const client = new MongoClient(uri, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  serverApi: ServerApiVersion.v1,
});

module.exports = client;

🚩 채팅 내역 DB 저장

클라이언트에서 전송된 메시지가 들어오면 DB에 저장
전달받은 메시지를 JSON.parse하여 오브젝트로 변경한 다음 변수에 넣기
chat을 전개연산자로 풀어서 DB에 넣기
채팅 내역 삽입 시 시간 항목 추가

ctx.websocket.on('message', async (message) => {
      const chat = JSON.parse(message.toString());
      const insertClient = await _client;
      const chatCursor = insertClient.db('KDT-1').collection('chats');
      await chatCursor.insertOne({
        ...chat,
        createdAt: new Date(),
      });

      server?.clients.forEach((client) => {
        client.send(
          JSON.stringify({
            type: 'chat',
            data: { ...chat },
          })
        );
      });
});

🚩 채팅 내역 불러오기

새로운 클라이언트가 접속하면 DB로부터 모든 채팅 내역을 받아서 클라이언트로 전달
클라이언트가 서버 접속 시 최초에 발생해야 함, 접속한 클라이언트에게만 전달
사용자가 보낸 채팅과 구분될 필요가 있음(type 키 추가)

app.ws.use(
  route.all('/chat', async (ctx) => {
    const { server } = app.ws;

    const client = await _client;
    const cursor = client.db('KDT-1').collection('chats');
    const chats = cursor.find({}, { sort: { createdAt: 1 } });
    const chatsData = await chats.toArray();

    ctx.websocket.send(
      JSON.stringify({
        type: 'sync',
        data: { chatsData },
      })
    );

    server?.clients.forEach((client) => {
      client.send(
        JSON.stringify({
          type: 'chat',
          data: {
            name: 'system',
            msg: `새로운 유저가 참여했습니다. 현재 유저 수: ${server.clients.size}`,
            bg: 'bg-danger',
            textColor: 'text-white',
          },
        })
      );
    });

    ctx.websocket.on('message', async (message) => {
      const chat = JSON.parse(message.toString());
      const insertClient = await _client;
      const chatCursor = insertClient.db('KDT-1').collection('chats');
      await chatCursor.insertOne({
        ...chat,
        createdAt: new Date(),
      });

      server?.clients.forEach((client) => {
        client.send(
          JSON.stringify({
            type: 'chat',
            data: { ...chat },
          })
        );
      });
    });

    ctx.websocket.on('close', (message) => {
      server?.clients.forEach((client) => {
        client.send(
          JSON.stringify({
            type: 'chat',
            data: {
              name: 'server',
              msg: `유저가 퇴장했습니다. 현재 유저 수: ${server.clients.size}`,
              bg: 'bg-dark',
              textColor: 'text-white',
            },
          })
        );
      });
    });
  })
);

🚩 chat.js에서 채팅 내역과 실제 채팅을 구분하여 처리

msgData의 type이 sync이면 이전 채팅 내역이므로 해당 데이터를 전부 chats 배열에 푸쉬
chat이면 클라이언트로부터 전달된 실제 채팅이므로 chats 배열에 푸쉬
분기 별로 채팅 내역을 그려주는 drawChats 함수 구현

function drawChats(type, data) {
    if (type === 'sync') {
      chatEl.innerHTML = '';
      chats.forEach(({ name, msg, bg, textColor }) => {
        const msgEl = document.createElement('p');
        msgEl.innerText = `${name}: ${msg}`;
        msgEl.classList.add('p-2');
        msgEl.classList.add(bg);
        msgEl.classList.add('fw-bold');
        msgEl.classList.add(textColor);
        chatEl?.appendChild(msgEl);
        chatEl.scrollTop = chatEl.scrollHeight - chatEl.clientHeight;
      });
    } else if (type === 'chat') {
      const msgEl = document.createElement('p');
      msgEl.innerText = `${data.name}: ${data.msg}`;
      msgEl.classList.add('p-2');
      msgEl.classList.add(data.bg);
      msgEl.classList.add('fw-bold');
      msgEl.classList.add(data.textColor);
      chatEl?.appendChild(msgEl);
      chatEl.scrollTop = chatEl.scrollHeight - chatEl.clientHeight;
    }
  }

  const nickName = pickRandom(adj) + ' ' + pickRandom(member);
  const theme = pickRandom(bootColor);

  btnEl?.addEventListener('click', () => {
    const msg = inputEl?.value;
    const data = {
      name: nickName,
      msg: msg,
      bg: theme.bg,
      textColor: theme.text,
    };
    socket.send(JSON.stringify(data));
    inputEl.value = '';
  });

  socket.addEventListener('message', (event) => {
    const msgData = JSON.parse(event.data);
    const { type, data } = msgData;

    if (type === 'sync') {
      const oldChats = data.chatsData;
      chats.push(...oldChats);
      drawChats(type, data);
    } else if (type === 'chat') {
      chats.push(data);
      drawChats(type, data);
    }
  });

🚩 엔터키를 쳤을 때도 채팅이 전송되게 수정

// chat.pug
form(action="/chat" onsubmit="return false;")#form.w-50

// chat.js
inputEl?.addEventListener('keyup', (event) => {
    if (event.keyCode === 13) btnEl.click();
});

저작자표시 비영리 변경금지

'KDT > TIL' 카테고리의 다른 글

9/28 TIL : props, 컴포넌트 꾸미기(inline, sass, styled-components), useRef (0)	2022.09.28
9/26 TIL : MVC 패턴, React(Component, state) (0)	2022.09.27
9/21 TIL : multer, 암호화(crypto), 웹 소켓으로 채팅 서비스 구현 (0)	2022.09.22
9/19 TIL : 자동 로그인(쿠키), DOTENV, OAuth(페이스북, 네이버, 카카오, 구글 로그인) (0)	2022.09.20
9/16 TIL : cookie, HTTP session, passport (0)	2022.09.20

현재글9/23 TIL : koa, pug, 채팅 기능 구현

괴발개발

9/23 TIL : koa, pug, 채팅 기능 구현

'KDT > TIL' 카테고리의 다른 글

'KDT/TIL'의 다른글

티스토리툴바

9/23 TIL : koa, pug, 채팅 기능 구현

'KDT > TIL' 카테고리의 다른 글

'KDT/TIL'의 다른글

관련글

티스토리툴바