Spring Boot SSE: සජීවී දත්ත Dashboard නිර්මාණය (Real-time Dashboards)

කොහොමද යාලුවනේ! SC Guide එකට ආයෙත් ආයුබෝවන්! අද අපි කතා කරන්න යන්නේ මේ වෙනකොට අපේ Industry එකේ ගොඩක් දෙනෙක්ට වැදගත් වෙන, ඒ වගේම ගොඩක් Cool, එකක් ගැන. ඒ තමයි Spring Boot එක්ක Server-Sent Events (SSE) භාවිතා කරලා Real-time Dashboards හදන විදිහ. Real-time කියන වචනේ ඇහෙනකොටම ඔයාලට එනවා නේද ලොකු Idea එකක්? ඔව්, හැම තත්පරේම දත්ත Update වෙන, Live Metrics පෙන්නන, නියම Dashboard එකක් හදාගන්න කොහොමද කියලා අද අපි හරියටම ඉගෙන ගමු.

දැන් හිතන්නකෝ ඔයාලට ඔයාලගේ System එකේ CPU Usage, Memory Consumption, Active Users ගණන, Network Traffic වගේ දේවල් Live බලන්න Dashboard එකක් ඕනේ කියලා. මේ වගේ දේවල් බලන්න ගොඩක් අය භාවිතා කරන්නේ Polling කියන Method එක. ඒ කියන්නේ Client එකෙන් හැම තත්පර 2-3කට සැරයක්ම Server එකට Request එකක් දාලා, අලුත් Data තියෙනවද කියලා බලන එක. මේක පුංචි Application එකකට නම් ගැටලුවක් නෑ. හැබැයි ලොකු Scale එකකදී, විශේෂයෙන්ම Clients ගොඩක් ඉන්නකොට, මේක Server එකට ලොකු බරක්. අනික මේක Efficiency අතින් එච්චර හොඳ නැහැ, මොකද Data නැති වෙලාවටත් නිකරුනේ Requests යනවා. ඒකට තියෙන නියම විසඳුමක් තමයි Server-Sent Events (SSE) කියන්නේ. මේක WebSockets වගේ Complex නැහැ, ඒ වගේම One-way communication වලට නම් මරු!

Server-Sent Events (SSE) කියන්නේ මොකද්ද?

සරලවම කියනවා නම්, Server-Sent Events (SSE) කියන්නේ Client එකට Server එකෙන් Event Stream එකක් විදිහට Data එවන්න පුනාළුවක්. ඒ කියන්නේ, එක සැරයක් Connection එක හැදුවාට පස්සේ, Server එකට ඕනෑම වෙලාවක Client එකට Data එවන්න පුළුවන්, Client එකෙන් ආයෙත් Request එකක් දාන්න ඕනේ නැහැ. මේක Uni-directional (එක පැත්තකට) Connection එකක්. ඒ කියන්නේ Server එකෙන් Client එකට Data එවනවා විතරයි, Client එකට Server එකට Data යවන්න නම් වෙනම API Call එකක් දාන්න වෙනවා. Real-time Dashboards, News Feeds, Stock Ticker Applications වගේ දේවල් වලට මේක ගොඩක්ම සුදුසුයි.

WebSockets වලට වඩා SSE සරලයි. WebSockets කියන්නේ Bidirectional (දෙපැත්තටම) communication වලට. Gaming, Chat Applications වගේ දේවල් වලට WebSockets සුදුසුයි. හැබැයි ඔයාට Server එකෙන් Client එකට විතරක් Data push කරන්න ඕනේ නම්, SSE තමයි හොඳම විසඳුම. මොකද මේක HTTP/1.1 උඩින්ම වැඩ කරන නිසා, Firewall, Proxy වගේ දේවල් එක්ක ගැටලු ඇතිවෙන්නේ නැහැ. ඒ වගේම Browser වලට Built-in `EventSource` API එකක් තියෙනවා, ඒ නිසා Client-side එකේදී Implement කරන්නත් හරිම ලේසියි. Auto-reconnect facility එකත් තියෙනවා, ඒ කියන්නේ Connection එක නැති වුණොත් Browser එකෙන් Automatic ආයෙත් Connect වෙන්න උත්සාහ කරනවා. මේක Dashboard එකක් වගේ එකක් Run වෙලා තියෙනකොට ගොඩක් වැදගත්.

Spring Boot SSE එක්ක වැඩ පටන් ගමු!

හරි, දැන් අපි බලමු Spring Boot Application එකකට SSE එකතු කරගන්නේ කොහොමද කියලා. මුලින්ම අපි Spring Boot Project එකක් හදාගමු. ඔයාලට පුළුවන් Spring Initializr (start.spring.io) එකට ගිහින් Maven Project එකක් හදාගන්න. Dependencies විදිහට අපි `Spring Web` එකතු කරගමු. අමතර Dependencies මේකට අවශ්‍ය වෙන්නේ නැහැ, මොකද Spring Web එකේ SSE වලට අවශ්‍ය දේවල් තියෙනවා.

pom.xml එකේ Dependencies මෙන්න මේ වගේ වෙයි:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.2.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.scguide</groupId>
    <artifactId>spring-boot-sse-dashboard</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>spring-boot-sse-dashboard</name>
    <description>Real-time dashboard using Spring Boot SSE</description>

    <properties>
        <java.version>17</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Controller එක හදමු: @SseEmitter භාවිතය

Spring Framework එකේදී SSE Implement කරන්න අපිට SseEmitter කියන Class එක භාවිතා කරන්න පුළුවන්. මේක හරිම ලේසියි. අපි පොඩි Controller එකක් හදමු, ඒකෙන් හැම තත්පර 2කට සැරයක්ම 'Hello from Server!' කියන Message එක Client එකට යවන්න.

package com.scguide.springbootssedashboard.controller;

import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.io.IOException;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

@RestController
public class SseController {

    private final ScheduledExecutorService scheduler = Executors.newSingleThreadScheduledExecutor();

    @GetMapping("/sse/events")
    public SseEmitter handleSse() {
        SseEmitter emitter = new SseEmitter(Long.MAX_VALUE); // Set timeout to a very high value or -1 for no timeout

        scheduler.scheduleAtFixedRate(() -> {
            try {
                emitter.send(SseEmitter.event()
                        .name("message") // Event name (optional)
                        .data("Hello from Server! Current time: " + System.currentTimeMillis()));
            } catch (IOException e) {
                emitter.completeWithError(e);
                scheduler.shutdown(); // Shutdown scheduler on error
            }
        }, 0, 2, TimeUnit.SECONDS);

        // Handle completion and errors
        emitter.onCompletion(() -> {
            System.out.println("SSE connection completed!");
            scheduler.shutdown();
        });

        emitter.onTimeout(() -> {
            System.out.println("SSE connection timed out!");
            emitter.complete();
            scheduler.shutdown();
        });

        emitter.onError(e -> {
            System.err.println("Error in SSE connection: " + e.getMessage());
            scheduler.shutdown();
        });

        return emitter;
    }
}

මේ Controller එකේදී අපි කරපු දේවල් ටිකක් පැහැදිලි කරමු:

• @GetMapping("/sse/events"): මේක තමයි Client එකෙන් Connect වෙන්න ඕනේ Endpoint එක.
• new SseEmitter(Long.MAX_VALUE): අපි `SseEmitter` එකක් හදනවා. `Long.MAX_VALUE` කියන්නේ Timeout එකක් නැහැ වගේ එකක්. Production වලදී නම් Reasonable Timeout එකක් දාන එක හොඳයි, මොකද Client එක Disconnect වුණොත් Emitter එක Close වෙන්න ඕනේ නිසා.
• ScheduledExecutorService: අපි මේක පාවිච්චි කරන්නේ නිශ්චිත කාල පරාසයකට සැරයක් Data යවන්න. මේක `Spring @Scheduled` එක්කත් කරන්න පුළුවන්.
• emitter.send(...): මේක තමයි Client එකට Data යවන Method එක. SseEmitter.event() පාවිච්චි කරලා අපිට Event එකට `name` එකක් (client එකේදී ඒ නම අනුව handle කරන්න පුළුවන්), `data` එකක්, `id` එකක් වගේ දේවල් එකතු කරන්න පුළුවන්.
• onCompletion(), onTimeout(), onError(): මේවා තමයි Connection එක ඉවර වුණාම, Timeout වුණාම, නැත්නම් Error එකක් ආවොත් Handle කරන්න පුළුවන් Callbacks. මේවා පාවිච්චි කරලා Emitter එක Cleanly close කරන්න පුළුවන්, අනවශ්‍ය Resources අල්ලන් ඉන්න එක නවත්තන්න.

