Socket.io と Redis を使用してチャットアプリケーションを構築し、デプロイします。-jsチュートリアル-php.cn

Build and deploy a chat application using Socket.io and Redis.

このチュートリアルでは、Web ソケットを使用してチャットアプリケーションを構築します。 Web ソケットは、リアルタイムのデータ転送が必要なアプリケーションを構築する場合に非常に役立ちます。

このチュートリアルが終わるまでに、独自のソケットサーバーをセットアップし、リアルタイムでメッセージを送受信し、Redis にデータを保存し、レンダリングと Google Cloud 実行でアプリケーションをデプロイできるようになります。

何を構築するのでしょうか?

チャットアプリケーションを構築します。簡潔にするために、サーバーのセットアップのみを行います。独自のフロントエンドフレームワークを使用して、これに従うことができます。

このチャットアプリケーションにはルームがあり、ユーザーはルームに参加してチャットを開始できます。すべてを単純にするために、ユーザー名は一意ではないと仮定します。ただし、各ルームに特定のユーザー名を持つユーザーは 1 人だけです。

ソケットサーバーをセットアップします。

まず、必要な依存関係をインストールする必要があります。

npm i express cors socket.io -D @types/node

ログイン後にコピー

http モジュールを使用してソケットサーバーをセットアップします。アプリはターミナルで実行されるため、すべてのオリジンを許可する必要があります。

import express from "express"; import cors from "cors" import { Server } from "socket.io"; import { createServer } from "http" const app = express(); const server = createServer(app); // create a socket server. const io = new Server(server, { cors: { origin: "*", credentials: true, } }); // listen to connections errors io.engine.on("connection_error", console.log) app.use(cors()) const PORT = 3000; server.listen(PORT, () => console.log(`Server running on port ${PORT}`));

ログイン後にコピー

Redis のセットアップ。

ルームとユーザーの情報とともにメッセージを保存するために Redis を使用します。 upstash redis (無料) を使用できます。 Upstash ダッシュボードで新しい Redis インスタンスを作成します。作成後、Redis インスタンスへの接続に使用できる Redis URL を受け取ります。

選択した Redis クライアントをインストールします。 ioredis を使用します。

npm i ioredis

ログイン後にコピー

次に、Redis クライアントを初期化し、取得した接続 URL を使用して Redis サーバーに接続します。

/** /src/index.ts */ import { Redis } from "ioredis" if (!process.env.REDIS_URL) throw new Error("REDIS_URL env variable is not set"); const redis = new Redis(process.env.REDIS_URL); // listen to connection events. redis.on("connect", () => console.log("Redis connected")) redis.on("error", console.log)

ログイン後にコピー

イベントの処理。

ユーザーはルームを作成したり、既存のルームに参加したりできます。ルームは一意のルーム ID によって識別されます。各メンバーには、グローバルではなくルーム内で一意のユーザー名があります。

ルーム ID を Redis セット内に保存することで、サーバー内のすべてのアクティブなルームを追跡できます。

私たちの目的上、ユーザー名はルーム内でのみ一意です。したがって、それらをルーム ID とセットで保存します。これにより、ルーム ID とメンバー ID の組み合わせがグローバルに一意になることが保証されます。

ルームを作成するためのソケットイベントを設定できます。ルームを作成すると、その作成をリクエストしたメンバーもルームに追加されます。

io.on("connection", () => { // ... socket.on("create:room", async (message) => { console.log("create:room", message) const doesRoomExist = await redis.sismember("rooms", message.roomId) if (doesRoomExist === 1) return socket.emit("error", { message: "Room already exist."}) const roomStatus = await redis.sadd("rooms", message.roomId) const memStatus = await redis.sadd("members", message.roomId + "::" + message.username) if (roomStatus === 0 || memStatus === 0) return socket.emit("error", { message: "Room creation failed." }) socket.join(message.roomId) io.sockets.in(message.roomId).emit("create:room:success", message) io.sockets.in(message.roomId).emit("add:member:success", message) }) }

ログイン後にコピー

既存のルームに新しいメンバーを追加するには、まずメンバーがそのルームに既に存在するかどうかを確認する必要があります。

io.on("connection", () => { // ... socket.on("add:member", async (message) => { console.log("add:member", message) const doesRoomExist = await redis.sismember("rooms", message.roomId) if (doesRoomExist === 0) return socket.emit("error", { message: "Room does not exist." }) const doesMemExist = await redis.sismember("members", message.roomId + "::" + message.username) if (doesMemExist === 1) return socket.emit("error", { message: "Username already exists, please choose another username." }) const memStatus = await redis.sadd("members", message.roomId + "::" + message.username) if (memStatus === 0) return socket.emit("error", { message: "User creation failed." }) socket.join(message.roomId) io.sockets.in(message.roomId).emit("add:member:success", message) }) socket.on("remove:member", async (message) => { console.log("remove:member", message) const doesRoomExist = await redis.sismember("rooms", message.roomId) if (doesRoomExist === 0) return socket.emit("error", { message: "Room does not exist." }) await redis.srem("members", message.roomId + "::" + message.username) socket.leave(message.roomId) io.sockets.in(message.roomId).emit("remove:member:success", message) }) }

ログイン後にコピー

最後に、チャットイベントを作成します。

io.on("connection", () => { socket.on("create:chat", (message) => { console.log("create:chat", message) redis.lpush("chat::" + message.roomId, message.username + "::" + message.message) io.sockets.in(message.roomId).emit("create:chat:success", message) }) }

ログイン後にコピー

展開。

ソケットサーバーには永続的な接続が必要です。サーバーレス環境では機能しません。したがって、vercel にソケットサーバーをデプロイすることはできません。

Render、fly.io、Google Cloud Run などのさまざまな場所にデプロイできます。

与える

レンダーシンプルでのデプロイ。 dockerfile がある場合は、その dockerfile からプロジェクトが自動的にビルドされます。 Render には無料利用枠がありますが、無料利用枠ではコールドスタートが行われることに注意してください。

これが私の dockerfile です。

# syntax=docker/dockerfile:1 ARG NODE_VERSION=20.13.1 ARG PNPM_VERSION=9.4.0 FROM node:${NODE_VERSION}-bookworm AS base ## set shell to bash SHELL [ "/usr/bin/bash", "-c" ] WORKDIR /usr/src/app ## install pnpm. RUN --mount=type=cache,target=/root/.npm \ npm install -g pnpm@${PNPM_VERSION} # ------------ FROM base AS deps # Download dependencies as a separate step to take advantage of Docker's caching. # Leverage a cache mount to /root/.local/share/pnpm/store to speed up subsequent builds. # Leverage bind mounts to package.json and pnpm-lock.yaml to avoid having to copy them # into this layer. RUN --mount=type=bind,source=package.json,target=package.json \ --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \ --mount=type=cache,target=/root/.local/share/pnpm/store \ pnpm install --prod --frozen-lockfile # ----------- FROM deps AS build ## downloading dev dependencies. RUN --mount=type=bind,source=package.json,target=package.json \ --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \ --mount=type=cache,target=/root/.local/share/pnpm/store \ pnpm install --frozen-lockfile COPY . . RUN pnpm run build # ------------- FROM base AS final ENV NODE_ENV=production USER node COPY package.json . # Copy the production dependencies from the deps stage and also # the built application from the build stage into the image. COPY --from=deps /usr/src/app/node_modules ./node_modules COPY --from=build /usr/src/app/dist ./dist EXPOSE 3000 ENTRYPOINT [ "pnpm" ] CMD ["run", "start"]

ログイン後にコピー