React useFormStatus પ્રગતિ અનુમાન: પૂર્ણ થવાનો સમયની આગાહી

React નો useFormStatus હૂક, જે React 18 માં રજૂ કરવામાં આવ્યો છે, તે ફોર્મ સબમિશનની સ્થિતિ વિશે મૂલ્યવાન માહિતી પ્રદાન કરે છે. જોકે તે સીધું પ્રગતિ અનુમાન પ્રદાન કરતું નથી, અમે તેના ગુણધર્મો અને અન્ય તકનીકોનો લાભ લઈને સંભવિત રીતે લાંબા સમય સુધી ચાલતા ફોર્મ સબમિશન દરમિયાન વપરાશકર્તાઓને અર્થપૂર્ણ પ્રતિસાદ આપી શકીએ છીએ. આ પોસ્ટ useFormStatus નો ઉપયોગ કરતી વખતે પ્રગતિનો અંદાજ કાઢવા અને પૂર્ણ થવાના સમયની આગાહી કરવા માટેની પદ્ધતિઓનું અન્વેષણ કરે છે, જે વધુ આકર્ષક અને વપરાશકર્તા-મૈત્રીપૂર્ણ અનુભવમાં પરિણમે છે.

useFormStatus ને સમજવું

પ્રગતિ અનુમાનમાં ઊંડા ઉતરતા પહેલાં, ચાલો useFormStatus ના હેતુને ઝડપથી યાદ કરીએ. આ હૂકને <form> એલિમેન્ટની અંદર ઉપયોગ કરવા માટે ડિઝાઇન કરવામાં આવ્યો છે જે action પ્રોપનો ઉપયોગ કરે છે. તે નીચેના ગુણધર્મો ધરાવતું ઑબ્જેક્ટ પરત કરે છે:

• pending: એક બુલિયન જે સૂચવે છે કે ફોર્મ હાલમાં સબમિટ થઈ રહ્યું છે કે નહીં.
• data: ફોર્મ સાથે સબમિટ થયેલ ડેટા (જો સબમિશન સફળ રહ્યું હોય તો).
• method: ફોર્મ સબમિશન માટે વપરાતી HTTP પદ્ધતિ (દા.ત., 'POST', 'GET').
• action: ફોર્મના action પ્રોપને પાસ કરાયેલ ફંક્શન.
• error: જો સબમિશન નિષ્ફળ ગયું હોય તો એક એરર ઑબ્જેક્ટ.

જ્યારે useFormStatus આપણને કહે છે કે ફોર્મ સબમિટ થઈ રહ્યું છે કે નહીં, તે સબમિશનની પ્રગતિ વિશે કોઈ સીધી માહિતી આપતું નથી, ખાસ કરીને જો action ફંક્શનમાં જટિલ અથવા લાંબી કામગીરી સામેલ હોય.

પ્રગતિ અનુમાનનો પડકાર

મુખ્ય પડકાર એ હકીકતમાં રહેલો છે કે action ફંક્શનનું એક્ઝેક્યુશન React માટે અપારદર્શક છે. આપણે સ્વાભાવિક રીતે જાણતા નથી કે પ્રક્રિયા કેટલી આગળ વધી છે. આ ખાસ કરીને સર્વર-સાઇડ ઓપરેશન્સ માટે સાચું છે. જો કે, આ મર્યાદાને પાર કરવા માટે અમે વિવિધ વ્યૂહરચનાઓનો ઉપયોગ કરી શકીએ છીએ.

પ્રગતિ અનુમાન માટેની વ્યૂહરચનાઓ

અહીં ઘણા અભિગમો છે જે તમે લઈ શકો છો, દરેકમાં તેના પોતાના ફાયદા અને ગેરફાયદા છે:

1. સર્વર-સેન્ટ ઇવેન્ટ્સ (SSE) અથવા વેબસોકેટ્સ

સૌથી મજબૂત ઉકેલ ઘણીવાર સર્વરથી ક્લાયંટ પર પ્રગતિ અપડેટ્સ પુશ કરવાનો છે. આનો ઉપયોગ કરીને પ્રાપ્ત કરી શકાય છે:

