항해99_6기_TIL

항해99 👩‍💻44일차 TIL

merrytang 2022. 4. 20. 00:24


🎉오늘의 한 일🎉

🧡팀프로젝트🧡

팀프로젝트에 넣을 소켓 채팅기능을 예습겸 개인프로젝트에서 먼저 구현해보았다. 


🧡개인프로젝트🧡 

1. Socket.io를 사용하여 현재접속자 카운팅 및 실시간채팅기능을 구현하였다.

 

 

 

 

2. 깃허브에 업로드하고보면 필요없는 파일이 많이 올라가는 것 같아서 구글링해보았다. 그결과 node.js에서의 .gitignore 요소들이 정리되어있는 링크를 찾아서 내 블로그에서 git에 올리지 않을 요소들을 추가해주었다. 이제 git 깔끔하게 필요한것들만 업로드되니까 기분이 좋다😊.

 

https://github.com/github/gitignore/blob/main/Node.gitignore

 

🐣배운 점🐣

Socket.io

  • 표준 기술이 아니며, 라이브러리이다.
  • 소켓 연결 실패 시 fallback을 통해 다른 방식으로 알아서 해당 클라이언트와 연결을 시도한다.
  • room 개념을 이용해 여러개의 채팅방을 만들 수 있다.
  • 전체 클라이언트에게 broadcast를 보낼 수도 있고, room별로 broadcast를 보낼 수도 있고, 특정 사람에게만 메세지를 보낼 수도 있다. 

 

Socket.io 송수신 메소드 

// 접속된 모든 클라이언트에게 메시지를 전송한다
io.emit('event_name', msg);

// 메시지를 전송한 클라이언트에게만 메시지를 전송한다
socket.emit('event_name', msg);

// 메시지를 전송한 클라이언트를 제외한 모든 클라이언트에게 메시지를 전송한다
socket.broadcast.emit('event_name', msg);

// 특정 클라이언트에게만 메시지를 전송한다
io.to(id).emit('event_name', data);

 

소켓 메세지 송신 

// 클라이언트와 소켓IO 연결됬는지 안됬는지 이벤트 실행. (채팅방에 누가 입장하였습니다/퇴장하였습니다 )
io.on('connection/disconnection', (socket) => {
});

// 클라이언트에서 지정한 이벤트가 emit되면 수신 발생
socket.on('event_name', (data) => {
});

 


📌Trouble Shooting 📌

/socket.io/socket.io.js 404 (Not Found)

Uncaught ReferenceError: io is not defined

 

소켓 실시간채팅기능을 구현하는데 아래와같은 에러가 계속 났다. 이방법 저방법 해보다가 스택오버플로우에 도움을 받아 해결하였다! 아래와같이 기존에 서버를 구동할 때 app.listen을 사용했던 코드를 server.listen으로 변경해주니 잘 작동되었다🙆‍♀️. 소켓과같이 http 인스턴스를 사용해야되는 경우엔 server.listen을 사용해주어야된다고한다. 

 

 

                       이전코드

                         

                       수정한 코드 

 

EC2 재배포시 연결안됨 문제 해결 

소켓기능을 추가 후 재배포를 했는데 연결이 되지 않았다. 생각해보니 gitignore파일에 많은 요소들을 포함시켜놓아서 그런것 같았다. 그래서 CyberDuck(사이버덕)이라는이라는 프로그램을 사용해서 로컬에 있는 파일들을(node_mudules제외) 모두 gitbash를 통해 EC2서버로 넣어주니 다시 재배포가 잘 되었다! 🥰