WindowsモジュールのノードモジュールからクロムエクステンションへのWebSocket接続が自動的に閉じます

Question

私はnpmモジュールと私のクロムエクステンション間の通信にhttps://www.npmjs.com/package/ws npmパッケージを使用します。

接続は開かれていますが、数秒で終了します。

私はトピックを研究し、webSocketサーバーとクライアントの間でメッセージをやり取りして生き続けるべきであることが分かりました。

このメッセージは2秒ごとに送信されますが、接続はまだ終了しています。

興味深いのは、クロムプラグインがイベントを発生させない間は、ノードモジュール側でのみ閉じるイベントが発生することです。ここに私のChromeの拡張機能からのコードは次のとおりです。

function myPlugin() { 
    myPlugin.prototype.socket = false; 
    myPlugin.prototype.isConnected = false; 
    myPlugin.prototype.port = false; 
    myPlugin.prototype.pluginName = "Tab Reloader"; 

    myPlugin.prototype.init(); 
}; 

myPlugin.prototype = { 
    initListeners: function() { 
     chrome.browserAction.onClicked.addListener(function(tab) { 
      if (!this.isConnected) { 
       this.connectToServer(); 
      } else { 
       this.disconnectFromServer(); 
      } 
     }.bind(this)); 
    }, 

    setPort: function() { 
     chrome.storage.sync.get(['port'], function(items) { 
      this.port = items.port || '8001'; 
     }.bind(this)); 
    }, 

    getTabsToReload: function (callback) { 
     var tabsToReload = []; 

     chrome.storage.sync.get(['hostName'], function(items) { 
      if (!items.hostName) { 
       chrome.tabs.query({active: true}, function(tabs) { 
        tabs.forEach(function (tab) { 
         tabsToReload.push(tab); 
        }); 

        callback(tabsToReload); 
       }); 
      } else { 
       chrome.tabs.query({}, function(tabs) { 
        tabs.forEach(function (tab) { 
         if (tab.url.indexOf(items.hostName) != -1) { 
          tabsToReload.push(tab); 
         } 
        }); 

        callback(tabsToReload); 
       }); 
      } 
     }.bind(this)); 
    }, 

    initSocketListeners: function() { 
     var fileExtIndex, 
      fileExt, 
      file; 

     this.socket.onmessage = function (ev) { 
      file = ev.data.toString(); 
      fileExtIndex = file.lastIndexOf('.') + 1; 
      fileExt = file.slice(fileExtIndex), 
      fileNameStandardize = file.replace(/\\/g, '\/'), 
      indexOfLastSeparator = fileNameStandardize.lastIndexOf('/') + 1, 
      fileName = file.slice(indexOfLastSeparator); 

      if (file != 'pong' && file.indexOf('connected to server!!!') == -1) { 
       //do stuff 
      } else { 
       if (file == 'pong') { 
        this.isAlive = true; 
       } 
      } 
     }.bind(this); 

     this.socket.addEventListener('close', function (ev) { 
      console.log('connection Closed') 
      clearInterval(this.aliveInterval); 
      chrome.browserAction.setIcon({ 
       path: { 
        "16": "img/icon_disabled_16.png", 
        "24": "img/icon_disabled_24.png", 
        "32": "img/icon_disabled_32.png" 
       } 
      }); 
      this.isConnected = false; 
     }.bind(this)); 
    }, 

    connectToServer: function() { 
     this.socket = new WebSocket("ws://localhost:" + this.port); 

     this.socket.addEventListener('error', function (ev) { 
      this.isConnected = false; 
      alert('Error connecting to websocket server, make sure it\'s running and port ' + this.port + ' is not occupied by other process'); 
     }.bind(this)); 

     this.socket.addEventListener('open', function (ev) { 
      this.isConnected = true; 
      this.socket.send(this.pluginName + ' connected to server!!!'); 
      this.initSocketListeners(); 
      this.stayConnected(); 
      this.isAlive = true; 
      this.aliveInterval = setInterval(function() { 
       this.checkIfAlive(); 
      }.bind(this), 2500); 

      this.getTabsToReload(function (tabsToReload) { 
       tabsToReload.forEach(function (tab) { 
        chrome.tabs.update(tab.id, {url: tab.url}); 
       }); 
      }); 


      chrome.browserAction.setIcon({ 
       path: { 
        "16": "img/icon_active_16.png", 
        "24": "img/icon_active_24.png", 
        "32": "img/icon_active_32.png" 
       } 
      }); 
     }.bind(this)); 
    }, 

    disconnectFromServer: function() { 
     this.socket.close(); 
    }, 

    stayConnected: function() { 
     setTimeout(function() { 
      this.socket.send('ping'); 

      if (this.isConnected) { 
       this.stayConnected(); 
      } 
     }.bind(this), 1000); 
    }, 

    checkIfAlive: function() { 
     this.isAlive = false; 

     setTimeout(function() { 
      console.log(this.isAlive) 
      if (!this.isAlive) { 
       console.log(this.isAlive) 
       this.disconnectFromServer(); 
      } 
     }.bind(this), 2000); 
    }, 

    init: function() { 
     this.setPort(); 
     this.initListeners(); 
    } 
} 

window.onload = new myPlugin(); 

そしてここでは、私のノードモジュールのコードは次のとおりです。

"use strict"; 

//var WebSocketServer = require('websocketserver'); 
//var WebSocketServer = require("nodejs-websocket") 
var WebSocket = require('ws'); 

class MyModule { 
    constructor(options) { 
     this.options = options; 
     this.server = false; 
     this.pluginName = 'Some'; 
     this.isConnected = false; 
     this.connection = false; 

     this.init(); 

     return this.refreshTab.bind(this); 
    } 

    init() { 
     var port = this.options ? this.options.port : false; 
     this.server = new WebSocket.Server({port: port || 8001}); 

     this.server.on('connection', (websocket) => { 
      console.log('Connection open'); 
      this.websocket = websocket; 
      this.isConnected= true; 

      this.initListeners(); 
     }); 
    } 

    refreshTab(uploadedFiles) { 
     if (this.isConnected) { 
      if (Array.isArray(uploadedFiles)) { 
       uploadedFiles.forEach(function (el) { 
        this.websocket.send(el.toString()); 
       }.bind(this)); 
      } else { 
       this.websocket.send(uploadedFiles ? uploadedFiles.toString() : 'reload'); 
      } 
     } else { 
      console.log('You are not connected to server yet.'); 
     } 
    } 

    initListeners() { 
     this.websocket.on('message', (message) => { 
      if (message == 'ping') { 
       this.websocket.send('pong'); 
      } 
     }); 

     this.websocket.on('close',() => { 
      this.isConnected = false; 
      console.log(this.pluginName + ' connection is closed'); 
     }); 
    } 
}; 

module.exports = MyModule; 

は、事前に 感謝を任意の助けに感謝します。

Answer 1

だから私の問題は、manifest.jsonを

"background": { 
    "scripts": ["js/tab_reloader.js"], 
    "persistent": false 
} 

で実際にした「永続」をfalseに設定して、それはイベントページに私の背景ページを形質転換しました。イベントページは一定時間が経過するとメモリからアンロードされ、接続を強制終了していました。私が "永続的"に設定した後、問題は解決しました。