펍넙 채팅은 모든 애플리케이션에서 데이터를 주고받을 수 있는 강력한 실시간 네트워크와 API를 제공합니다. 엔터프라이즈급 보안, 확장성, 안정성을 갖춘 채팅을 빠르게 구축하려면 저희 서비스를 활용하세요. PubNub은 인프라를 설정하고 관리하는 데 소요되는 시간을 줄여주므로 고객을 위한 비즈니스 문제 해결에 집중할 수 있습니다.

이 튜토리얼을 따라 10줄의 코드만으로 실시간 채팅 앱을 만드는 방법을 알아보세요.펍넙 자바스크립트 SDK.

채팅 데모 사용해보기

이 데모를 사용해 볼 수 있는 방법은 두 가지가 있습니다:

저희의대화형 10채팅 데모은 이 미니 채팅 애플리케이션을 단계별로 안내합니다. 이 데모는 아래에서 대화형 워크스루를 통해 복사할 수 있는 코드와 동일합니다.
복제 깃허브 리포지토리 를 복제하여 애플리케이션이 백그라운드에서 어떻게 작동하는지 확인하고 자신만의 기능을 구축하세요.

두 개의 탭에서 데모를 열어 창 사이를 오가며 채팅하세요!

나만의 실시간 채팅 앱을 구축하는 방법

실시간 채팅 앱을 시작하려면 PubNub 플랫폼에 연결하는 데 필요한 API 키, 즉 게시 및 구독 키를 받아야 합니다. 다음 단계에 따라 나만의 무료 API 키 세트를 얻을 수 있습니다:

다음에 로그인합니다.관리자 포털.
왼쪽의 앱 탭을 클릭합니다.
"새 앱 만들기" 버튼을 클릭하여 새 애플리케이션을 만듭니다. 애플리케이션의 이름을 지정하고 "만들기" 버튼을 클릭합니다.
새로 만든 앱을 클릭합니다. 이 애플리케이션의 키세트 페이지로 이동합니다. 애플리케이션을 만들 때마다 새 키 세트가 자동으로 생성되지만, 특정 기능을 활성화하려면 새 키 세트를 만들어야 합니다.
포털의 오른쪽 상단에 있는 '새 키세트 만들기' 버튼을 클릭합니다.
팝업이 나타납니다. 키 집합에 이름을 지정하고 "만들기" 버튼을 클릭합니다.
새로 만든 키 집합을 클릭합니다.
각 키 필드 옆의 복사 아이콘을 클릭하여 게시 및 구독 키를 복사합니다.

API 키를 얻었으면 index.html 파일을 만들어 저장합니다. index.html에서 콘텐츠 전송 네트워크를 사용하여 PubNub SDK를 프로젝트에 통합합니다.

https://cdn.pubnub.com/sdk/javascript/pubnub.7.5.0.js
https://cdn.pubnub.com/sdk/javascript/pubnub.7.5.0.min.js

그런 다음 애플리케이션의 파일에 다음 코드를 추가하여 PubNub을 구성합니다.

// Open 2 tabs to chat between windows

// Get your PubNub keys from admin.pubnub.com
var pubnub = new PubNub(
  {publishKey: 'PUBNUB_PUBLISH_KEY', subscribeKey: 'PUBNUB_SUBSCRIBE_KEY', 
   userId: 'user1'});
var channel = '10chat';

// Add a listener to a channel and subscribe to it
pubnub.addListener({
  message: function (m) {
    box.innerHTML += newRow(m.message, 
     m.publisher);
  }
});
pubnub.subscribe({channels: [channel]}); 
// Publish new message when enter is pressed. 
input.addEventListener('keypress', function (e) {
  (e.keyCode || e.charCode) === 13 && 
   pubnub.publish({ 
    channel: channel, message: input.value, 
     x: (input.value = '')
  });
});

이때 PUBNUB_PUBLISH_KEY와 PUBNUB_SUBSCRIBE_KEY를 PubNub 관리자 포털에서 얻은 각각의 게시 및 구독 키로 바꿔야 합니다.

메시지 입력 필드, 채팅 버튼 전송, 그리고 이러한 요소의 스타일을 지정하는 사용자 정의 CSS를 추가하여 채팅 애플리케이션을 완성할 수 있습니다. 다음을 확인하세요. 간단한 채팅 깃허브 에서 자세한 정보와 전체 소스 코드를 확인하세요.

채팅을 구축하는 데 도움이 되는 도구는 무엇인가요?

PubNub는 다양한 SDK를 제공하며, 여기에는 전용 채팅 SDK 를 포함하여 다양한 SDK를 제공하며, 특히 채팅 사용 사례에 맞게 맞춤화되어 사용자가 원하는 것을 정확하게 수행할 수 있는 사용하기 쉬운 방법을 제공합니다.

이러한 SDK를 사용하면 애플리케이션에 채팅을 간편하게 추가할 수 있습니다. 애플리케이션의 서버 쪽은 PubNub이 처리하는 동안 여러분은 최고의 클라이언트 쪽 사용자 경험을 만드는 데 집중할 수 있습니다.

1:1 비공개 채팅방, 그룹 채팅, 심지어 대규모 이벤트를 위한 메가 채팅까지 만들어 보세요. 다음은 몇 가지 예시입니다:

가상 이벤트: 라이브 이벤트에서 스트리밍 채팅
원격 의료: 의사와 환자 간의 비공개 채팅
게임: 온라인 게임 플레이어를 위한 실시간 채팅
지원: 상담원과 고객 간의 채팅
마켓플레이스: 구매자와 판매자 간의 채팅
협업: 직장에서의 팀 커뮤니케이션을 위한 채팅

고급 채팅 기능

메시지를 주고받을 때 PubNub Chat을 사용하여 다음과 같은 기능을 채팅에 추가할 수 있습니다:

입력 표시기: 사용자가 채널에서 메시지를 입력하고 있는지 표시합니다.
읽음 표시: 사용자가 채널에서 메시지의 전달을 추적할 수 있도록 합니다.
파일 보내기 및 받기: 애플리케이션에서 다른 사용자와 파일을 업로드하고 공유할 수 있습니다.
메시지 지속성: 네트워크를 통해 전송되는 메시지를 저장하고 검색합니다.
온라인/오프라인 현재 상태 표시기: 사용자와 디바이스의 온라인 및 오프라인 상태를 실시간으로 추적하고 사용자 지정 상태 정보를 저장합니다.
읽지 않은 메시지 수: 특정 타임스탬프 이후에 게시된 채널의 메시지 개수를 확인합니다.

PubNub로 또 무엇을 할 수 있나요?

PubNub은 100밀리초 이내에 모든 디바이스에 메시지를 전달할 수 있는 15개 이상의 동기화된 글로벌 PoP를 유지합니다. PubNub에는 다음과 같은 기능이 있습니다.기능및 모바일 푸시 알림와 같은 기능을 제공합니다.

개발자는 PubNub SDK를 사용하여 채팅 메시지나 기타 데이터를 실시간으로 전송하는 메커니즘을 학습, 생성, 관리하는 데 많은 시간을 할애하지 않고도 채팅 및 기타 실시간 기능을 빠르게 구축할 수 있습니다. 모든 확장 및 인프라가 자동으로 처리됩니다. PubNub을 사용하면 인프라에 대한 걱정 없이 게임의 프런트엔드에만 집중할 수 있습니다.

지금 바로 시작하는 데 도움이 되는 몇 가지 채팅 리소스를 확인해 보세요:

방법 가이드 채팅 애플리케이션의 구체적인 사용 사례를 구현하는 방법을 확인하세요.
개발하기 펍넙 자바스크립트 SDK를 사용하여 인앱 채팅 애플리케이션을 개발하세요.
학습하기 유연한 채팅 애플리케이션을 구축하기 위해 PubNub의 채팅 SDK를 설정하고 사용하는 방법을 알아보세요.

질문이나 우려 사항이 있으신가요? 언제든지 저희 팀( devrel@pubnub.com)에 문의해 주세요.

펍넙이 어떤 도움을 드릴 수 있을까요?

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

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

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

PubNub 체험하기

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

설정하기

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

시작하기

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

10줄의 코드로 JavaScript로 채팅 애플리케이션 구축하기