Ably、Upstash Redis、Node.js を使用してリアルタイムチャットアプリを構築する

このブログ投稿では、ユーザーがチャットグループに参加してリアルタイムでコミュニケーションできるようにする、シンプルなリアルタイムチャットアプリケーションを作成します。

ユーザー間での低遅延のリアルタイムメッセージングには Ably の機能を、メッセージの永続的な保存には Upstash Redis の機能を、アプリケーションの構築には Node.js の機能を活用します。

必ず

Ably は、ユーザー間の双方向コミュニケーションを可能にするリアルタイムエクスペリエンスプラットフォームです。

このチャットアプリケーションでは、Ably の Pub/Sub チャネルを使用して、ユーザーが Ably チャネルにメッセージを「公開」することでメッセージを送信し、ユーザーがそのチャネルに送信されたメッセージを「サブスクライブ」することで受信できるようにします。

Ably は、追加機能を備えた Web Sockets の上に抽象レイヤーを追加することで、これらの Pub/Sub チャネルを提供します。その一部は次のとおりです。

購読者の存在
認証
ハートビートのメカニズム
キュー
公開された順序でメッセージを配信する機能
Ably の任意のイベントによって関数を呼び出すための統合
メッセージ/プレゼンス/メタデータを Kafka にストリーミングします

詳細については、Web サイトにアクセスしてください。

この強力なリアルタイムエクスペリエンスハブを利用するには、Ably でアプリケーションを作成する必要があります。

まず、Ably アカウントを作成しましょう。

次に、「ライブチャット」を選択してアプリケーションを作成できます。

Ably、Upstash Redis、Node.js を使用してリアルタイムチャットアプリを構築する

以上です！

今ここで他に何もする必要はありません。後で Ably ダッシュボードに戻って API キーを取得します。

Redis をアップスタッシュ

Upstash Redis を使用してチャットメッセージを永続的に保存します。

このストレージにより、ユーザーは参加時にチャット履歴を取得できるようになります。

Upstash Redis を使用すると、チャットメッセージを並べ替えられたリストとして保存することもできます。これにより、メッセージを再並べ替えることなく、データベースからクライアントにメッセージを送信できるようになります。

Upstash Redis データベースを作成するには、Upstash コンソールに移動してログインし、Redis データベースを作成します。

Ably、Upstash Redis、Node.js を使用してリアルタイムチャットアプリを構築する

インフラの準備が整いました。さて、アプリケーションのアーキテクチャに移りましょう。

チャットアプリのアーキテクチャ

このチャットアプリケーションの設計は非常に簡単になります。

Ably、Upstash Redis、Node.js を使用してリアルタイムチャットアプリを構築する

このデモプロジェクトでは、シンプルにするために Ably チャネルを 1 つだけ作成します。クライアントは、そのチャネルに送信するメッセージを公開します。クライアントがメッセージを公開すると、他のクライアントはチャンネル登録を通じてすぐにメッセージを受信します。

クライアント間のリアルタイムメッセージングとは別に、メッセージを Upstash Redis に保存する必要があります。これを可能にするために、Ably チャネルにはもう 1 人のサブスクライバー (サーバー) が必要になります。このサーバーはクライアントから送信されたメッセージを受信し、Upstash Redis に送信してそこに保存します。

最後に、サーバーの助けを借りて、Upstash Redis に保存されているチャット履歴を活用します。サーバー側にエンドポイント「/history」を作成し、Redis からチャット履歴を返します。クライアントは、このエンドポイントを呼び出してアプリをロードするときにチャット履歴を取得できます。

ご覧のとおり、これはデモ用のシンプルなチャットアプリです。このチャットアプリケーションは、このブログ投稿で前述した Ably の他の機能を使用して変更および拡張できます。

始めましょう...

クライアント側

まず、ユーザー用の基本的なチャット UI を作成する必要があります。単純な index.html を作成します。これを行うための Web ページ。

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
<title>Chat App</title>
</head>
 
<body>
<div class="container">
<p class="msg">Messages:</p>
<div id="messages" class="messages"></div>
<form id="msgForm" class="msgForm">
<input type="text" placeholder="Send message" class="input" id="inputBox" />
<input type="submit" class="btn" value="Send">
</form>
</div>
 
<script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
<script src="app.js"></script>
</body>
</html>

ユーザーのブラウザには、メッセージを入力するための入力フィールド、メッセージを送信するための送信ボタン、および前のメッセージを表示するメッセージボックスが表示されます。

ここで、Web ページの一部として実行される JavaScript ファイル「app.js」を作成します。

まずAblyチャンネルを作成します。これを行うには、Ably ダッシュボードに戻り、「API キー」の下に新しい API キーを作成する必要があります。

この API の機能として「Publish」と「Subscribe」を選択しましょう。

Ably、Upstash Redis、Node.js を使用してリアルタイムチャットアプリを構築する

これで、Ably ダッシュボードで指定されたキーを使用して、JavaScript ファイルで Ably クライアントを作成できるようになりました。

const ably = new Ably.Realtime(‘<Ably API Key>’);

警告

クライアントに API キーを与えるのは安全ではありません。 Ablyでは「TokenRequest」という仕組みを提供しています。これはデモアプリケーションなので、API キーを JavaScript ファイルに直接与えます。 Ably のクライアント認証の詳細については、Ably のトークンドキュメントを確認してください。

次に、クライアントが通信する Ably チャネルを取得しましょう。

const channel = ably.channels.get('chat');

チャネルを作成する必要はありません。誰かがチャンネルに何かを公開すると、チャンネルが作成されます。

メッセージング機能を実装する前のステップとして、ユーザーからユーザー名を取得する必要があります。認証はこのブログの焦点ではないため、非常に簡単に説明します。

let name = window.prompt("Please enter your name.", "Anonymous");

これで、メッセージ送信を実装できるようになりました。

const form = document.getElementById('msgForm');
form.addEventListener('submit', (event) => {
 event.preventDefault();
 const message = document.getElementById('inputBox').value;
 if (message.trim() !== '') {
 const messageData = {
 name: name,
 message: message
 }
 channel.publish('message', messageData);
 document.getElementById('inputBox').value = '';
 }
});

メッセージの送信はとても簡単です！ユーザー名とメッセージを含むオブジェクトを作成し、それを Ably チャネルに公開する必要があります。

ユーザーがメッセージを受信できるようにするには、そのチャンネルへのサブスクリプションを作成し、ユーザー名とメッセージを含むメッセージボックスを追加する必要があります。

channel.subscribe('message', (message) => {
 console.log("Client received: ", message);
 displayMessage(message.data);
});
 
function displayMessage(message) {
 const incomingName = message.name;
 const incomingMessage = message.message;
 const messageElement = document.createElement('div');
 const messageValue = document.createElement('div');
 const messageWriter = document.createElement('div');
 if(incomingName !== name){
 messageElement.classList.add('msgSent');
 }
 else {
 messageElement.classList.add('msgReceived');
 }
 messageWriter.classList.add('msgWriter');
 messageValue.classList.add('msgValue');
 messageWriter.textContent = incomingName;
 messageValue.textContent = incomingMessage;
 messageElement.appendChild(messageWriter);
 messageElement.appendChild(messageValue);
 const list = document.getElementById('messages');
 list.appendChild(messageElement);
}

最後に、ページが最初に読み込まれたときのチャット履歴を取得します。

document.addEventListener("DOMContentLoaded", function() {
 fetchChatHistory();
});
 
function fetchChatHistory() {
 fetch('/history')
 .then((response) => {
 if (!response.ok) {
 throw new Error('Failed to fetch chat history');
 } return response.json();
 })
 .then((data) => {
 const history = data.history;
 console.log(history);
 if (history && history.length > 0) {
 history.forEach((message) => {
 displayMessage(JSON.parse(message));
 });
 }
 })
 .catch((error) => {
 console.error('Error fetching chat history:', error);
 });
}

サーバー側

このデモアプリケーションのサーバーは、Ably チャネルをサブスクライブし、それを Upstash Redis データベースにプッシュし、クライアントのリクエストに応じて Upstash Redis からチャット履歴を返します。

最初に「app.js」ファイルでサーバーを設定します。

var express = require('express'); var path = require('path');
 
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));
 
var router = express.Router();
 
/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('index', { title: 'ChatApp' });
});
 
app.use('/', router);
 
module.exports = app;

次に、「server.js」でサーバーを作成し、Ably チャネルにサブスクライブして、Upstash Redis に接続します。

var app = require('../app');
 
var http = require('http');
const redis = require('redis');
const Ably = require('ably');
 
const port = process.env.PORT || '3000';
app.set('port', port);
 
var server = http.createServer(app);
server.listen(port);
 
const redisClient = redis.createClient({ url : "<Upstash Redis Endpoint>" });
redisClient.on("error", function(err) {
 throw err;
});
redisClient.connect().then(r => {
 console.log("Connected to Redis.")
})
 