• સર્વર-સેન્ટ ઇવેન્ટ્સ (SSE): એક યુનિડાયરેક્શનલ (સર્વર-થી-ક્લાયંટ) પ્રોટોકોલ જે સર્વરને એક જ HTTP કનેક્શન પર ક્લાયંટને અપડેટ્સ પુશ કરવાની મંજૂરી આપે છે. SSE આદર્શ છે જ્યારે ક્લાયંટને ફક્ત અપડેટ્સ *પ્રાપ્ત* કરવાની જરૂર હોય.
• વેબસોકેટ્સ: એક બાઈડાયરેક્શનલ કમ્યુનિકેશન પ્રોટોકોલ જે ક્લાયંટ અને સર્વર વચ્ચે સતત કનેક્શન પ્રદાન કરે છે. વેબસોકેટ્સ બંને દિશામાં રીઅલ-ટાઇમ અપડેટ્સ માટે યોગ્ય છે.

ઉદાહરણ (SSE):

સર્વર-સાઇડ (Node.js):

            const express = require('express');
const app = express();

app.get('/progress', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  res.flushHeaders();

  let progress = 0;
  const interval = setInterval(() => {
    progress += 10;
    if (progress > 100) {
      progress = 100;
      clearInterval(interval);
      res.write(`data: {"progress": ${progress}, "completed": true}\n\n`);
      res.end();
    } else {
      res.write(`data: {"progress": ${progress}, "completed": false}\n\n`);
    }
  }, 500); // Simulate progress update every 500ms
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

            

              
                Copy
              
            
          

ક્લાયંટ-સાઇડ (React):

            import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const eventSource = new EventSource('/progress');

    eventSource.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setProgress(data.progress);

      if (data.completed) {
        eventSource.close();
      }
    };

    eventSource.onerror = (error) => {
      console.error('EventSource failed:', error);
      eventSource.close();
    };

    return () => {
      eventSource.close();
    };
  }, []);

  return (
    <div>
      <p>Progress: {progress}%</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

સમજૂતી:

• સર્વર SSE માટે યોગ્ય હેડરો સેટ કરે છે.
• સર્વર data: ઇવેન્ટ્સ તરીકે પ્રગતિ અપડેટ્સ મોકલે છે. દરેક ઇવેન્ટ એક JSON ઑબ્જેક્ટ છે જેમાં progress અને completed ફ્લેગ હોય છે.
• React કમ્પોનન્ટ આ ઇવેન્ટ્સને સાંભળવા માટે EventSource નો ઉપયોગ કરે છે.
• કમ્પોનન્ટ પ્રાપ્ત થયેલ ઇવેન્ટ્સના આધારે સ્ટેટ (progress) ને અપડેટ કરે છે.

ફાયદા: સચોટ પ્રગતિ અપડેટ્સ, રીઅલ-ટાઇમ પ્રતિસાદ.

ગેરફાયદા: સર્વર-સાઇડ ફેરફારોની જરૂર પડે છે, વધુ જટિલ અમલીકરણ.

2. API એન્ડપોઇન્ટ સાથે પોલિંગ

જો તમે SSE અથવા વેબસોકેટ્સનો ઉપયોગ કરી શકતા નથી, તો તમે પોલિંગ લાગુ કરી શકો છો. ક્લાયંટ સમયાંતરે ઓપરેશનની સ્થિતિ તપાસવા માટે સર્વરને વિનંતીઓ મોકલે છે.

ઉદાહરણ:

સર્વર-સાઇડ (Node.js):

            const express = require('express');
const app = express();

// Simulate a long-running task
let taskProgress = 0;
let taskId = null;

app.post('/start-task', (req, res) => {
  taskProgress = 0;
  taskId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); // Generate a unique task ID

  // Simulate background processing
  const interval = setInterval(() => {
    taskProgress += 10;
    if (taskProgress >= 100) {
      taskProgress = 100;
      clearInterval(interval);
    }
  }, 500);

  res.json({ taskId });
});

