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

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

बैकग्राउंड

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

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

उदाहरण: WebSocket keepalive

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

manifest.json:

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

इसके बाद, हम हर 20 सेकंड में एक 'रखें' मैसेज भेजकर, सेवा वर्कर को चालू रख सकते हैं. सेवा वर्कर के 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() में हम ऐक्टिव WebSocket कनेक्शन होने पर, सर्वर को नियमित तौर पर पिंग भेजने के लिए 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 
  );
}