Client-side (HTML/JavaScript) එක හදමු

දැන් අපි බලමු මේ Server එකෙන් එන Events Client එකේදී බාරගන්නේ කොහොමද කියලා. මේකට HTML File එකක් හදමු.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spring Boot SSE Example</title>
</head>
<body>
    <h1>Spring Boot SSE Example</h1>
    <div id="events"></div>

    <script>
        const eventSource = new EventSource('/sse/events');

        eventSource.onopen = function() {
            console.log('SSE Connection Opened!');
            document.getElementById('events').innerHTML += '<p><strong>Connection Opened!</strong></p>';
        };

        // Listen for 'message' events (default event type if no name is specified)
        eventSource.onmessage = function(event) {
            console.log('Received message:', event.data);
            document.getElementById('events').innerHTML += '<p>Received: ' + event.data + '</p>';
        };

        // Listen for specific 'message' event name (if defined in server side)
        eventSource.addEventListener('message', function(event) {
            console.log('Received specific event (message):', event.data);
            // This will also be triggered if the server uses .name("message")
        });

        eventSource.onerror = function(error) {
            console.error('EventSource failed:', error);
            document.getElementById('events').innerHTML += '<p style="color: red;"><strong>Error! Check console.</strong></p>';
            eventSource.close();
        };

        window.onbeforeunload = function() {
            eventSource.close(); // Close connection when page is closed/reloaded
            console.log('SSE Connection Closed!');
        };
    </script>
</body>
</html>

මේ HTML Page එක ඔයාලට Spring Boot Application එකේ `src/main/resources/static` Folder එකේ තියන්න පුළුවන්. එතකොට `http://localhost:8080/index.html` වලින් Access කරන්න පුළුවන්. මෙතන අපි කරපු දේවල්:

• `new EventSource('/sse/events')`: මේකෙන් තමයි Server එකත් එක්ක SSE Connection එක හදාගන්නේ. Endpoint එක Server එකේ Controller එකේදී දුන්න Endpoint එකම වෙන්න ඕනේ.
• `eventSource.onopen`: Connection එක සාර්ථකව හැදුනාම මේ Event එක Trigger වෙනවා.
• `eventSource.onmessage`: Server එකෙන් `data` එකක් ආවාම මේ Event එක Trigger වෙනවා. `event.data` එකෙන් අපිට Message එක ගන්න පුළුවන්.
• `eventSource.addEventListener('message', ...)`: Server එකෙන් `name` එකක් එක්ක Event එකක් එව්වොත්, අපිට මේ වගේ `addEventListener` පාවිච්චි කරලා Specific Event එකට Listen කරන්න පුළුවන්. (අපේ උදාහරණයේ `message` කියන නම දුන්නා.)
• `eventSource.onerror`: Error එකක් ආවොත් මේ Event එක Trigger වෙනවා.
• `eventSource.close()`: Connection එක Close කරන්න පාවිච්චි කරනවා. Page එක Close කරනකොට Connection එක Close කරන එක හොඳ Practice එකක්.

දැන් ඔයාලට Spring Boot Application එක Run කරලා `http://localhost:8080/index.html` Open කරලා බලන්න පුළුවන්. හැම තත්පර 2කට සැරයක්ම 'Received: Hello from Server!' කියන Message එක Display වෙනවා දකින්න පුළුවන් වෙයි. මරු නේද?

Real-time Metrics Dashboard එකක් හදමු!

අපේ ප්‍රධානම Topic එකට එමු. අපි දැන් අපේ System එකේ Metrics Live බලන්න Dashboard එකක් හදමු. මේකට අපි Simple System Metrics Simulate කරන Service එකක් හදමු, ඒකෙන් CPU Usage, Memory Usage, Network Traffic වගේ දේවල් Random විදිහට Generate කරලා දෙමු.

Metrics Service එක හදමු

package com.scguide.springbootssedashboard.service;

import org.springframework.stereotype.Service;

import java.util.Random;

@Service
public class MetricService {

    private final Random random = new Random();

