Question

我正在使用electron.js和xmpp.js的组合来创建自己的客户。我的主要项目由以下两个文件组成：

将电子束缚在index.js上：

const {app,BrowserWindow,ipcMain,dialog}=require('electron');
// const app=electron.app;
// const BrowserWindow=electron.BrowserWindow;

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

const createWindow = () => {
  console.log("Message");
  // Create the browser window.
  mainWindow = new BrowserWindow();

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/ui/index.html`);
  var env = process.env.NODE_ENV || 'production';

  if(env==='dev'){
    // Open the DevTools.
    mainWindow.webContents.openDevTools();
  }

  // Emitted when the window is closed.
  mainWindow.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });

  mainWindow.maximize();

  const xmpp=require('./xmpp.js');
  console.log(xmpp)
  xmpp.xmppCli(mainWindow,ipcMain,dialog);
};

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  }
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and import them here.

并使用此文件xmpp.js处理它：

const {client, xml, jid} = require('@xmpp/client')

var clientInstance=null;

console.log('xmpp.js loaded')

const initXmpp= function(xmpp){

  xmpp.on('error', err => {
    console.error("Error occured",err.toString())
    dialog.showErrorBox('Internal Error',err.toString())
  })

  xmpp.on('offline', () => {
    console.log('', 'offline')
  })

  xmpp.on('online', async address => {
    dialog.showMessageBox({'type':'info','message':"Online as:"+address.toString()})
  })

  xmpp.on('stanza', stanza => {
    console.log('⮈', stanza.toString())
    xmpp.stop()
  })

  process.on('unhandledRejection', function (reason, p) {
    console.log('Possibly Unhandled Rejection at: Promise ', p, ' reason: ', reason)
  })

  xmpp.start()
}

module.exports.xmppCli=function(mainWindow,ipcMain,dialog){


  ipcMain.on('login',(event,params)=>{
    let jidVal=jid(params.username);
    params.server="xmpp://"+params.server
    console.log(jidVal.getLocal(),jidVal.getDomain(),params.server)

    if(!clientInstance){
      console.log("Client Works");
      try{
          clientInstance=new client({
            'service':params.server,
            'domain': jidVal.getDomain(),
            'username':jidVal.getLocal(),
            'password':params.password,
          })
          initXmpp(clientInstance)
      } catch(e) {
        console.error('Internal Error',e.message)
        console.error(e.stack)
        clientInstance=null;
      }
    }

  });
}

我的用户界面也由index.html组成：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Login Page</title>

    <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../node_modules/roboto-fontface/css/roboto/roboto-fontface.css">
    <style>
      html, body, .container-fluid {
          height: 100%;
          font-family: 'Roboto', sans-serif;
      }

      #form_wrapper{
          border:1px solid;
          border-radius: 10px;
      }
    </style>

    <script>window.$ = window.jQuery = require('../../node_modules/jquery/dist/jquery.min.js');</script>
    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./index_renderer.js"></script>
  </head>
  <body class="bg-secondary">
    <div class="container-fluid d-flex justify-content-center align-items-center">
      <div id="form_wrapper" class="p-2" style="background-color:white;">
          <h1 class="text-center">XMPP KEY AGREEMENT CLI</h1>
          <form id="loginForm">
            <div class="form-group">
              <label for="server">XMPP Server</label>
              <input id="server" class="form-control" type="text" name="server" placeholder="eg. example.com" required>
            </div>
            <div class="form-group">
              <label for="username">Username</label>
              <input id="username" class="form-control" type="text" name="username" placeholder="eg. user@example.com" required>
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input id="password" class="form-control" type="text" name="password" placeholder="Type your password here" required>
            </div>
            <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
          </form>
      </div>
    </div>
  </body>
</html>

使用以下渲染器：

$(document).ready(function(){
  const ipcRenderer = require('electron').ipcRenderer;

  $("#loginForm").on('submit',function(e){
    e.preventDefault();
    console.log("Form Submitted");
    //https://stackoverflow.com/a/29000408/4706711
    let data=$(this).serializeArray().reduce(function(a, x) { a[x.name] = x.value; return a; }, {});
    ipcRenderer.send('login',data)
  })

})

但是我的问题是，当我使用自签名证书启动自己的本地opefireserver时。因此，我得到一个神秘的错误，显示如下：

所以我的问题是：

如何调试这些类型的错误？我的意思是我无法找到此错误的位置。
我如何手动告诉电子或xmpp.js接受自签名证书>

我试图通过更改手动找出此错误的产生位置：

  xmpp.on('error', err => {
    console.error("Error occured",err.toString())
    dialog.showErrorBox('Internal Error',err.toString())
  })

对此：

  xmpp.on('error', err => {
    console.error("Error occured",err.toString())
  })

仍然出现奇怪的错误。

Answer 1

当发生连接错误时，@xmpp/client库似乎缺少api调用，如以下示例所示：

const {client, xml, jid} = require('@xmpp/client')

const initXmpp=function(xmpp){

  xmpp.on('error', err => {
    console.error("Error occured",err.toString())
    // dialog.showErrorBox('Internal Error',err.toString())
  })

  xmpp.on('offline', () => {
    console.log('', 'offline')
  })

  xmpp.on('online', async address => {
    dialog.showMessageBox({'type':'info','message':"Online as:"+address.toString()})
  })

  xmpp.on('stanza', stanza => {
    console.log('⮈', stanza.toString())
    xmpp.stop()
  })

  process.on('unhandledRejection', function (reason, p) {
    console.error('Possibly Unhandled Rejection at: Promise ', p, ' reason: ', reason)
  })

  try{
    xmpp.start()
  } catch(e) {
    console.error(e.message)
  }
}

try{
  clientInstance=new client({
    'service':"xmpp://0.0.0.0:5222",
    'domain': "example.com",
    'username':"admin",
    'password':"admin",
  });

  initXmpp(clientInstance);
} catch(e) {
  console.error(e);
}

我收到以下错误：

 events.js:183
      throw er; // Unhandled 'error' event
      ^
Error: self signed certificate
    at TLSSocket.<anonymous> (_tls_wrap.js:1105:38)
    at emitNone (events.js:106:13)
    at TLSSocket.emit (events.js:208:7)
    at TLSSocket._finishInit (_tls_wrap.js:639:8)
    at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:469:38)

并且没有提供处理方法，这是因为SSL / TLS连接由nodejs本身处理，因此唯一的解决方案可以在此gthub answer上找到。

基于上述解决方案，实际上结合了NODE_ENV环境变量，我在index.js上放置了以下代码段：

if(env==='dev' || env=='debug'){
  process.env.NODE_TLS_REJECT_UNAUTHORIZED=0;
}

此外，如果使用this，我建议将其分叉并修改为使用最新版本的ubuntu（或什至更稳定的docker映像）和更高版本的openfire，例如this Guy。

Electron + xmpp.js：如何调试SSL自签名错误消息？

1 个答案: