PubNubチャットは、あらゆるアプリケーションでデータを送受信するための堅牢なリアルタイムネットワークとAPIを提供します。エンタープライズグレードのセキュリティ、スケーラビリティ、信頼性を備えたチャットを迅速に構築するために、弊社のサービスをご活用ください。PubNubを利用することで、インフラストラクチャのセットアップや管理にかかる時間が不要になり、顧客のビジネス課題の解決に集中できます。

このチュートリアルに従って、次のものを使用してわずか10行のコードでライブチャットアプリを作成する方法を学びます。PubNub JavaScript SDK.

チャットデモを試す

このデモを試すには2つの方法があります：

私たちのインタラクティブ10チャットデモは、このミニチャットアプリケーションをステップ・バイ・ステップで説明します。このデモは、インタラクティブなチュートリアルと同じコードです。
クローン GitHub リポジトリをクローンして、アプリケーションが舞台裏でどのように動いているのかを見て、あなた自身の機能を構築してください。

デモを2つのタブで開くと、ウィンドウ間でチャットができます！

リアルタイムチャットアプリの作り方

リアルタイムチャットアプリを始めるには、PubNubプラットフォームへの接続に必要なAPIキー（publishキーとsubscribeキー）を取得する必要があります。以下の手順で無料のAPIキーを入手できます：

管理者ポータルにログインします。管理者ポータル.
左側のアプリタブをクリックします。
新しいアプリケーションを作成するには、"Create New App "ボタンをクリックします。アプリケーションに名前を付け、「作成」ボタンをクリックします。
新しく作成したアプリをクリックしてください。キーセットのページが表示されます。作成された各アプリケーションは自動的に新しいキーセットを生成しますが、特定の機能を有効にするために新しいキーセットを作成することになります。
ポータルの右上にある "Create New Keyset "ボタンをクリックします。
ポップアップが表示されます。キーセットに名前を付け、「Create」ボタンをクリックする。
新しく作成されたキーセットをクリックする。
各キーフィールドの横にあるコピーアイコンをクリックして、PublishキーとSubscribeキーをコピーします。

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を追加して、チャットアプリケーションを完成させることができます。以下のシンプルチャットGitHubをチェックしてください。

チャットの構築に役立つツールは？

PubNubは多くのSDKを提供しています。を提供しています。チャットSDKを含む多くのSDKを提供しています。チャットのユースケースに特化した使いやすいメソッドを提供することで、あなたが望むことを正確に行うことができます。

これらのSDKにより、アプリケーションにチャットを簡単に追加できます。PubNubがアプリケーションのサーバーサイドを処理する間、あなたは最高のクライアントサイドのユーザーエクスペリエンスを作成することに集中することができます。

1:1のプライベートチャットルーム、グループチャット、大規模イベント用のメガチャットも作成できます。以下はその例です：

バーチャルイベント:ライブイベントでのストリーミングチャット
遠隔医療:医師と患者のプライベートチャット
ゲーム:オンラインゲームプレイヤーのためのライブチャット
サポート:エージェントと顧客間のチャット
マーケットプレイス:バイヤーとセラー間のチャット
コラボレーション:職場でのチームコミュニケーションのためのチャット

高度なチャット機能

メッセージの送受信ができるようになったら、PubNubチャットを使って次のような機能をチャットに組み込むことができます：

タイピングインジケータ:ユーザーがチャンネル内でメッセージを入力しているかどうかを表示します。
レシートを読む:ユーザーがチャネル内のメッセージの配信を追跡できるようにします。
ファイルの送受信:アプリケーション内で他のユーザーとファイルをアップロードして共有することができます。
メッセージの永続性:ネットワーク経由で送信されたメッセージの保存と取得。
オンライン/オフラインプレゼンス表示:ユーザーとデバイスのオンラインとオフラインの状態をリアルタイムで追跡し、カスタムの状態情報を保存します。
未読メッセージ数:特定のタイムスタンプ以降に公開されたチャンネル内のメッセージ数を取得します。

PubNubで他に何ができますか？

PubNubは15以上の同期されたグローバルなプレゼンスポイントを維持し、100ミリ秒未満で任意のデバイスにメッセージを配信することができます。PubNubには次のような機能があります。機能そしてモバイルプッシュ通知などの機能を備えています。

PubNub SDKを使用すると、開発者は、リアルタイムでチャットメッセージやその他のデータを送信する仕組みの学習、作成、管理に多大な時間を費やすことなく、チャットやその他のリアルタイム機能を迅速に構築することができます。スケーリングとインフラストラクチャはすべてあなたのために処理されます。PubNubを使えば、インフラを気にすることなく、ゲームのフロントエンドに集中することができます。

今すぐ始められるチャットリソースをご覧ください：

ハウツーガイドチャットアプリケーションの特定のユースケースを実装するためのハウツーガイドです。
開発PubNub JavaScript SDKを使用してアプリ内チャットアプリケーションを開発します。
学ぶPubNubのチャットSDKをセットアップして使用し、柔軟なチャットアプリケーションを構築する方法をご覧ください。

ご質問やご不明な点がありますか？devrel@pubnub.com までお気軽にお問い合わせください。

PubNubはどのようにお役に立ちますか？

この記事はPubNub.comに掲載されたものです。

私たちのプラットフォームは、開発者がWebアプリ、モバイルアプリ、IoTデバイスのためのリアルタイムのインタラクティブ性を構築、配信、管理するのに役立ちます。

私たちのプラットフォームの基盤は、業界最大かつ最もスケーラブルなリアルタイムエッジメッセージングネットワークです。世界15か所以上で8億人の月間アクティブユーザーをサポートし、99.999%の信頼性を誇るため、停電や同時実行数の制限、トラフィックの急増による遅延の問題を心配する必要はありません。

PubNubを体験

ライブツアーをチェックして、5分以内にすべてのPubNub搭載アプリの背後にある本質的な概念を理解する

セットアップ

PubNubアカウントにサインアップすると、PubNubキーに無料ですぐにアクセスできます。

始める

PubNubのドキュメントは、ユースケースやSDKに関係なく、あなたを立ち上げ、実行することができます。

JavaScriptで10行のコードでチャットアプリケーションを作る