    public SystemMetrics getCurrentMetrics() {
        // Simulate real-time system metrics
        double cpuUsage = 20.0 + (80.0 * random.nextDouble()); // 20% to 100%
        double memoryUsage = 30.0 + (60.0 * random.nextDouble()); // 30% to 90%
        long networkInKbps = 100 + (random.nextInt(900)); // 100 to 1000 Kbps
        long networkOutKbps = 150 + (random.nextInt(850)); // 150 to 1000 Kbps
        int activeUsers = 5 + random.nextInt(95); // 5 to 100 users

        return new SystemMetrics(
                String.format("%.2f", cpuUsage) + "%",
                String.format("%.2f", memoryUsage) + "%",
                networkInKbps + " Kbps",
                networkOutKbps + " Kbps",
                activeUsers
        );
    }
}

// DTO for System Metrics
class SystemMetrics {
    private String cpuUsage;
    private String memoryUsage;
    private String networkIn;
    private String networkOut;
    private int activeUsers;

    public SystemMetrics(String cpuUsage, String memoryUsage, String networkIn, String networkOut, int activeUsers) {
        this.cpuUsage = cpuUsage;
        this.memoryUsage = memoryUsage;
        this.networkIn = networkIn;
        this.networkOut = networkOut;
        this.activeUsers = activeUsers;
    }

    // Getters
    public String getCpuUsage() {
        return cpuUsage;
    }

    public String getMemoryUsage() {
        return memoryUsage;
    }

    public String getNetworkIn() {
        return networkIn;
    }

    public String getNetworkOut() {
        return networkOut;
    }

    public int getActiveUsers() {
        return activeUsers;
    }
}

මේ `MetricService` එකෙන් `SystemMetrics` Object එකක් Return කරනවා. මේක Data Transfer Object (DTO) එකක්, අපි Data ටික එක තැනකට දාගන්න. මේකේ `cpuUsage`, `memoryUsage` වගේ දේවල් String විදිහට තියෙන්නේ, ඒකට % ලකුණත් එක්ක Display කරන්න ලේසි වෙන්න.

Metrics Controller එක Update කරමු

දැන් අපි කලින් හදපු `SseController` එක update කරමු, `MetricService` එකෙන් Data අරන් Client එකට යවන්න.

package com.scguide.springbootssedashboard.controller;

import com.scguide.springbootssedashboard.service.MetricService;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

import java.io.IOException;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

@RestController
public class SseController {

    @Autowired
    private MetricService metricService;

    private final ScheduledExecutorService scheduler = Executors.newSingleThreadScheduledExecutor();
    private final ObjectMapper objectMapper = new ObjectMapper(); // For converting DTO to JSON

    @GetMapping("/sse/metrics")
    public SseEmitter streamMetrics() {
        SseEmitter emitter = new SseEmitter(Long.MAX_VALUE);

        scheduler.scheduleAtFixedRate(() -> {
            try {
                Object metrics = metricService.getCurrentMetrics();
                // Convert the metrics object to JSON string
                String jsonMetrics = objectMapper.writeValueAsString(metrics);

                emitter.send(SseEmitter.event()
                        .name("system-metrics") // A specific event name for metrics
                        .data(jsonMetrics,
                              MediaType.APPLICATION_JSON)); // Send as JSON
            } catch (IOException e) {
                // If client disconnects or an error occurs, complete the emitter
                emitter.completeWithError(e);
                scheduler.shutdown(); // Stop sending events
            } catch (IllegalStateException e) {
                // Handle cases where emitter might already be complete/closed
                System.err.println("Emitter already closed or illegal state: " + e.getMessage());
                scheduler.shutdown();
            }
        }, 0, 1, TimeUnit.SECONDS); // Send metrics every 1 second

        emitter.onCompletion(() -> {
            System.out.println("Metrics SSE connection completed!");
            scheduler.shutdown();
        });

        emitter.onTimeout(() -> {
            System.out.println("Metrics SSE connection timed out!");
            emitter.complete();
            scheduler.shutdown();
        });

        emitter.onError(e -> {
            System.err.println("Error in Metrics SSE connection: " + e.getMessage());
            scheduler.shutdown();
        });

        return emitter;
    }

    // You can keep the 'handleSse' method for the basic example or remove it.
}

මේ Controller එකේදී අපි `MetricService` එක Autowire කරගෙන, හැම තත්පරේම ඒකෙන් අලුත් Metrics ටික අරන් `ObjectMapper` එකෙන් JSON Format එකට Convert කරලා Client එකට යවනවා. `MediaType.APPLICATION_JSON` එකත් එක්ක යවන එක වැදගත්, එතකොට Client එකට මේක JSON කියලා තේරෙනවා.

