在Windows 10中自动从节点模块到Chrome扩展的WebSocket连接关闭

Question

我使用https://www.npmjs.com/package/ws npm包来在我的npm模块和我的Chrome扩展之间进行通信。

连接正在打开，但在几秒钟内关闭。

我研究了这个话题，发现我应该在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，它改变了我的背景页面进入活动页面。一段时间后，事件页面将从内存中卸载，从而导致连接中断。在我将“persistent”设置为true后，问题得到修复。