इस ट्यूटोरियल में, हम वेब सॉकेट का उपयोग करके एक चैट एप्लिकेशन बनाएंगे। वेब सॉकेट वास्तव में उपयोगी होते हैं जब आप ऐसे एप्लिकेशन बनाना चाहते हैं जिनके लिए डेटा के वास्तविक समय हस्तांतरण की आवश्यकता होती है।

इस ट्यूटोरियल के अंत तक, आप अपना स्वयं का सॉकेट सर्वर सेटअप करने, वास्तविक समय में संदेश भेजने और प्राप्त करने, रेडिस में डेटा संग्रहीत करने और रेंडर और Google क्लाउड रन पर अपने एप्लिकेशन को तैनात करने में सक्षम होंगे।

हम क्या निर्माण करेंगे?

हम एक चैट एप्लिकेशन बनाएंगे। इसे संक्षिप्त रखने के लिए, हम केवल सर्वर सेटअप करेंगे। आप अपने स्वयं के फ्रंट एंड फ्रेमवर्क का उपयोग कर सकते हैं और अनुसरण कर सकते हैं।

इस चैट एप्लिकेशन में, कमरे होंगे और उपयोगकर्ता एक कमरे में शामिल हो सकते हैं और चैट करना शुरू कर सकते हैं। सब कुछ सरल रखने के लिए, हम मान लेंगे कि उपयोगकर्ता नाम अद्वितीय नहीं हैं। हालाँकि प्रत्येक कमरे में एक विशिष्ट उपयोगकर्ता नाम वाला केवल एक उपयोगकर्ता हो सकता है।

सॉकेट सर्वर सेटअप करें.

सबसे पहले हमें आवश्यक निर्भरताएँ स्थापित करने की आवश्यकता है।

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}`));

रेडिस की स्थापना.

हम अपने संदेशों को कमरे और उपयोगकर्ता की जानकारी के साथ संग्रहीत करने के लिए रेडिस का उपयोग करेंगे। आप अपस्टैश रेडिस (निःशुल्क) का उपयोग कर सकते हैं। अपने अपस्टैश डैशबोर्ड में एक नया रेडिस इंस्टेंस बनाएं। निर्माण के बाद आपको एक रेडिस यूआरएल प्राप्त होगा जिसका उपयोग आप अपने रेडिस इंस्टेंस से कनेक्ट करने के लिए कर सकते हैं।

अपनी पसंद का कोई भी रेडिस क्लाइंट स्थापित करें। मैं आयोरेडिस का उपयोग करूँगा।

npm i ioredis

इसके बाद, हम अपने रेडिस क्लाइंट को इनिशियलाइज़ करेंगे और हमें प्राप्त कनेक्शन यूआरएल का उपयोग करके इसे अपने रेडिस सर्वर से कनेक्ट करेंगे।

/** /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)

घटनाओं को संभालना.

उपयोगकर्ता कमरे बना सकते हैं या मौजूदा कमरों में शामिल हो सकते हैं। कमरों की पहचान अद्वितीय कक्ष आईडी से की जाती है। प्रत्येक सदस्य का एक उपयोगकर्ता नाम होता है जो कमरे के अंदर अद्वितीय होता है, वैश्विक स्तर पर नहीं।

हम रेडिस सेट के अंदर उनके रूम आईडी को संग्रहीत करके, अपने सर्वर में सभी सक्रिय कमरों पर नज़र रख सकते हैं।

हमारे उद्देश्य के लिए, उपयोगकर्ता नाम केवल एक कमरे के अंदर अद्वितीय होते हैं। इसलिए, हम उन्हें रूम आईडी के साथ एक सेट में संग्रहीत करते हैं। यह सुनिश्चित करता है कि सदस्य आईडी के साथ रूम आईडी का संयोजन विश्व स्तर पर अद्वितीय है।

हम कमरा बनाने के लिए सॉकेट इवेंट सेटअप कर सकते हैं। जब हम एक कमरा बनाते हैं, तो हम उस सदस्य को भी कमरे में जोड़ते हैं जिसने इसके निर्माण का अनुरोध किया था।

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 में तैनात नहीं कर सकते।

आप इसे रेंडर, फ्लाई.आईओ या गूगल क्लाउड रन जैसी कई जगहों पर तैनात कर सकते हैं।

प्रदान करना

सरल रेंडर पर तैनाती। यदि आपके पास एक dockerfile है, तो यह स्वचालित रूप से उस 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"]

गूगल क्लाउड रन

यदि आप रेंडर करने और कोल्ड स्टार्ट से बचने के लिए एक मुफ्त विकल्प चाहते हैं, तो आपको Google क्लाउड रन का उपयोग करना चाहिए। क्लाउड रन पर तैनात करने के चरण इस लेख के दायरे से बाहर हैं, लेकिन यहां उन चीजों की एक छोटी सूची है जो आपको करने की आवश्यकता है।

1. नीचे दिए गए डॉकरफ़ाइल से अपनी डॉकर छवि बनाएं।

2. Google विरूपण साक्ष्य रजिस्ट्री सेवा का उपयोग करके एक कलाकृति भंडार बनाएं।

3. अपनी डॉकर छवि का नाम इस प्रारूप में बदलें -docker.pkg.dev//:

4. अपनी छवि को अपने आर्टिफैक्ट रिपॉजिटरी में पुश करें।

5. छवि को Google क्लाउड रन पर परिनियोजित करें। कोल्ड स्टार्ट से बचने के लिए, न्यूनतम सक्रिय इंस्टेंस को एक पर सेट करना सुनिश्चित करें।

इस ट्यूटोरियल के लिए बस इतना ही।

पढ़ने के लिए धन्यवाद ❣️