230821 SendBird SDK v3 -> v4 마이그레이션하기

오늘의 할 일

비용 절감을 위해 센드버드 버전 업데이트를 진행하고자 했다.

센드버드는 나름대로 메이저한 솔루션이고, 상세한 가이드 문서가 있어서 솔직히 별로 안힘들 줄 알았다.

그래서 해야할 일은

센드버드 v3 → 센드버드 v4로 바꾸기

이다.

 

날 두렵게 한 가이드 문서의 글

• 모든 마이그레이션 작업이 완료되고 모든 오류가 수정될 때까지 센드버드 채팅 SDK v4는 앱이 컴파일되지 않을 수 있습니다. 모든 차단 오류를 수정한 후에는 경고를 제거하고 SDK를 앱과 다시 정렬하는 추가 작업이 필요할 수 있습니다. 이 작업에는 넉넉한 시간을 허용하는 것이 좋습니다.

 

...

 

 

 

 

하지만 회사에서 까라면 까야지.

일단 시작

이것이 메뉴얼인데, 살펴봐도 이해가 잘 안되는 것들이 있었다.

1. v3 → v4 마이그레이션은 npm으로 설치하는 과정이 없는가?
2. v3 → v4 마이그레이션 시 v3를 쓰는 다른 앱(동일한 채팅방을 사용하는 v3앱)은 문제가 없는가?

일단 내가 대략적으로 이해한다고 작업을 진행했다.

 

1. v4에서 쓰이는 sendBird/chat 설치하기

npm install @sendbird/chat

샌드버드에서 원래 사용하던 방법(v3)과 변경된 방법(v4)는 아래와 같은 부분이 다르다.

// initial 방법
import SendBird from 'sendbird'
var sb = new SendBird({ appId: APP_ID });
//

// sendMessage 방법
const params = new sb.UserMessageParams();
params.message = TEXT_MESSAGE;

groupChannel.sendUserMessage(params, function(userMessage, error) {
  if (error) {
    // Handle error.
  }
});
//

// 방 목록 가져오는 방법
this.groupChannelQuery = this.sb.groupChannel.createMyGroupChannelListQuery();
this.groupChannelQuery.limit = 50;
this.groupChannelQuery.includeEmpty = false;
this.groupChannelQuery.order = 'latest_last_message';
//

// sendUserMessage 하는 방법
const params = new sb.UserMessageParams();
params.message = 'A message';
groupChannel.sendUserMessage(params, function(userMessage, error) {});
//

// 이벤트 핸들러 등록, 사용하는 방법
var sb = new SendBird({appId: APP_ID});
var channelHandler = new sb.ChannelHandler();

channelHandler.onMessageReceived = function(channel, message) {};
//Identify the channel type then take action.
channelHandler.onChannelChanged = function(channel) {};
channelHandler.onChannelDeleted = function(channelUrl, channelType) {};
//Identify the channel type then take action.

sb.addChannelHandler(UNIQUE_HANDLER_ID, channelHandler);
//

// initial 방법
import SendbirdChat from '@sendbird/chat'
import { OpenChannelModule } from '@sendbird/chat/openChannel';

const params = {
  appId: APP_ID,
  modules: [
    new OpenChannelModule(),
  ],
};
const sb = SendbirdChat.init(params);

// sendMessage 하는 방법
(async () => {
  try {
    const channel = await sb.groupChannel.getChannel(CHANNEL_URL);
  } catch (error) {
    console.log(error);
  }
})();

sb.groupChannel.getChannel(CHANNEL_URL).then(channel => {
}).catch(error => {});

channel.sendUserMessage({ message: 'A message' })
  .onPending(message => {
    //A message hasn't sent yet.
  })
  .onSucceeded(message => {
    //A message has been sent.
  })
  .onFailed(message => {
    //A message wasn't sent.
  });
});

// 방 목록 가져오는 방법
this.groupChannelQuery = this.sb.groupChannel.createMyGroupChannelListQuery({
  limit: 50,
  includeEmpty: true,
  order: 'latest_last_message',
});

// sendUserMessage 하는 방법
channel.sendUserMessage({
  message: 'A message',
}).onSucceeded(message => {});

// 이벤트 핸들러 등록, 사용하는 방법
import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
import { OpenChannelHandler } from '@sendbird/chat/openChannel';

const groupChannelHandler = new GroupChannelHandler({
  onMessageReceived: (channel, message) => {},
  onChannelChanged: (channel) => {},
})
sb.groupChannel.addGroupChannelHandler(UNIQUE_HANDLER_ID, groupChannelHandler);

const openChannelHandler = new OpenChannelHandler({
  onMessageReceived: (channel, message) => {},
  onChannelChanged: (channel) => {},
});
sb.openChannel.addOpenChannelHandler(UNIQUE_HANDLER_ID, openChannelHandler);

요약하면,

SendBird 대신에 SendbirdChat를,
채널 객체는 비동기로 가져오도록(비동기로 가져오는 콜백 패턴이 달라짐),
채널 목록, sendMessage는 생성자가 호출되는 시점에 직접 세팅하도록,
이벤트 핸들러 등록은 ChannelHandler에서 GroupChannelHandler, OpenChannelHandler 각각 분리하도록,

해야 하는 것이다.

 

 

일단 여기까지 분석해보니 하루이틀만에 끝내기는 어려워보였다.

팀장님께 보고드렸더니 나중에 하고 지금은 딴거나 열심히 하라고 하셨다.

다행이면서 아쉽다.

 

배운것

공식문서랑 코드만 보고 뭘 해야할지, 뭐가 필요한지 분석하기

요건분석 후 대략적인 일정 계산하기

기타

오후에 남는 시간에는 열심히 EAP 레이아웃을 찍어냈다.