Reactive Accelerator
Tips and Tricks
Webhook

Webhook: আধুনিক ওয়েব ডেভেলপমেন্টের সুপারহিরো 🚀

webhook

আজকে আমরা কথা বলব Webhook নিয়ে - এমন একটি টেকনোলজি যা আধুনিক ওয়েব ডেভেলপমেন্টে বিপ্লব এনেছে। আপনি যদি কখনো ভেবে থাকেন যে কিভাবে Facebook আপনাকে instant notification পাঠায়, অথবা কিভাবে online payment সিস্টেম real-time এ কাজ করে, তাহলে এই লেখাটি আপনার জন্য।

Webhook কি? 🤔

Webhook হলো একটি automatic notification system। সহজ কথায়, এটি হলো "কিছু হলে আমাকে জানিয়ে দাও" সিস্টেম।

Real Life Example দিয়ে বুঝি:

Pizza Order এর মত:

আপনি pizza order করলেন 🍕

Restaurant এ কাজ চলছে 👨‍🍳

Pizza ready হলে restaurant আপনাকে call করবে 📞

Webhook ও ঠিক এভাবেই কাজ করে:

User payment করলো 💳

Stripe এ processing চলছে ⚡

Payment success হলে Stripe আপনার server কে call করবে 🔔

কিভাবে Webhook কাজ করে? ⚙️

১. Setup Phase:

আপনি service provider (যেমন Stripe) কে বলেন:

"Hey Stripe, payment complete হলে আমার এই endpoint এ call করো:
https://my-website.com/webhook/stripe"

২. Event Happens:

User একটা payment করলো → Stripe এ payment process হচ্ছে

৩. Automatic Notification:

Payment successful হলে → Stripe automatically আপনার server এ POST request পাঠায়

৪. Your Server Response:

আপনার server notification receive করে → Instant action নেয় (booking create, email send, etc.)

Code Example দিয়ে বুঝি 💻

Backend (NestJS):

@Controller('webhook')
export class WebhookController {
  
  @Post('stripe')
  async handleStripeWebhook(@Body() data: any) {
    console.log("🔔 Stripe থেকে notification এসেছে!");
    
    if (data.type === 'payment_intent.succeeded') {
      console.log("💰 Payment successful!");
      
      // এখন booking create করুন
      await this.createBooking(data.data.object);
      
      // Email notification পাঠান
      await this.sendConfirmationEmail(data.data.object);
    }
    
    return { received: true };
  }
}

Stripe Dashboard Setup:

Webhook URL: https://your-website.com/webhook/stripe
Events: payment_intent.succeeded, checkout.session.completed

Webhook vs Traditional API Call 🆚

Traditional API Call (আপনি call করেন):

আপনার server → Stripe API → "Payment status কি?"
              ← Response   ← "Still processing..."

// 5 সেকেন্ড পরে আবার
আপনার server → Stripe API → "এখন status কি?"
              ← Response   ← "Still processing..."

// আরো 5 সেকেন্ড পরে
আপনার server → Stripe API → "এখন?"
              ← Response   ← "Completed!"

Webhook (তারা আপনাকে call করে):

User payment করলো → Stripe processing → Payment complete

                    Stripe → আপনার server → "Payment successful!"

Real-world Applications 🌍

1. E-commerce Payment:

User checkout করলো → Payment gateway → Webhook → Order confirmation

2. Social Media Notifications:

Someone liked your post → Platform → Webhook → Push notification

3. CI/CD Pipeline:

Code push করলেন → GitHub → Webhook → Automatic deployment

4. Email Marketing:

User subscribe করলো → Form → Webhook → Welcome email series

কেন Webhook এত গুরুত্বপূর্ণ? 🎯

১. Instant Response (তাৎক্ষণিক প্রতিক্রিয়া)

❌ Manual checking: 30 সেকেন্ড পরে জানলেন
✅ Webhook: 0.5 সেকেন্ডে জানলেন

২. Resource Efficient (সম্পদ সাশ্রয়ী)

❌ Polling: বার বার API call = server load
✅ Webhook: শুধু event হলে call = minimal load

৩. Reliability (নির্ভরযোগ্যতা)

❌ Manual check: Miss করার সম্ভাবনা
✅ Webhook: Automatic retry mechanism

৪. Better User Experience