Dashboard HTML/JavaScript එක හදමු

දැන් අපිට මේ Metrics ටික Display කරන්න පුළුවන් Dashboard එකක් හදමු. මේකට අපි Simple HTML elements භාවිතා කරනවා, ඒ වගේම Received වෙන JSON Data එක Parse කරලා UI එක Update කරනවා.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Real-time System Metrics Dashboard</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
            color: #333;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #0056b3;
        }
        .metric-card {
            background-color: #e9ecef;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .metric-card strong {
            color: #007bff;
        }
        .value {
            font-size: 1.2em;
            font-weight: bold;
            color: #28a745;
        }
        #status {
            text-align: center;
            margin-top: 20px;
            padding: 10px;
            background-color: #ffeeba;
            border: 1px solid #ffc107;
            border-radius: 5px;
            color: #856404;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Live System Metrics Dashboard</h1>
        <div id="status">Connecting to server...</div>

        <div class="metric-card">
            <strong>CPU Usage:</strong> <span id="cpuUsage" class="value">--</span>
        </div>
        <div class="metric-card">
            <strong>Memory Usage:</strong> <span id="memoryUsage" class="value">--</span>
        </div>
        <div class="metric-card">
            <strong>Network In:</strong> <span id="networkIn" class="value">--</span>
        </div>
        <div class="metric-card">
            <strong>Network Out:</strong> <span id="networkOut" class="value">--</span>
        </div>
        <div class="metric-card">
            <strong>Active Users:</strong> <span id="activeUsers" class="value">--</span>
        </div>
    </div>

    <script>
        const eventSource = new EventSource('/sse/metrics');
        const statusDiv = document.getElementById('status');

        eventSource.onopen = function() {
            console.log('SSE Metrics Connection Opened!');
            statusDiv.textContent = 'Connected to server. Receiving live metrics...';
            statusDiv.style.backgroundColor = '#d4edda';
            statusDiv.style.borderColor = '#28a745';
            statusDiv.style.color = '#155724';
        };

        eventSource.addEventListener('system-metrics', function(event) {
            try {
                const metrics = JSON.parse(event.data);
                console.log('Received metrics:', metrics);

                document.getElementById('cpuUsage').textContent = metrics.cpuUsage;
                document.getElementById('memoryUsage').textContent = metrics.memoryUsage;
                document.getElementById('networkIn').textContent = metrics.networkIn;
                document.getElementById('networkOut').textContent = metrics.networkOut;
                document.getElementById('activeUsers').textContent = metrics.activeUsers;

            } catch (e) {
                console.error('Error parsing JSON or updating UI:', e);
            }
        });

        eventSource.onerror = function(error) {
            console.error('EventSource failed:', error);
            statusDiv.textContent = 'Disconnected from server. Error occurred.';
            statusDiv.style.backgroundColor = '#f8d7da';
            statusDiv.style.borderColor = '#dc3545';
            statusDiv.style.color = '#721c24';
            eventSource.close();
        };

        window.onbeforeunload = function() {
            eventSource.close();
            console.log('SSE Metrics Connection Closed!');
        };
    </script>
</body>
</html>

මේ Dashboard HTML File එකත් `src/main/resources/static` Folder එකේ `dashboard.html` කියලා Save කරන්න. ඊට පස්සේ Spring Boot Application එක Run කරලා `http://localhost:8080/dashboard.html` වලින් Open කරලා බලන්න. දැන් ඔයාලට පුළුවන් Real-time System Metrics ටික, හැම තත්පරේම Update වෙනවා බලන්න. ෆට්ට වැඩක් නේද!

මේකට ඔයාලට ඕනේ නම් Chart.js වගේ Library එකක් භාවිතා කරලා Graphs පවා එකතු කරන්න පුළුවන්. ඒක කරන්නත් ලොකු අමාරුවක් නෑ. Received වෙන Data ටික Array එකකට දාලා Chart එක Update කරන්න විතරයි තියෙන්නේ. ඒක තව ගොඩක් User-friendly වෙනවා.

SSE වල වාසි සහ අවාසි (Pros and Cons of SSE)

ඕනෑම Technology එකක වාසි වගේම අවාසිත් තියෙනවා. SSE වලත් ඒ වගේමයි.

වාසි (Pros):