app.get('/task-status/:taskId', (req, res) => {
  if (req.params.taskId === taskId) {
    res.json({ progress: taskProgress });
  } else {
    res.status(404).json({ message: 'Task not found' });
  }
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

            

              
                Copy
              
            
          

ક્લાયંટ-સાઇડ (React):

            import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [progress, setProgress] = useState(0);
  const [taskId, setTaskId] = useState(null);

  const startTask = async () => {
    const response = await fetch('/start-task', { method: 'POST' });
    const data = await response.json();
    setTaskId(data.taskId);
  };

  useEffect(() => {
    if (!taskId) return;

    const interval = setInterval(async () => {
      const response = await fetch(`/task-status/${taskId}`);
      const data = await response.json();
      setProgress(data.progress);

      if (data.progress === 100) {
        clearInterval(interval);
      }
    }, 1000); // Poll every 1 second

    return () => clearInterval(interval);
  }, [taskId]);

  return (
    <div>
      <button onClick={startTask} disabled={taskId !== null}>Start Task</button>
      {taskId && <p>Progress: {progress}%</p>}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

સમજૂતી:

• ક્લાયંટ /start-task ને કૉલ કરીને એક કાર્ય શરૂ કરે છે, અને taskId મેળવે છે.
• ક્લાયંટ પછી પ્રગતિ મેળવવા માટે સમયાંતરે /task-status/:taskId ને પોલ કરે છે.

ફાયદા: અમલમાં મૂકવું પ્રમાણમાં સરળ છે, સતત કનેક્શનની જરૂર નથી.

ગેરફાયદા: SSE/વેબસોકેટ્સ કરતાં ઓછું સચોટ હોઈ શકે છે, પોલિંગ અંતરાલને કારણે લેટન્સી દાખલ કરે છે, વારંવારની વિનંતીઓને કારણે સર્વર પર ભાર મૂકે છે.

3. ઓપ્ટિમિસ્ટિક અપડેટ્સ અને હ્યુરિસ્ટિક્સ

કેટલાક કિસ્સાઓમાં, તમે વાજબી અંદાજ આપવા માટે હ્યુરિસ્ટિક્સ સાથે સંયુક્ત ઓપ્ટિમિસ્ટિક અપડેટ્સનો ઉપયોગ કરી શકો છો. ઉદાહરણ તરીકે, જો તમે ફાઇલો અપલોડ કરી રહ્યાં છો, તો તમે ક્લાયંટ-સાઇડ પર અપલોડ થયેલ બાઇટ્સની સંખ્યાને ટ્રેક કરી શકો છો અને કુલ ફાઇલ કદના આધારે પ્રગતિનો અંદાજ લગાવી શકો છો.

ઉદાહરણ (ફાઇલ અપલોડ):

            import React, { useState } from 'react';

function MyComponent() {
  const [progress, setProgress] = useState(0);
  const [file, setFile] = useState(null);

  const handleFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    try {
      const xhr = new XMLHttpRequest();
      xhr.upload.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
          const percentage = Math.round((event.loaded * 100) / event.total);
          setProgress(percentage);
        }
      });

      xhr.open('POST', '/upload'); // Replace with your upload endpoint
      xhr.send(formData);

      xhr.onload = () => {
        if (xhr.status === 200) {
          console.log('Upload complete!');
        } else {
          console.error('Upload failed:', xhr.status);
        }
      };

      xhr.onerror = () => {
        console.error('Upload failed');
      };

    } catch (error) {
      console.error('Upload error:', error);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="file" onChange={handleFileChange} />
        <button type="submit" disabled={!file}>Upload</button>
      </form>
      <p>Progress: {progress}%</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

સમજૂતી:

• કમ્પોનન્ટ ફાઇલ અપલોડ કરવા માટે XMLHttpRequest ઑબ્જેક્ટનો ઉપયોગ કરે છે.
• xhr.upload પરનો progress ઇવેન્ટ લિસનર અપલોડ પ્રગતિને ટ્રેક કરવા માટે વપરાય છે.
• ઇવેન્ટના loaded અને total ગુણધર્મોનો ઉપયોગ પૂર્ણ થયેલ ટકાવારીની ગણતરી કરવા માટે થાય છે.

ફાયદા: ફક્ત ક્લાયંટ-સાઇડ, તાત્કાલિક પ્રતિસાદ આપી શકે છે.

ગેરફાયદા: ચોકસાઈ હ્યુરિસ્ટિકની વિશ્વસનીયતા પર આધાર રાખે છે, તે તમામ પ્રકારની કામગીરી માટે યોગ્ય ન પણ હોય.

4. ક્રિયાને નાના પગલાંમાં વિભાજીત કરવી

જો action ફંક્શન બહુવિધ વિશિષ્ટ પગલાંઓ કરે છે, તો તમે પ્રગતિ સૂચવવા માટે દરેક પગલા પછી UI ને અપડેટ કરી શકો છો. આ માટે અપડેટ્સ પ્રદાન કરવા માટે action ફંક્શનમાં ફેરફાર કરવાની જરૂર છે.

ઉદાહરણ:

            import React, { useState } from 'react';

async function myAction(setProgress) {
  setProgress(10);
  await someAsyncOperation1();
  setProgress(40);
  await someAsyncOperation2();
  setProgress(70);
  await someAsyncOperation3();
  setProgress(100);
}

function MyComponent() {
  const [progress, setProgress] = useState(0);

  const handleSubmit = async () => {
    await myAction(setProgress);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <button type="submit">Submit</button>
      </form>
      <p>Progress: {progress}%</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

સમજૂતી:

• myAction ફંક્શન setProgress કૉલબેક સ્વીકારે છે.
• તે તેના એક્ઝેક્યુશન દરમિયાન વિવિધ બિંદુઓ પર પ્રગતિ સ્ટેટને અપડેટ કરે છે.

ફાયદા: પ્રગતિ અપડેટ્સ પર સીધો નિયંત્રણ.

ગેરફાયદા: action ફંક્શનમાં ફેરફાર કરવાની જરૂર પડે છે, જો પગલાં સરળતાથી વિભાજીત ન થઈ શકે તો અમલ કરવું વધુ જટિલ બની શકે છે.

પૂર્ણ થવાના સમયની આગાહી કરવી

એકવાર તમારી પાસે પ્રગતિ અપડેટ્સ હોય, તો તમે બાકીના અંદાજિત સમયની આગાહી કરવા માટે તેનો ઉપયોગ કરી શકો છો. એક સરળ અભિગમ એ છે કે ચોક્કસ પ્રગતિ સ્તર સુધી પહોંચવા માટે લીધેલા સમયને ટ્રેક કરવો અને કુલ સમયનો અંદાજ કાઢવા માટે એક્સ્ટ્રાપોલેટ કરવું.

ઉદાહરણ (સરળ):

            import React, { useState, useEffect, useRef } from 'react';

function MyComponent() {
  const [progress, setProgress] = useState(0);
  const [estimatedTimeRemaining, setEstimatedTimeRemaining] = useState(null);
  const startTimeRef = useRef(null);

  useEffect(() => {
    if (progress > 0 && startTimeRef.current === null) {
      startTimeRef.current = Date.now();
    }

    if (progress > 0) {
      const elapsedTime = Date.now() - startTimeRef.current;
      const estimatedTotalTime = (elapsedTime / progress) * 100;
      const remainingTime = estimatedTotalTime - elapsedTime;
      setEstimatedTimeRemaining(Math.max(0, remainingTime)); // Ensure non-negative
    }
  }, [progress]);

  // ... (rest of the component and progress updates as described in previous sections)

  return (
    <div>
      <p>Progress: {progress}%</p>
      {estimatedTimeRemaining !== null && (
        <p>Estimated Time Remaining: {Math.round(estimatedTimeRemaining / 1000)} seconds</p>
      )}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

સમજૂતી:

• જ્યારે પ્રગતિ પ્રથમ વખત અપડેટ થાય છે ત્યારે અમે પ્રારંભ સમય સંગ્રહિત કરીએ છીએ.
• અમે વીતેલો સમય ગણીએ છીએ અને તેનો ઉપયોગ કુલ સમયનો અંદાજ કાઢવા માટે કરીએ છીએ.
• અમે અંદાજિત કુલ સમયમાંથી વીતેલો સમય બાદ કરીને બાકીનો સમય ગણીએ છીએ.

મહત્વપૂર્ણ વિચારણાઓ:

• ચોકસાઈ: આ એક *ખૂબ જ* સરળ આગાહી છે. નેટવર્કની સ્થિતિ, સર્વર લોડ અને અન્ય પરિબળો ચોકસાઈ પર નોંધપાત્ર અસર કરી શકે છે. બહુવિધ અંતરાલો પર સરેરાશ જેવી વધુ અત્યાધુનિક તકનીકો ચોકસાઈ સુધારી શકે છે.
• વિઝ્યુઅલ પ્રતિસાદ: સ્પષ્ટપણે સૂચવો કે સમય એક *અંદાજ* છે. શ્રેણીઓ પ્રદર્શિત કરવી (દા.ત., "અંદાજિત બાકી સમય: 5-10 સેકન્ડ") વધુ વાસ્તવિક હોઈ શકે છે.
• એજ કેસ: જ્યાં પ્રગતિ શરૂઆતમાં ખૂબ ધીમી હોય તેવા એજ કેસને હેન્ડલ કરો. શૂન્ય દ્વારા ભાગાકાર કરવાનું અથવા વધુ પડતા મોટા અંદાજો પ્રદર્શિત કરવાનું ટાળો.

useFormStatus ને પ્રગતિ અનુમાન સાથે જોડવું

જ્યારે useFormStatus પોતે પ્રગતિ માહિતી પ્રદાન કરતું નથી, ત્યારે તમે તેના pending ગુણધર્મનો ઉપયોગ પ્રગતિ સૂચકને સક્ષમ અથવા અક્ષમ કરવા માટે કરી શકો છો. ઉદાહરણ તરીકે:

            import React, { useState } from 'react';
import { useFormStatus } from 'react-dom';

// ... (Progress estimation logic from previous examples)

function MyComponent() {
  const [progress, setProgress] = useState(0);
  const { pending } = useFormStatus();

  const handleSubmit = async (formData) => {
    // ... (Your form submission logic, including updates to progress)
  };

  return (
    <form action={handleSubmit}>
      <button type="submit" disabled={pending}>Submit</button>
      {pending && <p>Progress: {progress}%</p>}
    </form>
  );
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, પ્રગતિ સૂચક ફક્ત ત્યારે જ પ્રદર્શિત થાય છે જ્યારે ફોર્મ પેન્ડિંગ હોય (એટલે ​​કે, જ્યારે useFormStatus.pending true હોય).

શ્રેષ્ઠ પદ્ધતિઓ અને વિચારણાઓ

• ચોકસાઈને પ્રાથમિકતા આપો: પ્રગતિ અનુમાનની એવી તકનીક પસંદ કરો જે કરવામાં આવતી કામગીરીના પ્રકાર માટે યોગ્ય હોય. SSE/વેબસોકેટ્સ સામાન્ય રીતે સૌથી સચોટ પરિણામો પ્રદાન કરે છે, જ્યારે સરળ કાર્યો માટે હ્યુરિસ્ટિક્સ પૂરતા હોઈ શકે છે.
• સ્પષ્ટ વિઝ્યુઅલ પ્રતિસાદ આપો: ઓપરેશન ચાલુ છે તે દર્શાવવા માટે પ્રોગ્રેસ બાર, સ્પિનર્સ અથવા અન્ય વિઝ્યુઅલ સંકેતોનો ઉપયોગ કરો. પ્રગતિ સૂચકને સ્પષ્ટપણે લેબલ કરો અને, જો લાગુ હોય તો, અંદાજિત બાકી સમય પણ દર્શાવો.
• ભૂલોને સુવ્યવસ્થિત રીતે હેન્ડલ કરો: જો ઓપરેશન દરમિયાન કોઈ ભૂલ થાય, તો વપરાશકર્તાને માહિતીપ્રદ ભૂલ સંદેશ પ્રદર્શિત કરો. પ્રગતિ સૂચકને ચોક્કસ ટકાવારી પર અટવાયેલું છોડવાનું ટાળો.
• પ્રદર્શનને ઑપ્ટિમાઇઝ કરો: UI થ્રેડમાં ગણતરીની દ્રષ્ટિએ ખર્ચાળ કામગીરી કરવાનું ટાળો, કારણ કે આ પ્રદર્શન પર નકારાત્મક અસર કરી શકે છે. કામને બેકગ્રાઉન્ડ થ્રેડો પર ઑફલોડ કરવા માટે વેબ વર્કર્સ અથવા અન્ય તકનીકોનો ઉપયોગ કરો.
• ઍક્સેસિબિલિટી: ખાતરી કરો કે પ્રગતિ સૂચકો વિકલાંગ વપરાશકર્તાઓ માટે સુલભ છે. ઓપરેશનની પ્રગતિ વિશે સિમેન્ટિક માહિતી પ્રદાન કરવા માટે ARIA એટ્રિબ્યુટ્સનો ઉપયોગ કરો. ઉદાહરણ તરીકે, પ્રોગ્રેસ બાર પર aria-valuenow, aria-valuemin, અને aria-valuemax નો ઉપયોગ કરો.
• લોકલાઇઝેશન: અંદાજિત બાકી સમય પ્રદર્શિત કરતી વખતે, વિવિધ સમય ફોર્મેટ્સ અને પ્રાદેશિક પસંદગીઓનું ધ્યાન રાખો. વપરાશકર્તાના લોકેલ માટે સમયને યોગ્ય રીતે ફોર્મેટ કરવા માટે date-fns અથવા moment.js જેવી લાઇબ્રેરીનો ઉપયોગ કરો.
• આંતરરાષ્ટ્રીયકરણ: ભૂલ સંદેશાઓ અને અન્ય ટેક્સ્ટને બહુવિધ ભાષાઓને સમર્થન આપવા માટે આંતરરાષ્ટ્રીયકૃત કરવું જોઈએ. અનુવાદોનું સંચાલન કરવા માટે i18next જેવી લાઇબ્રેરીનો ઉપયોગ કરો.

નિષ્કર્ષ

જ્યારે React નો useFormStatus હૂક સીધી રીતે પ્રગતિ અનુમાનની ક્ષમતાઓ પ્રદાન કરતું નથી, ત્યારે તમે ફોર્મ સબમિશન દરમિયાન વપરાશકર્તાઓને અર્થપૂર્ણ પ્રતિસાદ આપવા માટે તેને અન્ય તકનીકો સાથે જોડી શકો છો. SSE/વેબસોકેટ્સ, પોલિંગ, ઓપ્ટિમિસ્ટિક અપડેટ્સ, અથવા ક્રિયાઓને નાના પગલાંમાં વિભાજીત કરીને, તમે વધુ આકર્ષક અને વપરાશકર્તા-મૈત્રીપૂર્ણ અનુભવ બનાવી શકો છો. ચોકસાઈને પ્રાથમિકતા આપવાનું, સ્પષ્ટ વિઝ્યુઅલ પ્રતિસાદ આપવાનું, ભૂલોને સુવ્યવસ્થિત રીતે હેન્ડલ કરવાનું, અને બધા વપરાશકર્તાઓ માટે, તેમના સ્થાન અથવા પૃષ્ઠભૂમિને ધ્યાનમાં લીધા વિના, સકારાત્મક અનુભવ સુનિશ્ચિત કરવા માટે પ્રદર્શનને ઑપ્ટિમાઇઝ કરવાનું યાદ રાખો.

વધુ સંશોધન

• React useFormStatus દસ્તાવેજીકરણ
• સર્વર-સેન્ટ ઇવેન્ટ્સ (SSE)
• વેબસોકેટ્સ
• XMLHttpRequest