49/99 클론코딩 주차 - Socket.io의 시작

날짜 적어놓고 보니 이제 절반쯤이네. 졸려죽겠으니까  빨리 쓰고 자는걸로.

 

• 이번 WIL의 키워드 : 이번 주차를 진행하며 내가 가장 신경 쓴 부분/기술에 대한 정리

 이번 주차 내가 맡아서 했던 부분은 실시간 채팅 부분이다.

원래 클론하려는 원티드에는 실시간 채팅이 없지만, 새로운 기능을 좀 추가해보고자 팀원들과 실시간채팅을 집어 넣기로 하였다.

앞으로의 실전 프로젝트에 있어서도 실시간채팅, 소셜로그인은 거의 포함될 가능성이 크기때문에 더욱 그랬다.

노드JS에서 실시간채팅을 위해서는 Socket.io를 써야한다.

 

Socket.io란 Node.js 라이브러리로 실시간 웹 기술을 손쉽게 사용할 수 있는 모듈이다. Websock, Polling, Streaming 등 다양한 방법을 하나의 API로 추상화 한것으로 브라우저의 종류에 상관없이 실시간 웹 구현이 가능하다.

 

시작은 쉬웠다. 이전에는 express app서버를 이용했다면 http로 서버를 확장해주고 

app 객체는 express로 기존처럼 API을 개발하거나 프론트엔드 파일을 서빙하는 용도로 사용할 수 있고, io 객체도 기존처럼 클라이언트와 데이터를 주고 받는 용도로 사용이 가능

 

const express = require("express");
const { createServer } = require("http");

const app = express();

const http = createServer(app);

 

그저 모듈을 설치하고 사이트에서 예제로 주어진 코드를 통해 클라이언트와 서버간의 요청 응답값만 맞춰주면 되었다.

클라이언트 측 이벤트 핸들링

socket.on("customEventName", (data) => { console.log(data); });

서버 측

socket.emit("customEventName", "this is custom event data");

백엔드 측에서는 그저 클라이언트 측에서 핸들링하는 값을 받거나 내보내주거나만 하면 돼서 큰 어려움이 없었다.

내 생각에 .. Socket.io는 프론트엔드 쪽이 7~8할정도 비중이 있다.

그래서 실전 때는 좀 더 알고 쓰고자 한다. 이번 주 내로 다시 Socket.io를 자유자재로 쓸 수 있도록하여 다시 써야겠다.

아래 내용은 기본 코드 이후 Socket.io에서 부여하는 과제이다. 성공해서 잘 정리해봐야겠다.

• Broadcast a message to connected users when someone connects or disconnects.
• Add support for nicknames.
• Don’t send the same message to the user that sent it. Instead, append the message directly as soon as he/she presses enter.
• Add “{user} is typing” functionality.
• Show who’s online.
• Add private messaging.
• Share your improvements!