펍넙 채팅 SDK로 스레드 및 인용 메시지를 만드는 방법

PubNub Developer Relations - Dec 21 '23 - - Dev Community

펍넙 채팅 SDK 소개

타입스크립트 및 자바스크립트 애플리케이션에 사용할 수 있는 PubNub Chat SDK는 최소한의 개발로 앱에 강력하고 유연한 채팅 기능을 쉽게 추가할 수 있도록 설계된 일련의 API를 제공합니다. 인용, 사용자 멘션, 채널 참조, 스레드, 읽음 확인, 입력 표시기와 같은 채팅 옵션이 SDK에서 기본적으로 지원되므로 본격적인 앱을 빠르게 구축할 수 있습니다.

Chat SDK를 시작하려면 문서와 샘플 채팅 앱을 참조하세요. 튜토리얼에서는 Chat SDK의 기본 기능에 대해 안내하고 몇 가지 고급 기능을 다루며, 호스팅된 데모에서는 Chat SDK가 실제로 작동하는 모습을 보여드립니다.

이 튜토리얼은 펍넙 채팅 SDK의 보다 강력한 기능에 대해 자세히 살펴보는 시리즈 게시물의 일부입니다. 이 시리즈는 순서와 상관없이 읽을 수 있지만 관련 글 목록은 아래에 나와 있습니다:

스레드 만들기 및 메시지 인용하기

저희는 기존 SDK를 사용하는 채팅 개발자들로부터 받은 피드백을 해결하기 위해 PubNub Chat SDK를 도입했습니다. 어떤 PubNub SDK를 사용하든 사용자 간 실시간 메시지 교환은 간단하지만, 많은 개발자들이 사용자들이 기대하는 것과 동일한 채팅 기능, 즉 메시지를 스레드로 구성하거나 이전 메시지를 인용하거나 다른 사용자를 태그하는 등의 기능을 구현하고자 하는 니즈가 있음을 확인했습니다. 이러한 표준 채팅 기능을 앱에서 쉽게 구현할 수 있도록 표준 채팅 기능을 가져와 API를 공개했으며, 이 가이드에서는 처음 두 가지 예제인 메시지 스레드 만들기와 이전 메시지 인용을 구현하는 방법을 안내합니다.

전제 조건

앱에 Chat 객체의 인스턴스가 인스턴스화되어 있는지 확인합니다.

const chat = await Chat.init({
  publishKey: "YOUR_PUBLISH_KEY",
  subscribeKey: "YOUR_SUBSCRIBE_KEY",
  userId: "YOUR_USER_ID",
})
Enter fullscreen mode Exit fullscreen mode

Chat SDK에 전달할 수 있는 매개 변수는 매우 많지만 스레드와 따옴표의 경우 표준 게시 키, 가입 키 및 사용자 ID 외에는 아무것도 필요하지 않습니다. 이 모든 것이 처음이고 어디서부터 시작해야 할지 잘 모르겠다면 문서에서 초기 구성 섹션을 참조하세요.

메시지 스레드

메시지 스레드에 대한 문서는 메시지 문서 아래에 있으며 몇 가지 구현 세부 사항을 설명합니다. 기본적으로 각 메시지 스레드에는 통신을 처리하기 위해 자체 PubNub 채널이 필요하지만 Chat SDK를 사용하는 경우에는 해당 구현이 숨겨져 있습니다.

기존 루트 메시지가 있으면 createThread() API를 사용하여 해당 메시지에서 스레드를 만들 수 있습니다. 모든 메시지에 대해 하나의 스레드만 가질 수 있으므로 hasThread() API를 사용하여 새 스레드를 만들기 전에 이미 스레드가 있는지 확인하는 것이 가장 좋습니다.

if (!rootMessage.hasThread)
{
  threadChannel = await rootMessage.createThread()
}
Enter fullscreen mode Exit fullscreen mode

createThread()는 Channel과 유사한 메서드를 가진 ThreadChannel 객체를 반환합니다. 예를 들어, 스레드를 사용하여 대화의 전체 기록을 읽으려는 경우 의사 코드는 다음과 같이 보일 수 있습니다:

FOREACH message in Channel
  message.getHistory()
  IF (message.hasThread() THEN
    threadChannel = message.getThread()
    threadChannel.getHistory()
  END IF
END FOREACH
Enter fullscreen mode Exit fullscreen mode

표준 채널에서 메시지를 보낼 때와 같은 방법으로 sendText() API를 사용하여 스레드 채널에 문자 메시지를 보낼 수 있습니다.

const threadChannel = rootMessage.getThread()
threadChannel.sendText(“hello”)
Enter fullscreen mode Exit fullscreen mode

메시지 인용하기

메시지 인용은 수신자가 해석할 수 있는 전송되는 메시지에 대한 컨텍스트를 제공하는 Chat SDK 기능 중 하나의 예입니다. 앞의 예시처럼 sendText() 를 사용할 수 있다는 것은 매우 좋은 일이지만, 메시지에 파일을 포함시키고 싶다면 어떻게 해야 할까요? 메시지에 사용자나 채널을 태그하고 싶다면 어떻게 해야 할까요? 또는 이 가이드와 가장 관련성이 높은 경우, 현재 메시지 내에서 이전 메시지를 인용하고 싶다면 어떻게 해야 할까요? 이러한 모든 시나리오는 메시지 초안을 사용하여 처리할 수 있습니다.

MessageDraft는 Chat SDK의 기본 유형으로 대부분의 채팅 구현에서 사용자에게 풍부한 기능을 제공하는 데 사용됩니다. 새 채팅 메시지가 작성될 때마다 새 MessageDraft 개체를 만들어야 하며, 그런 다음 addQuote() API를 호출하여 이전 메시지를 참조할 수 있습니다.

사용자와 채널을 멘션하는 방법을 설명하는 가이드에서 MessageDraft에 대해 더 자세히 설명하지만, 요약하면 다음과 같습니다:

메시지 초안을 보관할 변수를 선언합니다.

 const [newMessageDraft, setNewMessageDraft] = useState<MessageDraft>()
Enter fullscreen mode Exit fullscreen mode

채팅 초기화의 일부로, 그리고 메시지가 전송된 후 새 MessageDraft를 초기화합니다.

setNewMessageDraft(threadChannel.createMessageDraft())
Enter fullscreen mode Exit fullscreen mode

입력 텍스트가 변경될 때마다(즉, 사용자가 무언가를 입력할 때마다) 메시지 초안을 알립니다.

//  Note: Within the onChange() handler for the input field 
const response = await newMessageDraft.onChange(event.currentTarget.value)
Enter fullscreen mode Exit fullscreen mode

사용자 행동에 대한 응답으로 이전 메시지를 따옴표로 추가합니다.

newMessageDraft.addQuote(message)
Enter fullscreen mode Exit fullscreen mode

필요할 때 메시지 보내기

newMessageDraft.send()
Enter fullscreen mode Exit fullscreen mode

작동하는 데모에서 보면 더 쉽게 이해할 수 있습니다...

모든 것 종합하기

아래의 짧은 데모에서 메시지 스레드와 메시지 인용에 대한 아주 간단한 예를 볼 수 있습니다:

이 데모는 실제 작동 중인 라이브 데모이므로 여러 탭에서 데모를 실행하여 실시간으로 수신되는 메시지를 자유롭게 확인하세요. 이 데모는 공유 애플리케이션이므로 '앱 상태 초기화'를 실행하면 백지 상태로 플레이할 수 있습니다.

인터랙티브 데모

이 페이지에서 임베드된 콘텐츠를 사용할 수 없는 경우 https://chat-sdk-how-to-threads-quotes.netlify.app/ 에서도 볼 수 있습니다.

이 데모를 구동하는 코드는 GitHub에서 사용할 수 있지만, 여기서는 앱의 관련 코드에서 일부 발췌하여 어떻게 결합되는지 보여드립니다:

//  Input field onChange handler
async function handleInput(event: React.FormEvent<HTMLInputElement>)
{
  //  No special rendering for Message Draft with this app
  if (!newMessageDraft) return
  const response = await newMessageDraft.onChange(event.currentTarget.value)
}
Enter fullscreen mode Exit fullscreen mode

메시지를 제출하는 로직. 이 데모는 항상 스레드 채널에 응답하도록 하드코딩되어 있습니다.

async function handleSend(event: React.SyntheticEvent) {
  newMessageDraft.send()
  setNewMessageDraft(threadChannel.createMessageDraft())
  setQuotedMessagePreview("")
  setText("")
}
Enter fullscreen mode Exit fullscreen mode

사용자가 '메시지 인용하기' 버튼을 누릅니다.

async function handleQuoteMessage(message: Message)
{
  if (!newMessageDraft) return;
  setQuotedMessagePreview(message.text)
  newMessageDraft.addQuote(message)
}
Enter fullscreen mode Exit fullscreen mode

다른 채널의 메시지를 인용할 수 없으므로 데모에서는 동일한 스레드의 메시지만 인용할 수 있습니다.

데모 보기: 모바일에서 React Native 데모로 스레드 생성 및 메시지 인용하기

GitHub에서 전체 소스 코드가 포함된 호스팅 데모로 제공되는 모바일용 Chat SDK 데모를 사용하여 이러한 기능을 사용해 볼 수 있습니다. 이 섹션의 하단에서 iFrame으로 렌더링된 데모도 볼 수 있습니다.

Two smartphones displaying message thread with user interactions in a chat application.

데모에서 스레드를 만들고 메시지를 인용하려면 다음 단계를 따르세요:

  1. 애플리케이션에 로그인하여 각 디바이스에 대해 임의의 사용자 ID를 선택합니다.
  2. 첫 번째 디바이스에 로그인한 사용자를 선택하여 두 번째 디바이스에서 대화를 시작합니다.
  3. 대화에 몇 가지 메시지 추가하기
  4. 메시지 중 하나를 길게 누릅니다.
  5. '스레드에서 답글'을 선택하고 답글을 보냅니다.
  6. 메시지 중 하나를 길게 누릅니다(방금 보낸 답글일 수도 있음).
  7. '메시지 인용하기'를 선택합니다.
  8. 이 인용된 텍스트가 포함된 메시지를 보냅니다.
  9. 대화에서 뒤로 물러나거나 앱에서 로그아웃했다가 다시 로그인해도 반응은 유지되며 메시지 기록에서 읽을 수 있습니다.

이 페이지에서 임베드된 콘텐츠를 볼 수 없는 경우 https://pubnubdevelopers.github.io/Chat-SDK-Demo/mobile/ 에서도 볼 수 있습니다.

펍넙이 어떤 도움을 줄 수 있나요?

이 문서는 원래 PubNub.com에 게시되었습니다.

저희 플랫폼은 개발자가 웹 앱, 모바일 앱, IoT 디바이스를 위한 실시간 인터랙티브를 구축, 제공, 관리할 수 있도록 지원합니다.

저희 플랫폼의 기반은 업계에서 가장 크고 확장성이 뛰어난 실시간 에지 메시징 네트워크입니다. 전 세계 15개 이상의 PoP가 8억 명의 월간 활성 사용자를 지원하고 99.999%의 안정성을 제공하므로 중단, 동시 접속자 수 제한, 트래픽 급증으로 인한 지연 시간 문제를 걱정할 필요가 없습니다.

PubNub 체험하기

라이브 투어를 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.

설정하기

PubNub 계정에 가입하여 PubNub 키에 무료로 즉시 액세스하세요.

시작하기

사용 사례나 SDK에 관계없이 PubNub 문서를 통해 바로 시작하고 실행할 수 있습니다.

Image
The Importance of Carpet Cleaning in High-Traffic Areas
Image
Transform Your Home with Professional Carpet Cleaning Services
Image
Convert YouTube Video to Podcast with Python

python, productivity, showdev
Image
Path To Continuous Test Automation Using CI/CD Pipeline

stageofcicdpipeline, automationtesting, crossbrowsertesting, testautomation
Image
Unleashing the Beast: Why Your Brand Needs a Killer Logo

logodesign, graphicdesign, brandidentity, marketingtips
Image
Leveraging PostGIS to Write And Read FlatGeobuf Files

python, sql, geospatial, flatgeobuf
Image
Flights from UK to Philippines: A Comprehensive Guide to Booking Your Trip

travel, flight, airlines, agent
Image
How to Set Up Routes in an Express App: A Step-by-Step Guide

routes, express, node, javascript
Image
Unlocking the Potential of AI with ChatGPT Certification

chatgpt, chatgptcertification, ai, chatgptcourse
Image
Stacks STX: Revolutionizing Blockchain with Bitcoin
Image
Unit Tests for Frontend Developers [Part 2]

unittest, vitest, testinglibrary, mocking
Image
Understanding Selenium Python Bindings for effective Test Automation

automatetestcases, seleniumandpython, automationprocess, paralleltestexecutions
Image
An Ultimate Guide to Open Source Contribution for Beginners

opensource, beginners, contribution, webdev
Image
Become a debugging wizard with RAY

tutorial, development, beginners, php
Image
animation-timeline: WIN!

css, cssart, animationtimeline, codepen
Image
What Learning Web Development Taught Me

webdev, beginners, css, html
Image
How Hard Is Software Development?

softwaredevelopment, beginners, learning
Image
What is machine learning

ai, gpt3, machinelearning, tutorial
Image
Authenticated SQL Injection
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .