https://github.com/stjoo0925/websocket
웹소켓연습
https://github.com/stjoo0925/websocket
websocket
Last synced: 8 months ago
JSON representation
웹소켓연습
- Host: GitHub
- URL: https://github.com/stjoo0925/websocket
- Owner: Stjoo0925
- Created: 2025-07-06T12:28:46.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-08T13:41:30.000Z (12 months ago)
- Last Synced: 2025-07-08T14:44:38.239Z (12 months ago)
- Topics: websocket
- Language: TypeScript
- Homepage:
- Size: 1.22 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 웹소켓 실시간 채팅 애플리케이션
Socket.IO를 사용한 실시간 채팅 애플리케이션입니다.
## 기능
- 실시간 메시지 송수신
- 이미지 파일 공유
- 이미지 미리보기 및 확대 보기
- 사용자 입장/퇴장 알림
- 접속자 수 표시
- 타이핑 상태 표시
- 반응형 디자인
- 자동 재연결 기능
## 설치 및 실행
1. 의존성 설치:
```bash
npm install
```
2. 서버 실행:
```bash
npm start
```
3. 개발 모드 실행 (nodemon 사용):
```bash
npm run dev
```
4. 브라우저에서 `http://localhost:3000` 접속
## 사용법
### 기본 채팅
1. 사용자 이름을 입력하고 "입장하기" 버튼을 클릭
2. 메시지를 입력하고 Enter 키를 누르거나 "전송" 버튼을 클릭
3. 다른 브라우저 탭이나 창에서 같은 URL로 접속하여 여러 사용자로 채팅 테스트 가능
### 이미지 공유
1. 채팅 입력창 옆의 📷 버튼을 클릭
2. 컴퓨터에서 이미지 파일을 선택 (JPG, PNG, GIF 등)
3. 미리보기 화면에서 이미지를 확인
4. "전송" 버튼을 클릭하여 이미지를 다른 사용자들과 공유
5. 채팅창의 이미지를 클릭하면 큰 화면으로 볼 수 있음
## 기술 스택
- **Backend**: Node.js, Express, Socket.IO, Multer
- **Frontend**: HTML, CSS, JavaScript
- **실시간 통신**: WebSocket (Socket.IO)
- **파일 업로드**: Multer 미들웨어
- **이미지 처리**: FileReader API
## 파일 구조
```
websocket/
├── server.js # 서버 메인 파일
├── package.json # 패키지 설정
├── uploads/ # 업로드된 이미지 파일들
├── public/ # 정적 파일들
│ ├── index.html # 메인 HTML
│ ├── style.css # 스타일시트
│ └── script.js # 클라이언트 JavaScript
└── README.md # 이 파일
```
## 이미지 공유 기능 상세
### 지원 파일 형식
- JPG, JPEG
- PNG
- GIF
- WebP
- 기타 브라우저에서 지원하는 이미지 형식
### 파일 제한사항
- **최대 파일 크기**: 5MB
- **파일 타입**: 이미지 파일만 허용
- **보안**: 파일 타입 검증 및 안전한 파일명 생성
### 기능 특징
- 📷 **간편한 업로드**: 카메라 아이콘 클릭으로 쉬운 파일 선택
- 👀 **미리보기**: 업로드 전 이미지 미리보기 가능
- 🔍 **확대 보기**: 채팅의 이미지 클릭 시 큰 화면으로 보기
- ⚡ **실시간 공유**: 업로드 즉시 모든 사용자에게 전송
- 📱 **반응형**: 모바일과 데스크톱 모두 지원