सर्विस वर्कर में WebSockets इस्तेमाल करना

इस ट्यूटोरियल में, Chrome एक्सटेंशन के सर्विस वर्कर में WebSocket से कनेक्ट करने का तरीका बताया गया है. GitHub पर, काम करने वाला एक उदाहरण देखा जा सकता है.

बैकग्राउंड

Chrome 116 से, एक्सटेंशन के सर्विस वर्कर को WebSockets के लिए बेहतर सहायता मिलती है. पहले, अगर 30 सेकंड तक एक्सटेंशन के कोई अन्य इवेंट नहीं होते थे, तो WebSocket कनेक्शन चालू होने के बावजूद, सर्विस वर्कर इनऐक्टिव हो सकता था. इससे सर्विस वर्कर बंद हो जाता था और WebSocket कनेक्शन भी बंद हो जाता था. एक्सटेंशन के सर्विस वर्कर के लाइफ़साइकल के बारे में ज़्यादा जानने के लिए, एक्सटेंशन के सर्विस वर्कर से जुड़ी गाइड पढ़ें.

Chrome 116 और इसके बाद वाले वर्शन में, सर्विस वर्कर की गतिविधि के लिए तय की गई 30 सेकंड की विंडो में मैसेज भेजकर, WebSocket कनेक्शन वाले सर्विस वर्कर को चालू रखा जा सकता है. इन्हें आपके सर्वर या एक्सटेंशन से शुरू किया जा सकता है. यहां दिए गए उदाहरण में, हम Chrome एक्सटेंशन से सर्वर को एक सामान्य मैसेज भेजेंगे, ताकि यह पक्का किया जा सके कि सर्विस वर्कर चालू रहे.

उदाहरण: WebSocket को चालू रखना

सबसे पहले, हमें यह पक्का करना होगा कि हमारा एक्सटेंशन सिर्फ़ Chrome के उन वर्शन पर काम करे जो सर्विस वर्कर में WebSockets की सुविधा के साथ काम करते हैं. इसके लिए, मेनिफ़ेस्ट में Chrome का कम से कम वर्शन 116 सेट करें:

manifest.json:

{
  ...
  "minimum_chrome_version": "116",
  ...
}

इसके बाद, हर 20 सेकंड में एक कीपअलाइव मैसेज भेजकर, सर्विस वर्कर को चालू रखा जा सकता है. सर्विस वर्कर के WebSocket से कनेक्ट होने के बाद, कीपअलाइव की सुविधा शुरू हो जाती है. WebSocket के क्लाइंट का यहां दिया गया सैंपल, मैसेज लॉग करता है और onopen इवेंट ट्रिगर होने पर, keepAlive() को कॉल करता है:

service-worker.js

let webSocket = null;

function connect() {
  webSocket = new WebSocket('wss://example.com/ws');

  webSocket.onopen = (event) => {
    console.log('websocket open');
    keepAlive();
  };

  webSocket.onmessage = (event) => {
    console.log(`websocket received message: ${event.data}`);
  };

  webSocket.onclose = (event) => {
    console.log('websocket connection closed');
    webSocket = null;
  };
}

function disconnect() {
  if (webSocket == null) {
    return;
  }
  webSocket.close();
}

keepAlive() में, हम setInterval(...) का इस्तेमाल करके, WebSocket कनेक्शन चालू रहने के दौरान सर्वर को नियमित तौर पर पिंग भेजते हैं:

function keepAlive() {
  const keepAliveIntervalId = setInterval(
    () => {
      if (webSocket) {
        webSocket.send('keepalive');
      } else {
        clearInterval(keepAliveIntervalId);
      }
    },
    // Set the interval to 20 seconds to prevent the service worker from becoming inactive.
    20 * 1000 
  );
}