PubNub Developer Relations펍넙 채팅 SDK 소개
타입스크립트 및 자바스크립트 애플리케이션에 사용할 수 있는 PubNub Chat SDK는 최소한의 개발로 앱에 강력하고 유연한 채팅 기능을 쉽게 추가할 수 있도록 설계된 일련의 API를 제공합니다. 인용, 사용자 멘션, 채널 참조, 스레드, 읽음 확인, 입력 표시기와 같은 채팅 옵션이 SDK에서 기본적으로 지원되므로 본격적인 앱을 빠르게 구축할 수 있습니다.
Chat SDK를 시작하려면 문서와 샘플 채팅 앱을 참조하세요. 튜토리얼에서는 Chat SDK의 기본 기능에 대해 안내하고 몇 가지 고급 기능을 다루며, 호스팅된 데모에서는 Chat SDK가 실제로 작동하는 모습을 보여드립니다.
이 튜토리얼은 펍넙 채팅 SDK의 보다 강력한 기능에 대해 자세히 살펴보는 시리즈 게시물의 일부입니다. 이 시리즈는 순서와 상관없이 읽을 수 있지만 관련 글 목록은 아래에 나와 있습니다:
- 채팅 SDK로 사용자 채널 멤버십을 관리하는 방법
- Chat SDK로 메시지에 리액션과 이모티콘을 추가하는 방법
- Chat SDK로 스레드를 만들고 메시지를 인용하는 방법
- Chat SDK로 사용자 및 채널을 멘션하는 방법
사용자 채널 멤버십 관리하기
Chat SDK는 채널 멤버십을 이해하는 데 중요한 몇 가지 유형을 정의합니다:
- 사용자는 대화에 참여하는 개인을 나타냅니다.
- 채널은 여러 사용자들 간의 대화를 나타냅니다. 이 문서에서는 각 채널이 하나의 '채팅방'을 나타낸다는 비유를 사용합니다. 채널은 직접 대화(즉, 단 두 명의 사용자 간의 1:1 대화), '그룹'(즉, 이름이 지정된 여러 사용자 간의 대화) 또는 '공개'일 수 있습니다.
- 멤버십은 선택적으로 동반되는 메타데이터와 함께 사용자와 채널 간의 관계를 나타냅니다.
이 가이드에서는 이러한 채널 멤버십을 만들고 관리하는 방법에 대해 설명합니다.
사용자가 채널에 가입하는 방법
사용자가 채널의 멤버가 될 수 있는 방법은 여러 가지가 있습니다. 쪽지 또는 그룹 채널을 만들 때, 해당 대화의 사용자가 채널 생성 시 인수로 지정됩니다.
아래 예에서는 문서에서 발췌한 것으로, 두 사용자 'agent-007'과 'agent-008'이 'group-chat-1' 채널의 멤버로 만들어져 있습니다.
// reference both agents you want to talk to
const user1 = await chat.getUser("agent-007")
const user2 = await chat.getUser("agent-008")
// add the channel ID, name, and topic
const { channel, hostMembership, inviteeMembership } = await chat.createGroupConversation(
{
users:
[
user1,
user2
],
channelId: "group-chat-1"
…
}
)
사용자가 채널의 멤버인지 여부는 여러 가지 방법으로 쿼리할 수 있으며, 자세한 내용은 채널 멤버십 관련 문서에서 확인할 수 있습니다. 예를 들어, 방금 만든 채널의 멤버를 조회하려면 다음과 같이 하세요:
// reference the "channel" object
const channel = await chat.getChannel("group-chat-1")
const members = await channel.getMembers()
// members contains both users, so members.total === 2
사용자가 채널 생성 시 채널에 배정되지 않은 경우 해당 join() 및 leave( ) 메서드를 사용하여 나중에 참여하거나 탈퇴할 수 있으므로 동적 채널을 가질 수 있습니다. 사용자를 채널의 멤버로 초대할 수도 있습니다.
아래의 짧은 데모에서 이 동작을 확인할 수 있습니다. 이 데모는 실제 작동하는 데모이므로 페이지를 새로 고친 후에도 채널 멤버십이 유지된다는 점에 유의하세요.
인터랙티브 데모
이 페이지에서 임베드된 콘텐츠를 볼 수 없는 경우 https://chat-sdk-how-to-membership.netlify.app/ 에서도 볼 수 있습니다.
이 데모를 구동하는 코드는 GitHub에서 사용할 수 있지만 핵심 사항은 다음과 같습니다:
앱에 Chat 객체의 인스턴스가 인스턴스화되어 있는지 확인합니다.
const chat = await Chat.init({
publishKey: "YOUR_PUBLISH_KEY",
subscribeKey: "YOUR_SUBSCRIBE_KEY",
userId: "YOUR_USER_ID",
})
Chat SDK에 전달할 수 있는 매개 변수는 매우 많지만 채널 멤버십의 경우 표준 게시 키, 가입 키 및 사용자 ID 외에는 아무것도 필요하지 않습니다. 이 모든 것이 처음이고 어디서부터 시작해야 할지 잘 모르겠다면 문서에서 초기 구성 섹션을 참조하세요.
채널에 가입합니다. 이 코드는 다음 섹션에서 설명하는 멤버십 업데이트를 받기 위해 등록하는 역할도 합니다.
async function join(channelName: string)
{
if (chat)
{
const channel = await chat.getChannel(channelName)
const channelMembership = await channel?.join(() => null)
channelMembership?.membership.streamUpdates(async (membership) => {
// Stream updates on the channel as follows
console.log(membership)
})
// For brevity, ignore that this call could contain multiple pages of memberships
const {memberships} = await chat.currentUser.getMemberships()
setMyMemberships(memberships)
}
}
위의 코드 주석에서 언급했듯이 채널 수가 너무 많으면 user.getMemberships() 호출에 페이지가 매겨진 데이터가 포함될 수 있습니다.
데모에서 '채널 나가기' 버튼을 구동하는 코드는 다음과 같습니다:
async function leave(channelName: string)
{
if (chat)
{
const channel = await chat.getChannel(channelName)
await channel?.leave();
// For brevity, ignore that this call could contain multiple pages of memberships
const {memberships} = await chat.currentUser.getMemberships()
setMyMemberships(memberships)
}
}
데모를 단순하게 유지하기 위해 사용자는 한 명뿐이며, 사용자 자신의 멤버십만 고려합니다. 실제 애플리케이션에서는 각각 고유한 채널 멤버십을 가진 여러 명의 사용자가 있을 것입니다. 보다 현실적인 데모는 Chat SDK에서 사용할 수 있으며 이 가이드의 맨 아래에서 설명합니다.
채널 멤버십 메타데이터
멤버십 개체를 사용하면 채널과 사용자 간의 연결과 관련된 사용자 지정 메타데이터를 지정할 수 있습니다. 예를 들어 지원 문의와 관련된 채팅인 경우 사용자의 역할을 {역할: '지원 기술자'}로 저장할 수 있습니다.
메타데이터는 멤버십을 만들 때 선언하거나 개별 사용자가 언제든지 업데이트할 수 있습니다.
멤버십 메타데이터가 업데이트되는 시점을 추적하기 위해 Chat SDK는 멤버십 개체에 대한 streamUpdates() 및 streamUpdatesOn( ) 메서드를 제공합니다.
이전 데모에 표시된 것처럼 다음과 같이 멤버십 메타데이터의 변경 사항을 추적할 수 있습니다:
channelMembership?.membership.streamUpdates(async (membership) => {
// Stream updates on the channel as follows
console.log(membership)
})
사용자가 채널에 가입해야 하는 이유는 무엇인가요?
한 가지 가정은 사용자가 채널에 가입해야 해당 채널에서 메시지를 받을 수 있다고 생각할 수 있지만, 그렇지 않습니다. 채널에서 메시지를 받으려면 connect() 메서드를 호출하면 되는데, 여기서 메시지를 받을 때마다 호출할 콜백을 지정할 수 있습니다. 채널이 생성될 때 멤버가 되지 않았다면 별도로 connect()를 호출해야 하지만 join( )을 호출하면 자동으로 connect()가 호출됩니다.
PubNub에 익숙하다면 이 connect() 호출이 subscribe() 및 addListener()와 유사하다는 것을 알 수 있습니다.
그렇다면 왜 채널에 가입해야 할까요? 채널 가입 및 관련 채널 멤버십은 Chat SDK가 사용자 관계를 이해하는 데 기본이 되므로 읽음 확인, 사용자 멘션, 읽지 않은 메시지 수, 중재 및 입력 표시기와 같은 더 많은 강력한 SDK 기능을 사용하려면 채널에 가입하는 것이 필요합니다.
멤버십 요약
- 멤버십이란 무엇인가요? 사용자 지정 가능한 메타데이터가 있는 사용자와 채널 간의 관계입니다.
- 멤버십은 어떻게 생성되나요? 사용자는 채널이 생성되는 동안 채널에 연결되거나, 채널이 생성된 후 스스로 가입하거나 다른 사용자를 채널에 초대할 수 있습니다.
- 멤버십은 어떻게 삭제되나요? 사용자는 언제든지 채널을 탈퇴할 수 있습니다.
- 멤버십은 어떻게 추적하나요? 게터 함수를 사용하여 채널의 멤버를 조회할 수 있으며, 업데이트 등록을 통해 변경사항에 대한 알림을 받을 수 있습니다.
- 일반적인 함정: 멤버십에 가입했다고 해서 항상 채널에서 메시지를 받을 수 있는 것은 아니므로, connect()를 별도로 호출해야 하는 경우 문서를 주의 깊게 읽어보세요.
- 다른 제한 사항은 없나요? '공개' 채널에 가입할 수는 있지만, 읽음 확인이나 입력 표시기와 같은 몇 가지 기능은 이 유형의 채널에서 지원되지 않습니다.
- PubNub 키세트에 필요한 기능은 무엇인가요? 키세트에서 앱 컨텍스트를 사용 설정해야 합니다.
데모: 사용자 채널 멤버십 작동
GitHub에서 전체 소스 코드가 포함된 호스팅 데모로 제공되는 모바일용 Chat SDK 데모는 멤버십을 사용하여 사용자 대화를 관리합니다. 이 섹션의 하단에서 iFrame으로 렌더링된 데모도 볼 수 있습니다.
데모에 사용된 멤버십을 확인하려면 다음 단계를 따르세요:
- 애플리케이션에 로그인하여 두 디바이스 각각에 대해 임의의 사용자 아이디를 선택합니다.
- '새 채팅' 아이콘을 클릭한 다음 '그룹 채팅 만들기'를 선택하여 그룹을 만듭니다.
- 방금 로그인한 두 개의 사용자 아이디를 선택하고 그룹에 이름을 지정합니다.
- 애플리케이션이 백그라운드에서 두 사용자를 새로 생성된 그룹에 연결하기 위해 멤버십을 생성합니다.
- '그룹' 섹션에서 생성된 엔티티를 클릭하여 그룹 대화에 들어갑니다.
- 화면 상단의 그룹 이름을 탭하여 사용자의 채팅 설정을 확인합니다(위 왼쪽 이미지 참조).
- 이 사용자의 이름이 채팅의 '회원'인 것을 확인할 수 있습니다.
- 대화에서 뒤로 물러나거나 앱에서 로그아웃했다가 다시 로그인해도 메시지 기록에서 반응이 유지되고 읽을 수 있습니다.
이 페이지에서 임베드된 콘텐츠를 볼 수 없는 경우 https://pubnubdevelopers.github.io/Chat-SDK-Demo/mobile/ 에서도 볼 수 있습니다.
펍넙이 어떤 도움을 줄 수 있나요?
이 문서는 원래 PubNub.com에 게시되었습니다.
저희 플랫폼은 개발자가 웹 앱, 모바일 앱, IoT 디바이스를 위한 실시간 인터랙티브를 구축, 제공, 관리할 수 있도록 지원합니다.
저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 8억 명의 월간 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한, 트래픽 급증으로 인한 지연 시간 문제를 걱정할 필요가 없습니다.
PubNub 체험하기
라이브 투어를 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.
설정하기
PubNub 계정에 가입하여 PubNub 키에 무료로 즉시 액세스하세요.
시작하기
사용 사례나 SDK에 관계없이 PubNub 문서를 통해 바로 시작하고 실행할 수 있습니다.
