- Today
- Total
목록웹소켓 (2)
Act99 기술블로그
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/WgW6n/btrxyiWUnTV/xYD3W0gjgqzk7z2wx6RD11/img.png)
안녕하세요. 프론트엔드 개발자를 준비중인 이주석입니다. 이번에 "홈트메이트"라는 사이트를 개발해서 소개 차원으로 글을 적게 되었습니다. 저희 사이트는 WebRTC와 웹소켓을 이용해 유저들이 함께 유튜브 영상을 실시간으로 공유하고, 함께 화상으로 운동을 할 수 있는 사이트를 개발했습니다. 동시에 식단을 공유할 수 있는 Story 기능도 있습니다. 기술스택 - 메인 페이지 - 화상 홈트레이닝 페이지 - LiveNow 페이지 - 스토리 페이지 - 캘린더 페이지 저희 서비스의 특징은 아무래도 WebRTC와 WebSocket 을 이용한 실시간 홈트레이닝 서비스인데요, 친구들과 함께 유튜브 노래를 들으며 공부하거나 같이 유튜브 시청이 가능하니 한번 놀러와주세요! https://hometmate.com 홈트메이트 |..
![](http://i1.daumcdn.net/thumb/C150x150.fwebp.q85/?fname=https://blog.kakaocdn.net/dn/cONHMW/btrsiHswOJb/tqop32HxCE1iq5xkG1WOQK/img.png)
프로젝트 완료가 다 되었다. 사용한 기술스택은 다음과 같다. 먼저 결과물부터 보면, 이렇게 상대방과 본인이 실시간으로 채팅이 가능하게 만들었다. 웹 소켓에 대한 이해를 하고 넘어가느라 오래걸렸다. 먼저 참고 영상은 다음과 같다. https://www.youtube.com/watch?v=a_xo-SbIfUQ&t=3197s Websocket과 Express를 이용해 realtime chat을 만드는 영상이며, 많은 영상과 github, medium 들을 찾다가 이 영상이 제일 유익해서 링크를 남겨놓았다. 먼저, 웹소켓이란 서버와 클라이언트 간의 소켓 연결을 유지해 양방향통신과 데이터 전송이 가능하게 만든 기술이며, 서버와 클라이언트 간의 웹소켓 연결은 HTTP 프로토콜로 이루어지지만 정상적으로 연결된다면 웹..