{"id":25957646,"url":"https://github.com/jdy8739/websocket-study","last_synced_at":"2026-05-06T15:31:15.017Z","repository":{"id":278582216,"uuid":"936099204","full_name":"jdy8739/WebSocket-Study","owner":"jdy8739","description":"WebSocket protocol 스터디","archived":false,"fork":false,"pushed_at":"2025-02-22T15:22:55.000Z","size":59,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-22T15:43:31.901Z","etag":null,"topics":["socket-io","webrtc-video","websocket"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jdy8739.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-20T14:26:55.000Z","updated_at":"2025-02-22T14:48:11.000Z","dependencies_parsed_at":"2025-02-22T15:43:34.876Z","dependency_job_id":"a17dedce-9bf5-4458-91c2-0ef9179a71a4","html_url":"https://github.com/jdy8739/WebSocket-Study","commit_stats":null,"previous_names":["jdy8739/mini-zoom","jdy8739/websocket-study"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdy8739%2FWebSocket-Study","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdy8739%2FWebSocket-Study/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdy8739%2FWebSocket-Study/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdy8739%2FWebSocket-Study/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdy8739","download_url":"https://codeload.github.com/jdy8739/WebSocket-Study/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241890964,"owners_count":20037816,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["socket-io","webrtc-video","websocket"],"created_at":"2025-03-04T17:36:03.169Z","updated_at":"2026-05-06T15:31:14.973Z","avatar_url":"https://github.com/jdy8739.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔥 Real-Time Communication Study\n### WebSocket, Socket.io, WEbRTC 스터디 프로젝트\n\n이 저장소는 WebSocket, Socket.io, WebRTC를 활용한 실시간 서비스 구현을 스터디하기 위해 만들어졌습니다.  \n각 기술을 활용하여 채팅 및 화상 채팅 기능을 개발하며, 실시간 통신의 원리를 학습했습니다.  \n\n---\n\n## 📌 프로젝트 목표  \n- WebSocket, Socket.io, WebRTC의 차이점과 특징을 학습  \n- 각 기술을 활용한 **실시간 서비스** 개발  \n- 실시간 채팅과 화상 채팅 기능 구현  \n\n---\n\n## 🚀 **주요 기능 (Features)**  \n\n- **`ws` 브랜치 (순수 WebSocket)** 🔨  \n  - WebSocket을 활용한 1:N 채팅방 구현  \n\n- **`socket-io` 브랜치 (Socket.io 적용)** ✍  \n  - 채팅방 기능 + 유저 세팅 기능 추가  \n  - 채팅방 리스트 + 인원 수 표시  \n\n- **`main` 브랜치 (WebRTC 활용)** 🏗  \n  - WebRTC 기반 화상 채팅 서비스 구현  \n  - P2P 연결을 통한 실시간 영상/음성 통신  \n  - datachannel을 통한 메시지 전송 기능  \n\n---\n\n## 🛠 **기술 스택 (Tech Stack)**  \n\n- **[WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)** - 브라우저와 서버 간의 실시간 양방향 통신을 위한 프로토콜  \n- **[Socket.io](https://socket.io/)** - WebSocket 프로토콜을 추상화한 라이브러리  \n- **[WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)** - 서버를 통하지 않고 두 피어간의 직접 연결을 맺는 네트워크 기술    \n- **[Node.js](https://nodejs.org/en)** - 간단한 정적 파일 서버 제공  \n\n---\n\n## 🚀 **설치 및 실행 방법 (Installation \u0026 Setup)**  \n\n이 프로젝트를 실행하려면 **Node.js 20 이상**이 필요합니다.  \n아래 명령어를 실행하여 프로젝트를 로컬에서 실행할 수 있습니다.  \n\n```sh\n# 의존성 설치\nnpm i\n\n# NODE.JS 서버 구동\nnpm run dev\n```\n\n---\n\n## 💡 배운 점 \u0026 기술적 인사이트 (Learnings \u0026 Insights)  \n\n🔹 Socket.io  \n  - WebSocket이 불가능한 환경에서도 동작하도록 추상화되어 있다.  \n  - WebSocket 기반이지만, Long Polling을 지원하여 더 안정적인 연결을 보장  \n  \n🔹 WebRTC  \n  - 서버를 거치지 않고 P2P 연결을 통해 영상/음성 데이터를 주고받을 수 있다.  \n  - 커넥션을 맺기 위해 사용자의 스트림을 얻고 오퍼/앤서를 교환 후 두 피어간의 잠재적 연결통로인 icecandidate를 교환하여 커넥션을 맺는다.  \n  - STUN/TURN 서버 설정이 필요하며, 방화벽 이슈가 있을 수 있다.  \n  - WebRTC가 제공하는 datachannel은 모든 종류의 미디어를 P2P로 전송할 수 있다.  \n\n---\n\n## 🔧 향후 개선점 (Improvements)  \n\n🚧 카메라 선택 기능 추가  \n다른 내장 카메라를 선택해도 카메라 변경이 적용되지 않는 점 수정  \n\n🚧 버그 개선  \n유저가 채팅방 재입장 시 `RTCDataChannel's ReadyState is not 'open'`라는 콘솔에러가 뜨며 채팅이 안되는 버그 수정  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdy8739%2Fwebsocket-study","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdy8739%2Fwebsocket-study","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdy8739%2Fwebsocket-study/lists"}