[Next.js + socket.io] 크리스마스 선물 대작전

김동하·2020년 12월 25일

socket.io

목록 보기

1/2

채팅을 만들자

1차 프로젝트 때 했던 하드 코딩 가라 답장너 채팅

말만 들어도 가슴이 설레는 세 가지가 있는데 하나는 지도고 하나는 달력이고 나머지 하나는 채팅이다.

지도와 달력은 프로젝트를 하면서 그 기쁨을 다 가졌기에 이제 채팅을 만들고자 한다. 마침 기업협업 프로젝트로 클라이언트와 실시간으로 채팅을 만들어야 한다. 1차 프로젝트 달력, 2차 프로젝트 지도 그리고 마지막으로 채팅이라니. 이것은 마치 각본이 짜여있는 인생의 엑스트라 1이 된 기분이다. 인생은 내 주위로 돌아가지 않았지만 그래도 가끔 각본에 엑스트라가 등장하기 때문에 이렇게 꿈꿔왔던 대로 흘러가곤 한다. 내 인생을 관장하고 있는 감독님. 열심히 연기할 테니 자주 출연하게 해주세요. 열심히 하고 있습니다.

아무튼 채팅이나리 무척 설렌다. 채팅에 대한 나의 열정이 어떠하냐면 틈만 보이면 채팅을 만들고자 언제나 기회를 엿보았다. 그래서 1차 프로젝트 때 말도 안 되는 이미 짜놓은 배열에서 이벤트만 발생하면 답장이 튀어나오는 소통 불가능한 챗봇을 만들었다. 1차 프로젝트 때 만들었던 나의 작은 돛단배가 드디어 이제 엄청나게 거대한 타이타닉이 될 것이다. 이제 그럼 꿈과 희망의 세계, 채팅으로 가보자!

socket.io

socket.io는 서버와 클라이언트 간에 양방향 통신을 가능하게 해주는 모듈이다.

npm install socket.io

express를 이용해 서버 생성

1차 시도

서버에 socket.io 연결

클라이언트에서 socket.io 연결

메시지를 보낼 때

메시지를 받을 때

두근두근 npm start

1차 시도 실패

GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=1418187395022-0 404 (Not Found)

이 에러 +

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://waleedahmad.kd.io:3000/socket.io/?EIO=2&transport=polling&t=1401964309289-2&sid=1OyDavRDf4WErI-VAAAI. This can be fixed by moving the resource to the same domain or enabling CORS.

cors와 관련된 에러로 실패. 근본적으로 서버와 클라이언트 포트 개념이 없어서 헤매는 것 같다.

한 번에 되리라 시도하지 않았지만 수많은 예제를 찾아보며 이미 그 기쁨을 맛보았던 사람들을 보며 나도 곧 그 기쁨, 무언가 input event를 했을 때 저 웹상 어딘가에 존재하는 곳에서 input에 대한 답을 자동으로 주지 않을까 하는 희망에 부풀었는데 수많은 에러 앞에서 좌절해버렸다. 솔직히 짜증난다. 일단 어렵다. 공식문서 모르겠다. 너무 어려운데 포기할 수 없다구... 그럼 정신 차리고 다시 한 번 떠나보자.. 지옥인지 천옥인지 모를 연옥의 세계로..

2차 시도

심기일전하고 다시 시작 (마음이 아파고 인스타그램 한 시간 해버림 후후)

dev을 클라이언트로 start를 서버로 정한다.

server.js

io.on('connection', (socket) => {
  socket.on('message', ({ author, message }) => {
    console.log(author, message);
    io.emit('message', { author, message });
  });
});

여기서 클라이언트에게 받은 메시지(socket.on)을 io.emit으로 보내준다.

궁금증 1

그럼 양방향으로 통신을 할 때 유저 2명을 어떻게 나누지? id값을 어떻게 줄까?

궁금증 2

chat room 개념은 어떻게 생기는 거지?

궁금증 3

그럼 유저.js를 두 개 만들어야 하나..?

서버가 보낸 메시지를 socket.on으로 저장한다. state값, 즉 message가 달라질 때마다 useEffect를 하는데 값은 데이터를 다시 List에 담는다.

가자 꿈과 희망을 담아

뭔가 이상하고 엉성하고 조악하지만 일단 성공했다. 눈물 찔끔.. 이거 하려고 이틀을 삽질하고 현타와서 레드불 마시고 새벽 다섯시에 자고 아침에 눈을 뜨며 그래 오늘은 채팅이 될 거야 왜냐면 크리스마스거든 하고 일어나서 하루 종일 또 삽질을 하는가 싶었는데 크리스마스 1시간이 지나서 성공해버렸다.

크리스마스 선물은 조금 늦게 도착해요. 왜냐하면 시차가 있거든요.

목표

이제 그럼 겨우 한 스텝이다! 정말 정말 정말 이 짧은 기쁨을 위해서 오랜 시간 고통 받지만 이 짧은 즐거움이 너무 좋다고!!

참고 

https://velog.io/@ju_h2/Node.js-socket.io%EB%A1%9C-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%B1%84%ED%8C%85-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

https://gaemi606.tistory.com/56

https://www.youtube.com/watch?v=CgV8omlWq2o&t=1044s