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

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

बैकग्राउंड

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

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

उदाहरण: WebSocket कीपअलाइव

सबसे पहले हमें यह पक्का करना होगा कि हमारा एक्सटेंशन सिर्फ़ Chrome वर्शन पर चलता हो, जो मेनिफ़ेस्ट में Chrome के कम से कम वर्शन को 116 पर सेट करके, सर्विस वर्कर में WebSockets का समर्थन करता हो:

manifest.json:

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

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

service-worker.js (सर्विस-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();
}

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

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 
  );
}