• සරල බව (Simplicity): WebSockets වලට වඩා SSE Implement කරන්න හරිම ලේසියි. Client-side එකේදී `EventSource` API එක සරලයි, Server-side එකේදී Spring Boot වල `SseEmitter` එකත් එහෙමයි.
• Built-in Browser Support: හැම Modern Browser එකකම වගේ `EventSource` API එක Built-in තියෙනවා, ඒ නිසා වෙන External Library එකක් Browser එකට Load කරන්න අවශ්‍ය නැහැ.
• HTTP/1.1 Compatibility: SSE HTTP/1.1 Protocol එක මත වැඩ කරන නිසා, Proxy Servers, Firewalls වගේ දේවල් හරහා Communication එකට ලොකු බාධාවක් ඇතිවෙන්නේ නැහැ. WebSockets වලට සමහර වෙලාවට Proxy Configuration අවශ්‍ය වෙනවා.
• Automatic Reconnection: Network Error එකක් ආවොත්, Connection එක Disconnect වුණොත්, Browser එකෙන් Automatic ආයෙත් Connect වෙන්න උත්සාහ කරනවා. Dashboard එකක් වගේ එකකට මේ Feature එක ගොඩක් වැදගත්.
• Efficiency for One-Way Traffic: Server එකෙන් Client එකට විතරක් Data Stream කරන්න ඕනේ Use Cases (Dashboards, Notifications, News Feeds) වලට WebSockets වලට වඩා Efficient.

අවාසි (Cons):

• Uni-directional Communication: Client එකට Server එකට Data යවන්න බැහැ. ඒ කියන්නේ Two-way Communication (e.g., Chat, Multiplayer Gaming) අවශ්‍ය Use Cases වලට SSE සුදුසු නැහැ. ඒ වගේ වෙලාවට WebSockets තමයි හොඳම විසඳුම.
• No Binary Data: SSE වලින් Text Data විතරයි යවන්න පුළුවන්. Binary Data යවන්න අවශ්‍ය නම් WebSockets පාවිච්චි කරන්න වෙනවා.
• Browser Connection Limits: සමහර Browser වල එක Domain එකකට තියෙන SSE Connections ගණනට සීමාවක් තියෙනවා (සාමාන්‍යයෙන් 6-8). ඒ කියන්නේ එකම Server එකෙන් එකම වෙලාවේ Clients ගොඩක් දෙනෙක්ට Connect වෙන්න බාධාවක් වෙන්න පුළුවන්. හැබැයි මේක Dashboard එකක් වගේ එකකට එච්චර ලොකු ගැටලුවක් වෙන්නේ නැහැ.
• Limited Error Handling: WebSocket වලට සාපේක්ෂව SSE වල Error Handling Mechanism එක සීමිතයි.

අවසන් වශයෙන්

ඉතින් යාලුවනේ, අද අපි Spring Boot එක්ක Server-Sent Events (SSE) භාවිතා කරලා Real-time Dashboards හදන විදිහ ගැන හොඳට ඉගෙන ගත්තා. මේක ඔයාලගේ Applications වලට Real-time Functionality එකතු කරන්න පුළුවන් හරිම Powerful සහ Simple Technology එකක්. විශේෂයෙන්ම System Monitoring Dashboards, Live Score Updates, News Feeds වගේ දේවල් වලට මේක පට්ට විසඳුමක්.

මතක තියාගන්න, Technology එකක් තෝරගන්නකොට ඔයාලගේ Use Case එක හරියට තේරුම් අරගෙන, ඒකට ගැලපෙනම එක තෝරගන්න එක තමයි වැදගත් වෙන්නේ. Real-time, One-way data streaming වලට SSE කියන්නේ නියම Option එකක්.

නිකන් බලලා විතරක් ඉන්න එපා. මේ Code ටික Download කරගෙන, ඔයාලගේ Computer එකේ Try කරලා බලන්න. පොඩි පොඩි වෙනස්කම් කරලා, තව Metrics එකතු කරලා, Dashboard එක තව ලස්සන කරන්න පුළුවන්. ඔයාලට මොනවා හරි ප්‍රශ්න තියෙනවා නම්, Comment Section එකේ අහන්න. අපි උත්සාහ කරමු උදව් කරන්න.

ඊළඟ ලිපියෙන් තව අලුත් දෙයක් අරගෙන එනකම්, හැමෝටම ජය වේවා! Happy Coding!