// Ably configuration
const ably = new Ably.Realtime({
 key: '<Ably API Key>',
});
 
// Define a channel
const channel = ably.channels.get('chat');

次のステップでは、受信メッセージを Upstash Redis データベースにプッシュします。この操作は、Ably チャンネル登録を使用して実行します。

// Handle incoming messages
channel.subscribe('message', async (message) => {
 const convertedMessage = JSON.stringify(message.data);
 console.log('Received message:', convertedMessage);
 // Store the message in Upstash Redis
 await redisClient.LPUSH("AblyChatList",convertedMessage);
});

最後に、「/history」エンドポイントを実装します。これは、Upstash Redis からチャット履歴を取得してクライアントに返します。

// Get chat history endpoint
app.get('/history', async (req, res) => {
 // Retrieve chat history from Upstash Redis
 const messages = await redisClient.LRANGE("AblyChatList", 0, -1);
 messages.reverse();
 console.log("history api: ", messages);
 res.json({ history: messages });
});

アプリを実行する

「server.js」ファイルのディレクトリに移動し、次のコマンドを実行します。

node server.js

localhost:3000 を開きますブラウザで。最初にユーザー名を尋ねられます。

Ably、Upstash Redis、Node.js を使用してリアルタイムチャットアプリを構築する

ユーザー名を入力すると、チャットを開くことができるようになります。

1 つのタブからメッセージを送信し、localhost:3000 を開くと別のアプリで別のユーザー名を使用すると、前のタブから送信されたメッセージを確認できます。

Ably、Upstash Redis、Node.js を使用してリアルタイムチャットアプリを構築する

Upstash Redis のおかげで、チャットアプリケーションを開くたびにチャット履歴を取得できます。

結論

Ably は、アプリケーション間のリアルタイム通信を強化するためのさまざまな機能を提供します。その強力なリアルタイムの世界は、さまざまなユースケースに活用できます。

このブログ投稿では、Ably を使用して、Pub/Sub チャネルを使用してリアルタイムチャットアプリケーションを構築しました。これを実行している間、メッセージを Upstash Redis データベースに保存しました。これら 2 つのツールにより、このアプリケーションの構築が簡単かつ高速になりました。

このプロジェクトは Upstash Redis と Ably の使用方法をデモンストレーションするためだけのものだったので、範囲を非常にシンプルにしました。ご興味があれば、Ably と Upstash Redis の機能を利用して、堅牢でスケーラブルで安全なリアルタイムアプリケーションを構築できます。

Upstash が PlanTripAI の急成長を促進:主要戦略と成功事例

Upstash Redis、Next.js サーバーアクション、Vercel を使用したリアルタイム通知:ステップバイステップガイド

RedisEnterpriseCloudがAWSで成熟するエンタープライズ顧客のニーズにどのように対応するか
エンタープライズのお客様は、クラウドをますます採用し、サービスとしてのデータベース（DBaaS）を選択しています。これは、俊敏性を提供し、運用を簡素化し、拡張できるためです。 StackOverflowの2020DeveloperSurveyで、Redisは、最新のアプリケーションを構築する開発者にとって4年連続で最も愛されているデータベースに選ばれました。現在、主要なクラウドプロバイダーはそれぞれ、オープンソースのRedisに基づいたバージョンの独自のRedisマネージドデータベースサービスを提供しています。企業のお客様がオープンソースのRedisからRedisEnterpriseCloud
サーバーレスアーキテクチャ:AWS Lambda、Upstash Redis、Go によるスケーラブルでコスト効率の高いアプリ
イントロサーバーレスコンピューティングプラットフォームは素晴らしいものですが、サーバーレスデータベースがなければ制限が多すぎます。次のコース「CI/CD の要素」のプラットフォームを構築しているときに、特定の目的でサーバーとして AWS Lambda を使用することに決めたため、サーバーレスデータベースが必要になりました。私が求めていた要件は次のとおりです。従量課金制の料金。時間単位やノード単位ではなく、使用量 (リクエスト、ストレージなど) に応じて支払いたいと考えています。使用を開始するのに非常に安価である必要がありますが、使用量が増えるとコストも比例して増加します。

Ably、Upstash Redis、Node.js を使用してリアルタイム チャット アプリを構築する

必ず

Redis をアップスタッシュ

チャット アプリのアーキテクチャ

クライアント側

サーバー側

アプリを実行する

結論

Ably、Upstash Redis、Node.js を使用してリアルタイムチャットアプリを構築する

チャットアプリのアーキテクチャ