🎵 네트워크 컴퓨팅 프로젝트 - 실시간 음악 공유 웹

주제: TCP 기반 명령 처리와 실시간 음악 공유 기능을 포함한 음악 채팅 웹

---

📌 프로젝트 개요

• 주제: 음악 공유 및 채팅 기능을 제공하는 WebSocket 기반 음악 공유 웹사이트
• 언어: Java (Spring Boot), JavaScript (Vanilla)
• 기술: WebSocket (STOMP), MySQL
• 설명:
  사용자는 친구를 추가해 서로 음악을 공유할 수 있는 시스템을 개발.
  친구 간에는 곡 정보와 함께 메시지를 실시간으로 전달할 수 있으며, 서버는 이를 중계하여 양방향 상호작용을 지원함.

---

🛠 사용 기술 스택

기술	역할
Spring Boot	WebSocket 메시지 처리, REST API, DB 연동
JavaScript	WebSocket 클라이언트, DOM 제어
MySQL	사용자별 플레이리스트 저장
WebSocket (STOMP)	실시간 채팅 및 알림 처리

---

🖥 시스템 구조

📱 클라이언트 (웹)

• WebSocket 연결 (닉네임 기반 + STOMP)
• 음악 선택 및 메시지 전송
• 실시간 채팅 UI 구성

🖥 서버 (Spring Boot)

• 사용자 인증 및 등록 (닉네임 중복 처리)
• 친구 관계 관리
• 음악 데이터 저장 및 조회
• WebSocket 기반 실시간 메시지 중계

---

👥 사용자 시나리오

1. 웹 진입 → 닉네임 입력 → WebSocket 연결
2. 장르 선택 → 가수 선택 → 곡 추천 → 플레이리스트 저장
3. 플레이리스트에서 곡 감상 → 친구에게 곡 + 메시지 전송
4. 친구는 알림 확인 후 채팅방 입장
5. 1:1 실시간 채팅 진행

---

🔄 주요 기능 흐름도

• 닉네임 등록 (중복 시 거부)
• 친구 추가 (서버에 관계 등록)
• 곡 추천 및 저장 (DB 저장)
• 곡 + 메시지 전송 (WebSocket 전송)
• 알림 발생 → 채팅방 입장
• 실시간 채팅 진행

---

🔄 TCP 구조 → WebSocket 구조 전환 이유

항목	TCP 기반 (기존)	WebSocket 기반 (현재)
메시지 파싱	명령어 기반 수동 파싱 (/chat, /addfriend)	JSON 기반 명확한 타입 분기
UI 연동	Java에서 Socket 생성 → 비효율적	클라이언트-서버 간 STOMP 연결로 실시간 처리
브라우저 호환성	JS에서 TCP 직접 사용 불가	WebSocket은 브라우저 기본 지원
채팅방 동기화	수동 처리 필요	구독 기반 자동 동기화

---

⚠️ 에러 처리 포인트

• 닉네임 중복: /chat.register 수신 시 중복이면 강제 로그아웃
• 친구가 아님: 친구가 아닌 사용자에게 메시지 전송 불가
• 잘못된 형식: 메시지 파싱 시 command/type 기준 예외 처리

---

🧩 구현 중 어려웠던 점 & 해결 방법

문제	해결 방법
브라우저에서 TCP 소켓 연결 불가	WebSocket 기반 구조로 전체 전환
곡 제목 공백 포함 시 메시지 파싱 오류	"곡 제목"처럼 따옴표 포함 포맷 지정
채팅방 실시간 동기화	roomId 기반 자동 구독 구조 구현
상대방 알림 클릭 전까지 채팅방 입장 불가	알림 발생 시 미리 구독 처리하여 실시간 수신 유지

---

📂 프로젝트 구조 및 향후 개선 방향

• 음악 추천 알고리즘 도입 가능
• 멀티 채팅방 지원
• 채팅 기록 저장 및 검색 기능

---