10줄의 코드로 JavaScript로 채팅 애플리케이션 구축하기
Published: 2024-01-26 18:33:25

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

이 튜토리얼을 따라 10줄의 코드만으로 실시간 채팅 앱을 만드는 방법을 알아보세요.[펍넙 자바스크립트 SDK](https://www.pubnub.com/docs/sdks/javascript/).

**채팅 데모 사용해보기**
---------------

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

1.  저희의[대화형 10채팅 데모](https://www.pubnub.com/demos/10-line-chat/)은 이 미니 채팅 애플리케이션을 단계별로 안내합니다. 이 데모는 아래에서 대화형 워크스루를 통해 복사할 수 있는 코드와 동일합니다.
    
2.  복제 [깃허브 리포지토리](https://github.com/PubNubDevelopers/JavaScript-Simple-Chat) 를 복제하여 애플리케이션이 백그라운드에서 어떻게 작동하는지 확인하고 자신만의 기능을 구축하세요.
    

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

![Chat in 10 lines of JavaScript](/cdn/3prze68gbwl1/1BrNYTZ7F0JKsuywM46pTz/01b9c8c3eeaa484e37b7729f2e40edaa/10-chat-screenshot.png)

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

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

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

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

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

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

```js
// 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를 추가하여 채팅 애플리케이션을 완성할 수 있습니다. 다음을 확인하세요. [간단한 채팅 깃허브](https://github.com/PubNubDevelopers/JavaScript-Simple-Chat) 에서 자세한 정보와 전체 소스 코드를 확인하세요.

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

[PubNub는 다양한 SDK](https://www.pubnub.com/docs/sdks)를 제공하며, 여기에는 전용 [채팅 SDK](https://www.pubnub.com/docs/chat/chat-sdk/overview) 를 포함하여 다양한 SDK를 제공하며, 특히 채팅 사용 사례에 맞게 맞춤화되어 사용자가 원하는 것을 정확하게 수행할 수 있는 사용하기 쉬운 방법을 제공합니다.

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

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

-   [가상 이벤트](https://www.pubnub.com/solutions/sports-media/): 라이브 이벤트에서 스트리밍 채팅
    
-   [원격 의료](https://www.pubnub.com/solutions/digital-health/): 의사와 환자 간의 비공개 채팅
    
-   [게임](https://www.pubnub.com/solutions/gaming/): 온라인 게임 플레이어를 위한 실시간 채팅
    
-   [지원](https://www.pubnub.com/solutions/communications/): 상담원과 고객 간의 채팅
    
-   [마켓플레이스](https://www.pubnub.com/solutions/ecommerce/): 구매자와 판매자 간의 채팅
    
-   [협업](https://www.pubnub.com/solutions/multiuser-collaboration/): 직장에서의 팀 커뮤니케이션을 위한 채팅
    

고급 채팅 기능
--------

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

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

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

PubNub은 100밀리초 이내에 모든 디바이스에 메시지를 전달할 수 있는 15개 이상의 동기화된 글로벌 PoP를 유지합니다. PubNub에는 다음과 같은 기능이 있습니다.[기능](https://www.pubnub.com/products/functions/)및 [모바일 푸시 알림](https://www.pubnub.com/docs/chat/sdks/push-notifications)와 같은 기능을 제공합니다.

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

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

-   [방법 가이드](https://www.pubnub.com/how-to/?sortBy=Most%20recent&categories=Chat) 채팅 애플리케이션의 구체적인 사용 사례를 구현하는 방법을 확인하세요.
    
-   [개발하기](https://www.pubnub.com/tutorials/javascript-sdk-chat-app/) 펍넙 자바스크립트 SDK를 사용하여 인앱 채팅 애플리케이션을 개발하세요.
    
-   [학습하기](https://www.pubnub.com/tutorials/chat-sdk/) 유연한 채팅 애플리케이션을 구축하기 위해 PubNub의 채팅 SDK를 설정하고 사용하는 방법을 알아보세요.
    

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

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

이 문서는 원래 [PubNub.com에](https://www.pubnub.com/blog/realtime-live-chat-application-javascript-pubnub-10-lines-of-code/) 게시되었습니다.

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

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

PubNub 체험하기
-----------

[라이브 투어를](https://www.pubnub.com/tour/introduction/) 통해 5분 이내에 모든 PubNub 기반 앱의 필수 개념을 이해하세요.

설정하기
----

PubNub [계정에](https://admin.pubnub.com/signup/) 가입하여 PubNub 키에 무료로 즉시 액세스하세요.

시작하기
----

사용 사례나 [SDK에](https://www.pubnub.com/docs) 관계없이 [PubNub 문서를](https://www.pubnub.com/docs) 통해 바로 시작하고 실행할 수 있습니다.