토이 프로젝트/Spring&Java 갖고놀기

Spring Boot Web Chatting : 스프링 부트로 실시간 채팅 만들기(1) stomp, socketjs, websocket

TerianP 2022. 8. 29.
728x90

각 브렌치 및 포스팅 별 내용

- 일반 채팅 : master => 2 ~

 

- 시그널링 서버를 구현한 화상채팅 & 화면 공유(P2P) : master-webrtc-jpa => 6~7 번 포스팅

 

- Kurento 미디어 서버를 활용한 화상채팅 & 화면 공유(N:M) : master-webrtc-kurento-jpa => 8번 포스팅 ~

- 화상채팅 & catchmind 게임 서비스 :  master-webrtc-catchmind 14번 포스팅

 

0. 프로젝트 개요

- 개인적으로 정말정말 해보고 싶었던 실시간 채팅 만들기를 드디어 구현했다.
- 사실 이전에 팀프로젝트로 만들었던 채팅이 있긴한데...굉장히 급하게 만들었던지라 부족한 부분이 많아서 너무 아쉬웠었다. 특히나 그 당시에는 Websocket 을 사용하지 않고 오직 DB 와 Ajax 처리만 해서 채팅을 구현했었던지라 더욱 그랬다.
- 그래서 이번에야 SpringBoot 로 만들어보자라는 생각을 했고, 결국 제대로된? 실시간 채팅을 구현할 수 있었다.
- 다만 아직 부족한 부분들은 추후 계속 수정해나갈 예정이다.

- 코드 설명은 다음 포스팅부터 시작하겠습니다. 현재로서는 git 에 있는 코드와 주석 참고 부탁드립니다!

https://github.com/SeJonJ/Spring-WebSocket-Chatting

 

GitHub - SeJonJ/Spring-WebSocket-Chatting: SpringBoot WebSocket Chatting

SpringBoot WebSocket Chatting. Contribute to SeJonJ/Spring-WebSocket-Chatting development by creating an account on GitHub.

github.com

 

0. 프로젝트 데모 사이트

사이트 이용시 공시 사항

본 사이트는 오직 springboot 와 JavaScript 를 기본으로 하여 WebRTC 및 WebSocket 기술을 사용한 여러 기능을 공부하기 위한 사이트입니다.
따라서 해당 사이트를 이용함에 있어 발생할 수 있는 모든 법적 책임은 사이트를 이용하시는 본인에게 있음을 명시해주시기 바랍니다.



230917

- 제 개인 서버에 배포 완료했습니다!! 

- N:M 화상채팅도 가능하고, 오디오만을 사용한 화상채팅도 가능합니다! 물론 최대 4명까지!

- 개인 서버이기 때문에 자체 인증서를 사용했고 이로인해 사이트 첨 들어갈때 '여기는 이상한 사이트에요! 해킹 당할 수도 있어요!' 라고 뜰 수는 있지만 멀쩡한 사이트입니다. 그런 무서운 짓 못해요ㅋㅋ

- 다만 서버가 개인 서버인지라 상태가 많이 안좋을 수도 있고, 간혹 이상한 분들께서 뭐 먹을게 있다고 공격까지 해주시는 바람에 더더욱 상탱가 안좋아 질 수 있는 점 양해부탁드립니다.

- 개발부터 배포까지! 가 제 목표였던 만큼 계속 배포해서 이렇게 만들었어요...하고 자랑도하고 공유하도하고 싶으나 여러 문제가 생긴다면 그냥 내릴 예정입니다ㅠㅠ(살려주세요...)

 

https://hjproject.kro.kr:8653

 

https://hjproject.kro.kr:8653

 

hjproject.kro.kr:8653

 

 

1. 사용기술

- Java 8
- Spring Boot MVC
- Gradle
- AJAX
- jquery
- WebSocket & SocketJS
- Stomp
- 추후 DB 기술 추가 예정

2. 다이어그램

다이어그램

3. 프로젝트 목표

- SpringBoot MVC 에 익숙해지기
- WebSocket 을 활용한 실시간 채팅 구현
- Stomp 를 활용한 채팅 고도화 -> pub/sub 를 활용한 메시지 발신/수신
- SocketJS 를 활용한 JS 공부
- Spring Boot 활용 및 다양한 어노테이션 사용
- AJAX , jquery, css 공부 => CSS 가 가장 어렵다ㅠㅠ

4. 구현된 기능

- 채팅방 생성
- 채팅방 생성 시 중복검사
- 채팅방 닉네임 선택
=> 닉네임 중복 시 임의의 숫자를 더해서 중복 안되도록
- 채팅방 입장 & 퇴장 확인
- 실시간 채팅 기능
- 채팅방 유저 리스트 & 유저 숫자 확인

5. 추후 추가 기능(목표 기능)

- 채팅방 삭제
- 채팅방 파일 업로드
- 유저 클릭 시 1:1 채팅으로 전환
- 로그인 유저 채팅 && 소셜 로그인유저 채팅

6. 구동 화면

드디어 채팅 다운 채팅이ㅠㅠ

 

- Reference

https://daddyprogrammer.org/post/4077/spring-websocket-chatting/

 

Spring websocket chatting server(1) - basic websocket server

Spring에서 제공하는 Websocket을 이용하여 간단한 채팅 서버를 구현해 보도록 하겠습니다. 일반적인 http통신을 하는 서버들과 달리 채팅 서버는 socket통신을 하는 서버가 필요합니다. 통상적으로 htt

daddyprogrammer.org


https://dev-gorany.tistory.com/3

 

[Spring MVC] Web Socket(웹 소켓)과 Chatting(채팅)

 기존 공부 용도의 게시판(?)에 여러 기능을 추가하던 차, 관리자와 멤버 간 채팅 기능을 구현하고 싶었다. 채팅을 하려면 웹 소켓이 필요하다고 한다. 간단하게 구현하는 것은 어렵지 않으므로

dev-gorany.tistory.com

https://www.callicoder.com/spring-boot-websocket-chat-example/

 

Building a chat application with Spring Boot and WebSocket

In this tutorial, you'll learn how to use Spring Boot and STOMP over WebSocket with SockJS fall back to build a fully fledged group chat application from scratch.

www.callicoder.com

 

댓글