{"id":30194028,"url":"https://github.com/stjoo0925/websocket","last_synced_at":"2025-10-20T07:30:13.574Z","repository":{"id":303613248,"uuid":"1014791226","full_name":"Stjoo0925/websocket","owner":"Stjoo0925","description":"웹소켓연습","archived":false,"fork":false,"pushed_at":"2025-07-08T13:41:30.000Z","size":1279,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-08T14:44:38.239Z","etag":null,"topics":["websocket"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Stjoo0925.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,"zenodo":null}},"created_at":"2025-07-06T12:28:46.000Z","updated_at":"2025-07-08T13:41:35.000Z","dependencies_parsed_at":"2025-07-08T14:44:47.989Z","dependency_job_id":"617ee795-54a8-4531-a3d9-6ec7b0321e87","html_url":"https://github.com/Stjoo0925/websocket","commit_stats":null,"previous_names":["stjoo0925/websocket"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Stjoo0925/websocket","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stjoo0925%2Fwebsocket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stjoo0925%2Fwebsocket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stjoo0925%2Fwebsocket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stjoo0925%2Fwebsocket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Stjoo0925","download_url":"https://codeload.github.com/Stjoo0925/websocket/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stjoo0925%2Fwebsocket/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270166108,"owners_count":24538445,"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","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["websocket"],"created_at":"2025-08-13T02:08:38.591Z","updated_at":"2025-10-20T07:30:08.530Z","avatar_url":"https://github.com/Stjoo0925.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 웹소켓 실시간 채팅 애플리케이션\n\nSocket.IO를 사용한 실시간 채팅 애플리케이션입니다.\n\n## 기능\n\n- 실시간 메시지 송수신\n- 이미지 파일 공유\n- 이미지 미리보기 및 확대 보기\n- 사용자 입장/퇴장 알림\n- 접속자 수 표시\n- 타이핑 상태 표시\n- 반응형 디자인\n- 자동 재연결 기능\n\n## 설치 및 실행\n\n1. 의존성 설치:\n\n```bash\nnpm install\n```\n\n2. 서버 실행:\n\n```bash\nnpm start\n```\n\n3. 개발 모드 실행 (nodemon 사용):\n\n```bash\nnpm run dev\n```\n\n4. 브라우저에서 `http://localhost:3000` 접속\n\n## 사용법\n\n### 기본 채팅\n\n1. 사용자 이름을 입력하고 \"입장하기\" 버튼을 클릭\n2. 메시지를 입력하고 Enter 키를 누르거나 \"전송\" 버튼을 클릭\n3. 다른 브라우저 탭이나 창에서 같은 URL로 접속하여 여러 사용자로 채팅 테스트 가능\n\n### 이미지 공유\n\n1. 채팅 입력창 옆의 📷 버튼을 클릭\n2. 컴퓨터에서 이미지 파일을 선택 (JPG, PNG, GIF 등)\n3. 미리보기 화면에서 이미지를 확인\n4. \"전송\" 버튼을 클릭하여 이미지를 다른 사용자들과 공유\n5. 채팅창의 이미지를 클릭하면 큰 화면으로 볼 수 있음\n\n## 기술 스택\n\n- **Backend**: Node.js, Express, Socket.IO, Multer\n- **Frontend**: HTML, CSS, JavaScript\n- **실시간 통신**: WebSocket (Socket.IO)\n- **파일 업로드**: Multer 미들웨어\n- **이미지 처리**: FileReader API\n\n## 파일 구조\n\n```\nwebsocket/\n├── server.js          # 서버 메인 파일\n├── package.json       # 패키지 설정\n├── uploads/           # 업로드된 이미지 파일들\n├── public/            # 정적 파일들\n│   ├── index.html     # 메인 HTML\n│   ├── style.css      # 스타일시트\n│   └── script.js      # 클라이언트 JavaScript\n└── README.md          # 이 파일\n```\n\n## 이미지 공유 기능 상세\n\n### 지원 파일 형식\n\n- JPG, JPEG\n- PNG\n- GIF\n- WebP\n- 기타 브라우저에서 지원하는 이미지 형식\n\n### 파일 제한사항\n\n- **최대 파일 크기**: 5MB\n- **파일 타입**: 이미지 파일만 허용\n- **보안**: 파일 타입 검증 및 안전한 파일명 생성\n\n### 기능 특징\n\n- 📷 **간편한 업로드**: 카메라 아이콘 클릭으로 쉬운 파일 선택\n- 👀 **미리보기**: 업로드 전 이미지 미리보기 가능\n- 🔍 **확대 보기**: 채팅의 이미지 클릭 시 큰 화면으로 보기\n- ⚡ **실시간 공유**: 업로드 즉시 모든 사용자에게 전송\n- 📱 **반응형**: 모바일과 데스크톱 모두 지원\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstjoo0925%2Fwebsocket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstjoo0925%2Fwebsocket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstjoo0925%2Fwebsocket/lists"}