❌ "Processing... please wait"
✅ Instant confirmation এবং updates

Common Webhook Providers 🏢

Payment Gateways:

  • Stripe: সবচেয়ে popular, excellent webhook support
  • PayPal: Comprehensive event system
  • Razorpay: Indian market leader

Development Tools:

  • GitHub: Code push, PR merge events
  • GitLab: CI/CD pipeline events
  • Vercel: Deployment notifications

Communication:

  • Twilio: SMS/Call events
  • SendGrid: Email delivery events
  • Slack: Message, reaction events

Best Practices 📋

1. Security First:

// Webhook signature verify করুন
const signature = req.headers['stripe-signature'];
const event = stripe.webhooks.constructEvent(
  req.body,
  signature,
  process.env.STRIPE_WEBHOOK_SECRET
);

2. Idempotency Handle করুন:

// Duplicate events handle করুন
const existingRecord = await db.findUnique({
  where: { webhookEventId: event.id }
});
 
if (existingRecord) {
  return; // Already processed
}

3. Error Handling:

try {
  await processWebhook(event);
} catch (error) {
  console.error('Webhook processing failed:', error);
  // Log for debugging
  // Return appropriate status code
}

4. Timeout Management:

// দ্রুত response দিন
app.post('/webhook', async (req, res) => {
  res.status(200).json({ received: true });
  
  // Background এ process করুন
  processWebhookAsync(req.body);
});

Development এ Webhook Test করা 🧪

Local Development:

# Stripe CLI দিয়ে
stripe listen --forward-to localhost:3001/webhook/stripe
 
# অথবা ngrok দিয়ে
ngrok http 3001

Testing Tools:

  • Stripe CLI: Built-in testing
  • Webhook.site: Generic webhook testing
  • Postman: Custom webhook simulation

Common Pitfalls এবং Solutions 🚨

1. Webhook Timeout:

❌ Long processing in webhook handler
✅ Quick acknowledgment + background processing

2. Missing Security:

❌ Raw body processing without verification
✅ Signature verification দিয়ে authenticity check

3. No Retry Logic:

❌ One-time failure = permanent failure
✅ Implement retry mechanism

4. Duplicate Processing:

❌ Same event multiple times processing
✅ Idempotency key দিয়ে duplicate prevention

একটি Complete Example: Trip Booking System 🎫

Frontend:

const handleBooking = async () => {
  const response = await fetch('/api/create-checkout', {
    method: 'POST',
    body: JSON.stringify({ tripId, userId, amount })
  });
  
  const { checkoutUrl } = await response.json();
  window.location.href = checkoutUrl;
};

Backend Webhook:

@Post('webhook/stripe')
async handleStripeWebhook(@Body() event: any) {
  if (event.type === 'checkout.session.completed') {
    const session = event.data.object;
    
    // Database transaction
    await this.prisma.$transaction(async (tx) => {
      // Payment record
      const payment = await tx.payment.create({
        data: {
          stripeSessionId: session.id,
          amount: session.amount_total / 100,
          status: 'completed'
        }
      });
      
      // Booking record
      await tx.booking.create({
        data: {
          userId: session.metadata.userId,
          tripId: session.metadata.tripId,
          paymentId: payment.id,
          status: 'confirmed'
        }
      });
    });
    
    // Send confirmation email
    await this.emailService.sendBookingConfirmation(session);
  }
}

Future of Webhooks 🔮

Trends:

  • GraphQL Subscriptions: Real-time data updates
  • WebSocket Integration: Bi-directional communication
  • Event-Driven Architecture: Microservices communication
  • Serverless Functions: Webhook handlers as functions

Emerging Standards:

  • CloudEvents: Standardized event format
  • AsyncAPI: Documentation for event-driven APIs
  • Webhook Security: Enhanced authentication methods

শেষ কথা 🎯

Webhook আধুনিক ওয়েব ডেভেলপমেন্টের একটি অপরিহার্য অংশ। এটি আপনার application কে আরো responsive, efficient এবং user-friendly করে তোলে।

একজন developer হিসেবে webhook এর proper implementation আপনার application এর quality এবং user experience significantly improve করবে।

Key Takeaways:

✅ Webhook = Automatic notification system
✅ Real-time communication enable করে
✅ Server resources save করে
✅ Better user experience প্রদান করে
✅ Modern applications এর জন্য essential