스프링부트 구현 3

2D 웹 온라인 게임 공간 및 채팅을 구현하기 [웹소켓/Phaser.js]

[ 인게임 화면 ] 핵심 기능 요약 :웹소켓 공간으로 여러 유저가 동시 접속 가능나의 움직임 및 상대방의 위치 확인채팅박스 통해 접속자간 자유로운 채팅 기능Phaser.js 를 통해 비교적 유연한 게임공간 확장 및 변경OAuth2 적용으로 접속자 인증 기능게임 접속 전 다양한 정보를 확인할 수 있는 프리뷰 페이지 제공  [ 메인화면 ]   [ Oauth2 구글 로그인 화면  ]   [ 구현 방법 ] 스프링부트 생성 (스프링 시큐리티 및 웹소켓 등 필요 의존성 임포트)게임 화면을 구성할 game.html 작성 (Phaser.js)로그인 전 메인화면을 구성할 index.html 작성  에셋 이미지, SSH 인증을 위한 keystore.pfx 제외는 제외했습니다.https://github.com/rakaso5..

2D 캐릭터 및 채팅 상호작용 공간을 구현해보자 [웹소켓/Phaser.js]

프로젝트 목표실시간 웹 기반 상호작용 공간 구현2D 환경에서 고유 캐릭터로 참여실시간 채팅을 통한 사용자 간 커뮤니케이션기술 스택Phaser.js: 게임 로직과 캐릭터 움직임, 물리 엔진WebSocket: 실시간 채팅 및 캐릭터 위치 동기화Spring Boot: 서버 측 WebSocket 관리HTML/CSS/JavaScript: UI 및 게임 인터페이스기능 소개사용자 ID 부여: 각 사용자는 고유 6자리 ID를 통해 식별캐릭터 움직임: 화살표 키를 사용해 캐릭터 이동실시간 동기화: WebSocket을 통한 여러 브라우저 간 캐릭터 동기화채팅 기능: 사용자 간 실시간 텍스트 기반 채팅 가능  긴 세션ID를 6자리로 줄인 문자열을 ID 및 캐릭터로 사용했습니다.검은 화면에 떠있는 6자리 코드는 방향키로 움직..

스프링부트로 실시간 채팅을 구현해보자 [웹소켓]

이 프로젝트는 스프링부트를 활용하여 웹소켓을 통해 실시간 채팅 기능을 구현한 간단한 단일 HTML 페이지입니다. 프로젝트의 주요 기능 및 기술 스택은 다음과 같습니다:웹소켓을 이용한 실시간 채팅: 클라이언트와 서버 간의 실시간 데이터 전송을 위해 웹소켓을 사용하여 사용자가 입력한 메시지를 즉시 다른 사용자에게 전달할 수 있습니다.스프링부트: 백엔드 프레임워크로 스프링부트를 사용하여 서버를 구성하고 웹소켓 핸들러를 설정했습니다.OAuth를 통한 로그인 및 보안 연결: 사용자 인증을 위해 OAuth를 구현하였으며, 안전한 데이터 전송을 위해 SSL 인증서를 적용하였습니다.포트 설정 및 SSL 구성: SSL 연결을 위해 포트 8443을 사용하고, 키 저장소 및 암호와 같은 SSL 관련 설정을 포함하여 HTTP..