들어가며 지난 시간에는 Artillery로 웹소켓 부하테스트를 시도했다. Artrillery에서 웹소켓을 지원하지만 STOMP를 지원하지 않았고 연결까지만 확인할 수 있었고 메시지를 보내는 것을 확인할 수 없었다. 따라서 이번 시간에는 Locust라는 다른 웹 부하테스트 툴로 시도해볼 것이다. Locust란? Locust는 Python 기반의 오픈소스 부하테스트 도구다. 웹 UI를 제공해서 쉽게 모니터링이 가능하고 이벤트 기반이라 단일 컴퓨터에서 많은 수의 동시 사용자를 지원할 수 있다. 무엇보다 파이썬으로 쉽게 테스트 코드를 작성할 수 있다는 장점이 있다. Locust 및 사용 라이브러리 설치 ![](https://images.velog.io/images/

들어가며 일단! Flutter 작업은 끝났다!(뚜둥?!?) 작업하면서 작성하던 블로그 글이 날라가서 지금 글은 후기에 가깝다. 따라서 중간에 몇몇 단계가 누락될 수 있다! ch.0 Flutter UI 만들기 이제 플러터로 UI를 만들어볼 것이다. 최상단에 title을 포함한 AppBar와 메세지 출력을 위한 List & ListView.builder, 메시지 입력을 위한 TextField와 ElevatedButton을 추가하였다. ch.1 stompdartclient으로 서버와 연결 이제 서버와 연결을 해야한다. 어떤 라이브러리를 사용할 지 결정해야해서 우선 pub.dev으로 가서 stomp를 검색해봤다. ![](https://images.vel

들어가며 지난 시간에는 React로 채팅 웹 UI를 만들었다. 이번 시간에는 Springboot 서버의 로직을 조금 손봐서 React와 소켓 연결을 해보도록 할 것이다. ch.0 기본 설계 우선 이 채팅 프로그램의 서버 역할은 메세지 중계가 전부다. 따라서 별도의 서비스 로직 없이 Client에서 메시지를 보내면 이를 구독하고 있는 다른 Client에게 메시지를 전달하기만 하면 된다! ch.1 Model 수정 따라서 우선 HelloMessage와 Greeting 모델을 지우고 Message 모델 하나만 구현한다. Message 모델에는 우선 content라는 속성 하나만 있도록 구현한다. 이때 getter와 setter는 Lombok을 사용해서 해결한다.

들어가며 지난 시간에는 Spring boot의 websocket 튜토리얼을 해봤다. 이번 시간에는 React를 통해서 기본적인 채팅앱 UI를 구현하고 튜토리얼로 만든 서버랑 websocket 연결 테스트를 해볼 것이다. ch.0 React Project 만들기 우선 기본적으로 나는 요즘 Nest js를 공부하고 있기 때문에 Node와 npm이 깔려있다. 다만 react는 yarn으로 설치하는 것이 더 좋기 때문에(개인 취향) yarn으로 project를 만들어보도록 하자 이제 여기서 필요없는 부분을 삭제하자. logo.svg index.js의 App-header, App.css의 내부 코드 App.test.js ![](https://images.velog.

들어가며 지난 시간에는 Jenkins + AWS + Github Webhook을 통한 자동화 배포 인프라를 구축했다. 오늘은 Spring 공식 홈페이지에 올라와있는 웹소켓 튜토리얼을 해볼 것이다.(React & Flutter는 다음 시간에) 웹 소켓이란 웹소켓은 HTML5 표준 기술로, 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성한다. Websocket API를 통해 서버로 메세지를 보내고, 요청 없이 응답을 받아오는 것이 가능하다. 웹소켓은 별도의 포트를 사용하지 않고 HTTP와 같은 80번 포트를 사용하고 있는데, 이 때문에 클라이언트인 웹 브라우저뿐만 아니라 웹 서버도 기능을 지원하고 있어야만 한다. 웹소켓은 초기 연결에 HTTP를 사용한다. 따라서 3-h

들어가며 플러터 공부를 하며 문득 '카카오톡은 웹에서 메시지를 보내면 앱에서 어떻게 인지하고 알람을 보내는 것일까?' 라는 생각이 들었다. 그래서 관련 자료를 리서치 해보니 FCM(Firebase cloud messaging)을 통해 푸시 알림을 준다는 것을 알았다. '바퀴는 개발하지 마라'라는 말처럼 이미 기존에 존재하는 기술을 쓰면 되지만 나는 FCM 없이 자체적으로 알람을 주고 싶다! 따라서 나는 Websocket을 사용해서 웹에서 메시지를 보내면 서버에서 앱에게 푸시 알림과 메시지를 보내는 방식을 구현해보고자 한다. Tech Stack |Front end|App|Back end| |:-:|:-:|:-:| ||![](https://images.velog.io/ima