센드버드 채팅 API 사용하는 법 (with. Vue3, Spring Boot)

왜 센드버드 채팅 API를 선택했는가?

신용카드 등록 없이 간편하고 빠르게 키를 발급받을 뿐 아니라, LIVE DEMO와 UIkit 등 사용자 편의를 고려해 매우 빠르게 채팅 기능을 만들 수 있기 때문이었다. 이미 미국 1위 커뮤니티 사이트 레딧 등 많은 거대 기업들이 사용하는 만큼, 이미 '증명' 되었다고 볼 수 있다.

 

제한사항 :

1. 무료 계정에서 채팅창을 유저는 최대 20명까지 설정 가능하다.

2. 서비스 이용 가능은 30일로 제한된다. 

 

 

필수 설정 사항 : Veaury라는 라이브러리로 react를 vue 프로젝트에 적용할 수 있도록 적용하였다.

UIkit react를 사용하였다. 

 

https://sendbird.com/ko/blog/build-a-vue-chat-app UIkit react를 vue 프로젝트에 적용하기 위한 공식 문서이다. 필히 읽어봐야 한다. 

Vue 채팅 앱 빌드: Vue.js 애플리케이션에서 Sendbird의 UIKit 사용

 

 

 

---

 

프로젝트 적용

채팅 툴을 저장하지 않고 센드버드 서버를 이용하여 다양한 기능을 사용하는 것은 좋았다. 그런데 문제는 내가 가지고 있는 user(회원) 테이블 이용자들을 어떻게 등록할 것인가의 문제가 발생하였다. 

 

센드버드 채팅 서버는 user가 자체 서버에 등록되어 있지 않는 경우 자동으로 추가한다. 이 특성을 이용해서 세션 스토리지에 저장한 로그인 jwt토큰을 사용하면 좋을 것이라고 생각했다.

 

user스토어를 보면 로그인 성공 후 세션 스토리지에 저장

로그인에 성공하면 JWT토큰을 세션 스토리지에 저장하도록 되어있다.

 

JWT 토큰 Payload(내용)에 name을 넣는다.

 

 

이 부분은 JWT 토큰 구조에 대한 이해가 필요하다. 잘 정리된 글이 있어 가져와보았다.

https://blog.bizspring.co.kr/%ED%85%8C%ED%81%AC/jwt-json-web-token-%EA%B5%AC%EC%A1%B0-%EC%82%AC%EC%9A%A9/

JWT (Json Web Token)의 구조와 사용하기 – BizSpring BLOG

 

동적으로 가져오는 것은 성공! 그러나..

(No name) 밑에 보면 글자가 깨진 것을 볼 수 있다.

Mysql table 더미데이터 테스트용

 

찾아보니 getSession으로 토큰을 가져오고 atob로 디코딩 하면 UTF-8과 같은 다국적 인코딩을 고려하지 않기 때문에 발생한 문제였다. mysql table 삽입된 데이터를 보면 name테이블이 한글이다. 

 

센드버드 대시보드 Users를 보면 같은 name을 가진 이용자가 없을 경우 자동으로 등록하였다.

 

한글로 잘 인코딩 된다. 하지만 센드버드 자체에서 영어를 제외하고 지원하지 않을 수도 있으니 테스트를 진행했다.

 

Mysql에 name이 영어(johnson)으로 된 더미데이터를 넣고 테스트 해보았다.

 

센드버드 대시보드와 클라이언트에 보일 페이지에 모두 잘 반영된 것을 알 수 있다.

 

No name 바꾸기

닉네임 칼럼을 만들어 준다.

백엔드에서 JWT 페이로드에 nickname을 추가하고 프런트에서 받도록 해주었지만 리액트 UIkit을 잘 몰라서 실패했다. 

 

+ 유저 경험 측면에서 No name이라고 큼지막하게 뜨는건 좋지 않다고 판단, 다시 도전하였다.

로깅 남겨서 세션 스토리지에 저장했던 토큰에서 닉네임 추출이 되는지 확인하기

sdk의 updateuserinfo 메서드를 이용해 다시 정의해 주고, return 문에 없던 nickname을 정의해 직접 리턴해주었다.

 

닉네임 동적 할당 출력 성공

성공하였다!

아래는 사용한 더미데이터

로그인 한 유저의 네임과 닉네임이 잘 출력된 것을 볼 수 있다.

 

로컬에서 되는지 확인하기

ipconfig로 내 ip를 확인하고 같은 네트워크에 있으면 (같은 wifi 등) ip만으로도 접속할 수 있다.

예를 들어, 명령 프롬프트 창에서 ipconfig로 나오는 ip와 vue 서버 5173을 조합, 

http://{{내 로컬 ip주소}}:5173/ 를 치면 같은 네트워크 상의 컴퓨터는 내 로컬 서버에 배포하지 않아도 접속 할 수 있다.

 

해야하는 설정 : vue 3의 경우 vite.config.js에 이 내용을 추가해야한다.

  server: {

    host: "0.0.0.0", // 모든 네트워크 인터페이스에서 접근 가능하도록 설정

    port: 5173, // 서버 포트 번호 (기본 3000에서 변경 가능)

  },

 

기존의 http://localhost:8080을 아래 경로 변경해주고,

const REST_API_URL = `http://{{내 로컬 ip 주소}}:8080/api-user`;

 

마지막으로 백엔드 서버에서 CORS 설정만 해주면 로그인, 채팅이 가능해진다. 다른 CONTROLLER 기능의 경우도 이처럼 변경하면 된다. 

 

Webconfig파일에 이런 cors 설정을 추가해주면 된다. 그러나 위 방법은 보안상 권장하지 않는다.

 

동료의 컴퓨터로 확인해보니 작동이 된다!

 

여기서 내가 max, 동료의 컴퓨터가 lachel이다. 각각 db에 저장된 name을 받아서 적용이 잘 된것을 볼 수 있다.