토이 프로젝트42 Spring Boot Web Chatting : 스프링 부트로 실시간 채팅 만들기 (7) WebRTC 를 이용한 실시간 화면 공유 이전 글에 이어서 WebRTC 를 사용해서 실시간 화면 공유를 구현해보았습니다. 저번 글에 '화면 공유 기능 목표!!' 라고 이야기했던게 사실 오래 걸릴 줄 알았는데 의외로 금방? 끝났습니다ㅋㅋ 라고 이전에 글을 썼었는데...생각해보니 공유 되는 나의 화면을 나만 볼 수 있었고, 내 화면을 다른 사람이 보는 내가 생각했던 진짜 '화면 공유' 기능이 아니었다는 걸 깨달았습니다. 결국 빠르게 글을 잠금표시로 전환해두고 코드를 뜯어고치기 시작했습니다. 솔직히 금방 끝나서 다행이다! 했는데 결국 이렇게 또 한주가 가버렸네요ㅠ.ㅠ JS 부분만 고치면 되는거여서 Java 부분의 코드 수정은 전혀 없었습니다 코드는 언제나 처럼 git 참고!! https://github.com/SeJonJ/Spring-WebSocke.. 토이 프로젝트/Spring&Java 갖고놀기 2022. 10. 31. Spring Boot Web Chatting : 스프링 부트로 실시간 채팅 만들기 (6) WebRTC 를 이용한 실시간 화상 채팅 구현하기(feat. https 인증서 적용) 1. 실시간 화상 채팅 구현하기! 사실 실시간 화상 채팅이고 뭐고 순서상 JPA 를 사용한 회원가입을 구현하는게 먼저였지만...갑자기 화상 채팅에 꽂혀버려서 구현해봤습니다ㅋㅋㅋㅋ 솔직히 이번에는 다른 것보다 어렵겠구나 라는 생각을 했었습니다. 왜냐하면 아주 단순하게 생각해도 화상 채팅을 구현하기 위해서는 클라이언트끼리의 화면 연결, 음성 연결 등등등 정말 생각하고 고려할게 많았기 때문입니다. 그래도 만들려보고 키보드를 두들겼던 가장 큰 이유는 이전 채팅처럼 쉬운 예제가 많이 있다고 생각했었기 때문입니다. 그러나 의외로 참고할 자료가 많이 없었고, 이 부분이 굉장히 큰 에러였던 것 같습니다ㅠㅠ 처음에 예제를 찾아봤을 때 대부분이 스프링 대신 node.js 로 구현한 경우가 많았습니다. 솔직히 중간부터는 나.. 토이 프로젝트/Spring&Java 갖고놀기 2022. 10. 29. Spring Boot Web Chatting : 스프링 부트로 실시간 채팅 만들기 (5) OAuth2 를 활용한 소셜 로그인 10.29 추가 : 일반(문자) 채팅만 구현하는 코드는 git 의 master 브렌치를 참고해주시기 바랍니다. master-Webrtc-jpa 는 화상 채팅과 jpa 를 이용한 DB 연결을 포함하는 브렌치입니다. 소셜 로그인 후 실시간 채팅만들기 이제 저번 시간까지해서 실시간 채팅을 하기 위한 기본 요소들은 모두 만들었습니다. 이제는 조금 더 업그래이드 하기 위해서! 로그인 기능을 덧붙여볼까 합니다. 근데 언제나 하던 일반 로그인은 시시하고, 조금 색다르게 소셜 로그인 기능을 먼저 추가해볼까 합니다. 정확히는 소셜 로그인 시 아이디(닉네임)을 채팅명으로 만든 후 해당 닉네임으로 채팅을 할 수 있도록 기능을 추가하겠습니다. 단 이번에는 DB 에 회원 정보를 저장하지 않고 소셜 로그인을 하는 것 까지만! 하.. 토이 프로젝트/Spring&Java 갖고놀기 2022. 9. 21. Spring Boot Web Chatting : 스프링 부트로 실시간 채팅 만들기 (4) 채팅방 비밀번호 설정, 인원수 제한, 삭제(feat. 업로드된 S3 파일 삭제) 10.29 추가 : 일반(문자) 채팅만 구현하는 코드는 git 의 master 브렌치를 참고해주시기 바랍니다. master-Webrtc-jpa 는 화상 채팅과 jpa 를 이용한 DB 연결을 포함하는 브렌치입니다. 시작하면서 - 지난번에 S3 파일 업로드 & 다운로드까지 완료하고 나니까 좀 더 여러가지 기능을 넣어보고 싶어서 채팅방에 관한 설정을 추가해보았다. - 구체적으로는 채팅방 생성 시 비밀번호 설정, 채팅방 인원수 제한과 채팅방 삭제 기능이다. 특히 삭제 기능의 경우 채팅방이 삭제되면 해당 채팅방에 올라온 파일도 필요가 없어짐으로 S3 에서 해당 채팅방에 관련된 모든 파일을 삭제하는 방식으로 코드를 작성하였다. - 이왕 이렇게 된거 최종적인 완성본은 카카오 오픈 채팅방의 그것처럼 만들어보려고 한다... 토이 프로젝트/Spring&Java 갖고놀기 2022. 9. 13. Spring Boot Web Chatting : 스프링 부트로 실시간 채팅 만들기 (3) S3 기반 채팅 파일 업로드 & 다운로드 10.29 추가 : 일반(문자) 채팅만 구현하는 코드는 git 의 master 브렌치를 참고해주시기 바랍니다. master-Webrtc-jpa 는 화상 채팅과 jpa 를 이용한 DB 연결을 포함하는 브렌치입니다. - 최근 스터디에서 파일 업로드와 관련된 프로젝트를 하자고 이야기가 나왔고, 이에 만들어두었던 채팅에 이어서 만들어보고 싶어서 부랴부랴 AWS S3 와 연동해서 S3 기반 파일 업로드를 구현하였다. - 원래는 S3의 bucket 만들기부터 시작해서 ACL 설정 등등 만져줄게 많은데 이것들은 담에 설명하기로 하고, 이번에는 코드만 정리하고 넘어가려고 한다. => 혹시나 필요하신 분들을 위해서 이 부분은 아래에 참고 사이트를 넣어두었으니 확인 부탁드립니다! - 아래의 추가된 모든 내용은 해당 git.. 토이 프로젝트/Spring&Java 갖고놀기 2022. 9. 7. Spring Boot Web Chatting : 스프링 부트로 실시간 채팅 만들기(2) chatDTO, DAO, Socket.js 코드 알아보기 10.29 추가 : 일반(문자) 채팅만 구현하는 코드는 git 의 master 브렌치를 참고해주시기 바랍니다. master-Webrtc-jpa 는 화상 채팅과 jpa 를 이용한 DB 연결을 포함하는 브렌치입니다. 1. 기본 개념 설명 STOMP - STOMP 는 Simple Text Oriented Messaging Protocol 의 약자로 메시지 전송을 위한 프로토콜이다. 기본적인 Websocket 과 가장 크게 다른 점은 기존의 Websocket 만을 사용한 통신은 발신자와 수신자를 Spring 단에서 직접 관리를 해야만 했다. 즉 WebSocketHandler 를 만들어서 WebSocket 통신을 하는 사용자들을 Map 등으로 저장하고 이를 직접 관리하며 클라이언트에서 들어오는 메시지를 다른 사용.. 토이 프로젝트/Spring&Java 갖고놀기 2022. 9. 1. Spring Boot Web Chatting : 스프링 부트로 실시간 채팅 만들기(1) stomp, socketjs, websocket 각 브렌치 및 포스팅 별 내용- 일반 채팅 : master => 2 ~더보기2022.09.01 - [토이 프로젝트/Spring&Java 갖고놀기] - Spring Boot Web Chatting : 스프링 부트로 실시간 채팅 만들기(2) chatDTO, DAO, Socket.js 코드 알아보기 - 시그널링 서버를 구현한 화상채팅 & 화면 공유(P2P) : master-webrtc-jpa => 6~7 번 포스팅더보기2022.10.29 - [토이 프로젝트/Spring&Java 갖고놀기] - Spring Boot Web Chatting : 스프링 부트로 실시간 채팅 만들기 (6) WebRTC 를 이용한 실시간 화상 채팅 구현하기(feat. https 인증서 적용) - Kurento 미디어 서버를 활용한 화상채.. 토이 프로젝트/Spring&Java 갖고놀기 2022. 8. 29. Spring Web Chatting : 스프링 채팅 만들기 웹소켓 맛보기 시작하면서 오랜만에 돌아온 자바 갖고놀기 프로젝트!! 이번에는 예전부터 정말정말정말 해보고 싶었던 spring 과 웹소켓을 이용한 채팅 프로그램 구현을 해보려고 합니다. 오늘 뼈대 만들기를 시작해서 stomp 를 사용한 채팅 구현, 파일 업로드, DB 와 연결 등등 여러가지를 더해서 만들겠습니다! 추가로 아래 코드 및 설명에서 등장하는 새로 공부하게된 어노테이션과 개념들은 따로 정리하도록 하겠습니다 그럼 시작하겠습니다 필수 라이브러리 임포트 - gradle 에 websocket 임포트 // WebSocket implementation 'org.springframework.boot:spring-boot-starter-websocket' websocket Handler 작성 웹 소켓 클라이언트로부터 채팅 메.. 토이 프로젝트/Spring&Java 갖고놀기 2022. 8. 24. DataPlay Project - 2 : 이미지 텍스트 번역기 (2) 코드 정리 DataPlay - 데이터 갖고 놀기 2탄 : 이미지 번역기 코드 정리 이번 글에는 해당 프로젝트의 코드를 정리해보겠습니다 1. 파파고 API - 파파고 API 는 네이버의 파파고 라는 번역기를 사용할 수 있도록 하는 API 이다. - 당연히 파파고 api 를 사용하기 위한 시크릿키와 아이디값이 있는데 해당 값들은 APIdata 라는 인터페이스 안에 따로 선언해두었다. - 파파고 API 를 사용해서 view 에서 들어오는 데이터를 번역 할 수 있도록 한다. - 네이버 개발자 API 센터에 어떻게 사용하는지 아주 자세하게!! 정말 자세하게 적혀있다. 아래 있는 코드는 해당 코드를 내가 필요한것에 맞게 변형시켜서 만든 코드이다. - 내가 추가한 코드는 주로 번역될 언어를 선택하는 getSource 메소드, .. 토이 프로젝트/Spring&Java 갖고놀기 2022. 6. 11. DataPlay Project - 2 : 이미지 텍스트 번역기 (1) 파파고 API & Tesseract OCR DataPlay - 데이터 갖고 놀기 2탄 : 이미지 번역기 이번 프로젝트는 DataPlay 2탄으로 Tesseract OCR 을 이용한 이미지 번역기 사이트를 만들어 보았다. 사실 이미지를 번역해주는 기능은 핸드폰의 파파고 번역기나 구글 번역기를 이용해서 보다 쉽게 가능한 편이다. 다만 핸드폰의 이러한 기능을 사용하기 힘든 사람들에게는 결코 '쉬운' 편은 아니다. 사실 이 프로젝트 - 이미지 번역기 - 프로젝트를 시작한 계기는 이러한 기능을 사용하기 어려워하던 한 시각장애인 친구와의 대화에서 시작되었다. 한창 사회복지를 공부하고 있던 때 만났던 그 친구는 나에게 이렇게 이야기했다. "너무나 좋고 다양하고 재미있는 것들은 많은데 그것들을 사용하는게 힘들어. 지금도 단순하게 핸드폰 카메라로 사진을 찍고, .. 토이 프로젝트/Spring&Java 갖고놀기 2022. 6. 1. DataPlay project - 1 : word cloud 생성기 코드 정리 이번 포스팅은 word cloud 를 만들기 위한 전체적인 코드와 찾아봤던 정보들을 정리하기 위한 글을 작성하도록 하겠다. 모든 코드는 git 에 올려두었고, 여기에는 크롤링 -> 데이터 파싱 -> Controller -> html 순으로 정리하도록 하겠다. 1. 크롤링 crewler - 크롤링을 위한 코드는 네이버 블로그 검색 API 와 아래 블로그의 Steele 님의 코드를 약간 수정해서 사용하였다 (주소는 아래 참조에 달아두었습니다) - 나름대로 로직을 이해하기 위해 주석을 달아서 정리하였으나, 보다 자세한 설명은 Steele 님의 글을 보는게 훨~~씬 도움이 되리라 생각한다. package HJproject.DataMining; import org.json.simple.JSONArray; impo.. 토이 프로젝트/Spring&Java 갖고놀기 2022. 5. 10. DataPlay project - 1 : java로 Word Cloud 생성기- 크롤링, API, JSON DataPlay - 데이터 갖고 놀기 - project 얼마전 친구가 나에게 "너 word cloud 워드 클라우드 만들 수 있어?" 하고 물어왔다. 당연히 나는 모른다고 말했지만 친구는 그래도 나름 코딩 공부 비스무리한 것을 했으니 한번 만들어 줄 수 있겠냐고 이야기를 던졌다. 사실 처음에는 거절하려고 했다. 내가 현재 하던 프로젝트도 있고, 공부할것도 많아서 "나 할 줄 몰라" 하면서 넘어가려했다. 다만 거절하기 전에 어떤 로직이 필요한지, 기술이 필요한지 정도는 알아보고 싶었다. 그렇게 여러 내용들을 찾아보다가 java 로도 데이터를 크롤링해올 수 있으며, 나머지를 파싱하고 프론트로 데이터를 보내는 것 뿐이니 의외로 쉽지 않을까...? 라는 바보같은 생각이 들었다. 무엇보다 단순히 웹에서 보여주기 .. 토이 프로젝트/Spring&Java 갖고놀기 2022. 5. 4. 이전 1 2 3 4 다음