Server-Sent Events (SSE) offer a simple way to stream real-time updates from the server to the client, ideal for use cases like live notifications or dashboards. This guide walks you through implementing SSE with a Node.js backend and a Next.js client, enabling a modern, efficient solution for real-time data streaming. 1. Setting Up the SSE Server in Node.js Create a simple Node.js SSE server (same as before): const express = require('express'); const app = express(); const PORT = 3000; app.get('/events', (req, res) => { // Set SSE headers res.setHeader('Content-Type', 'text/event-stream'); res.setHeader('Cache-Control', 'no-cache'); res.setHeader('Connection', 'keep-alive'); // Initial message res.write('data: Welcome to Server-Sent Events!\n\n'); // Send messages every 5 seconds const intervalId = setInterval(() => { const message = { time: new Date().toISOString() }; res.write(`data: ${JSON.stringify(message)}\n\n`); }, 5000); // Clean up on disconnect req.on('close', () => { clearInterval(intervalId); res.end(); }); }); app.listen(PORT, () => { console.log(`SSE server running on http://localhost:${PORT}`); }); 2. Setting Up the Next.js Client Step 1: Initialize a Next.js Project Create a new Next.js project: npx create-next-app@latest sse-nextjs cd sse-nextjs Start the development server: npm run dev Step 2: Create a Page for SSE in Next.js Create a new file in the pages directory, e.g., pages/sse.js. Add the following code to consume the SSE stream: import { useState, useEffect } from 'react'; export default function SSEPage() { const [messages, setMessages] = useState([]); useEffect(() => { // Create an EventSource to listen to SSE events const eventSource = new EventSource('http://localhost:3000/events'); // Handle incoming messages eventSource.onmessage = (event) => { const data = JSON.parse(event.data); setMessages((prevMessages) => [...prevMessages, data]); }; // Handle errors eventSource.onerror = () => { console.error('Error connecting to SSE server.'); eventSource.close(); }; // Cleanup on unmount return () => { eventSource.close(); }; }, []); return ( ); } Step 3: Add Navigation (Optional) Update the pages/index.js file to include a link to the SSE page: import Link from 'next/link'; export default function Home() { return ( ); } 3. Running the Application Start the Node.js SSE server: node server.js Run the Next.js development server: npm run dev Open your browser and visit http://localhost:3000/sse to see the live SSE updates. How This Works EventSource in React: The EventSource API listens to the SSE stream provided by the Node.js server. State Management: Incoming messages are appended to the messages state array using React's useState and useEffect. Real-Time UI Updates: React automatically re-renders the UI whenever the messages state changes. Conclusion Server-Sent Events (SSE) offers a lightweight, easy-to-implement solution for real-time data streaming from the server to the client. While it’s not as versatile as WebSockets, SSE is perfect for scenarios where only server-to-client communication is needed. With its simplicity and browser-native support, SSE can be a great addition to your toolkit for building dynamic and engaging web applications. If you enjoyed this tutorial, let me know in the comments or share your experience with SSE! Happy coding! 🚀

WhatsApp is one of the most widely used messaging platforms globally, and integrating it with your applications can enhance communication with your users. Meta (formerly Facebook) offers a Cloud API for WhatsApp that allows developers to send and receive messages programmatically. In this blog, we’ll walk through the steps to integrate the Meta Cloud WhatsApp API with a Node.js application. Step 1: Set Up a Node.js Project First, create a new Node.js project and install the necessary dependencies. mkdir whatsapp-nodejs cd whatsapp-nodejs npm init -y npm install express axios body-parser Step 2: Create a Basic Express Server Create a file named server.js and set up a basic Express server. const express = require('express'); const axios = require('axios'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); Step 3: Configure Environment Variables Create a .env file to store your API credentials. WHATSAPP_API_URL=https://graph.facebook.com/v13.0/YOUR_PHONE_NUMBER_ID/messages ACCESS_TOKEN=YOUR_ACCESS_TOKEN Load these variables in your server.js file using the dotenv package. npm install dotenv Update server.js to include dotenv. require('dotenv').config(); const WHATSAPP_API_URL = process.env.WHATSAPP_API_URL; const ACCESS_TOKEN = process.env.ACCESS_TOKEN; Step 4: Implement Sending Messages Add an endpoint to send WhatsApp messages. app.post('/send-message', async (req, res) => { const { phoneNumber, message } = req.body; try { const response = await axios.post( WHATSAPP_API_URL, { messaging_product: 'whatsapp', to: phoneNumber, text: { body: message } }, { headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${ACCESS_TOKEN}` } } ); res.status(200).json({ success: true, data: response.data }); } catch (error) { res.status(500).json({ success: false, error: error.message }); } }); Step 5: Implement Receiving Messages To receive messages, you need to set up a webhook. First, create an endpoint to handle incoming messages. app.post('/webhook', (req, res) => { const data = req.body; console.log('Webhook received:', data); // Handle the incoming message here res.sendStatus(200); }); Configure your webhook URL in the Meta Developer Portal. If you’re developing locally, use ngrok to expose your localhost. ngrok http 3000 Use the ngrok URL in the Meta Developer Portal for the webhook configuration. Step 6: Verify the Webhook Meta requires webhook verification. Add an endpoint for verification. app.get('/webhook', (req, res) => { const VERIFY_TOKEN = 'your-verify-token'; const mode = req.query['hub.mode']; const token = req.query['hub.verify_token']; const challenge = req.query['hub.challenge']; if (mode && token === VERIFY_TOKEN) { res.status(200).send(challenge); } else { res.sendStatus(403); } }); Step 7: Test Your Integration Start your server and test sending and receiving messages. node server.js Use Postman or a similar tool to send a POST request to http://localhost:3000/send-message with the following JSON body: { "phoneNumber": "whatsapp:+1234567890", "message": "Hello from Node.js!" } Conclusion Integrating the Meta Cloud WhatsApp API with Node.js allows you to leverage the power of WhatsApp for your applications. Following these steps, you can set up a basic integration to send and receive messages. Explore the API documentation further to unlock more features and capabilities for your applications. #NodeJS #WhatsAppAPI #MetaAPI #WebDevelopment #JavaScript #MessagingApp #CloudAPI #ExpressJS #FullStackDevelopment #APIntegration #Coding #SoftwareDevelopment #TechBlog https://developers.facebook.com/docs/whatsapp/cloud-api/