electron_issues

Posted on 2020-04-21 Edited on 2022-04-24 In 前端技术

停止和退出

app.quit未完全结束进程

在exe执行中未现问题

Cannot find module ‘./src/….’
Github Issue
将文件pattern添加到electron-builder的打包规则中

另外，require import的路径均不区分大小写，configure.ts被活生生编译并打包为Configure.js以及Configure.map.js
import编译成require，找不到configure

无边透明窗体显示时出现闪烁 Issue#10069

该问题是由于webview plugin无法设置透明背景造成的，在BrowserWindow show过程中显示了webview的白色背景，目前的workaround可以延迟页面内容的显示

function showBrowserWindow() {
  win.setOpacity(0);
  win.show();
  setTimeout(() => {
    win.setOpacity(1);
  }, 50);
}

rebuild fail
1
2
gyp ERR! clean error
gyp ERR! stack Error: EPERM: operation not permitted, unlink 'D:\projxxx\node_modules\ref\build\Release\binding.node'
往往是项目文件正在使用中（正在参与其他进程的编译或执行）

oauth2

早先本机应用程序使用嵌入的用户代理(嵌入的web view)进行OAuth授权请求，这种方法有很多缺点，包括主机应用程序
能够复制用户凭据和Cookie，以及需要在每个应用程序中从头进行身份验证的用户。IETF RFC 8252。
使用浏览器被认为更加安全且容易保留认证状态

+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+
|          User Device          |
|                               |
| +--------------------------+  | (5) Authorization  +---------------+
| |                          |  |     Code           |               |
| |        Client App        |---------------------->|     Token     |
| |                          |<----------------------|    Endpoint   |
| +--------------------------+  | (6) Access Token,  |               |
|   |             ^             |     Refresh Token  +---------------+
|   |             |             |
|   |             |             |
|   | (1)         | (4)         |
|   | Authorizat- | Authoriza-  |
|   | ion Request | tion Code   |
|   |             |             |
|   |             |             |
|   v             |             |
| +---------------------------+ | (2) Authorization  +---------------+
| |                           | |     Request        |               |
| |          Browser          |--------------------->| Authorization |
| |                           |<---------------------|    Endpoint   |
| +---------------------------+ | (3) Authorization  |               |
|                               |     Code           +---------------+
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+

对于electron，渲染界面提供入口signin, 点击会调用默认浏览器打开登录页，authenticate通过后，重定向过程会将授权码或直接将access token返回到electron, 这个‘返回’过程可以使用自定义协议实现(QQs尚未实践), 亦可实现一个b/s的request & response来完成。
renderUI

signinWithADB2C(){
  const adconfig={
    clientid:'3c744214-bf78-4f92-8173-49863ae8f24b',
    authority:'https://qqstudio.b2clogin.com/qqstudio.onmicrosoft.com/B2C_1_basic_sign_up_and_sign_in',
    redirectUri:'http://localhost:9990/index.html',
    scopes:'3c744214-bf78-4f92-8173-49863ae8f24b openid'
  }
  // make up / assemble authority URL
  const authorityURL = `${adconfig.authority}/oauth2/v2.0/authorize?client_id=${
    adconfig.clientid
  }&redirect_uri=${
    encodeURI(adconfig.redirectUri)
  }&scope=${
    encodeURI(adconfig.scopes)
  }&response_type=id_token%20token&nonce=defaultNonce&prompt=login`;
  // call main process open URL with default browser
  // meanwhile launch a http server
  this.ipcService.send('openinbroweser', authorityURL);
  this.loading = true;
  // listen Logged in message
  this.ipcService.on('access_token', msg => {
    // TODO process user info
  });
}

main 主线程中launch一个http server，负责提供Redirect URI的页面，页面自执行request请求，请求亦由http server响应

....
ipcMain.on('openinbroweser', (event, args) => {
  log('info', 'ipcmain event:openinbroweser');
  if (args) {
    const { shell } = require('electron');
    shell.openExternal(args);
  } else {
    log('error', 'invalid website', args);
  }
});

// launch a http server
var static = require('node-static');
var file = new static.Server(`${__dirname}/public`);
http.createServer(function (request, response) {
  if(request.url==='/index.html'){
    request.addListener('end', function () {
        file.serve(request, response)
    }).resume();
  }else{
    const reg = new RegExp("t=([^&]*)");
    const res= request.url.match(reg);
    const token = res[1];
    console.log('t=',token)
    win.webContents.send('access_token',token)
    response.write("success"); //close default browser
  }
  response.end(); //end the response
}).listen(9990)

redirect page (public/index.html)

<html>
<body>
  <p>serve by csportal</p>
  <script>
    (() => {
      var reg = new RegExp("#access_token=([^&]*)");
      var res = location.href.match(reg);
      var token = unescape(res[1]);
      fetch(`http://localhost:3000?t=${token}`)
        .then(function (response) {
          return response.json();
        })
        .catch(error => console.error('Error:', error))
        .then(response => {console.log('Success:', response);
        window.close();
      });
    })();
  </script>
</body>
</html>

Caution! 需考虑到浏览器将token传递给client的过程，都有被第三方恶意应用占用URL Scheme或者localhost端口截取Access Token的风险。在有”显式”授权流程的方式中，浏览器传递授权码，由client凭授权码换取token，同样无法杜绝第三方拦截。
了解使用带有PKCE(Proof Key for Code Exchange)支持的授权码模式

NSIS宏

Posted on 2020-04-20 Edited on 2022-04-24

NSIS（Nullsoft Scriptable Install System）

Macros are used to insert code at compile time, depending on defines and using the values of the defines. The macro’s commands are inserted at compile time. This allows you to write general code only once and use it a lot of times but with few changes

如上所述，宏的作用是“insert”代码，和通常的编程语言中的#define是一样的。insert的锚点标识是!insertmacro

宏指令

!macro Hello
  DetailPrint "Hello world"
!macroend
 
Section Test
  !insertmacro Hello
SectionEnd

含参宏

!macro Hello What
  DetailPrint "Hello ${What}"
!macroend
 
Section Test
  !insertmacro Hello "World"
  !insertmacro Hello "Tree"
  !insertmacro Hello "Flower"
SectionEnd

node-ffi

Posted on 2020-04-16 Edited on 2022-04-24

node-ffi (Node.js Foreign Function Interface)

install:

npm i ffi

如果install的ffi有问题，可以拉source下来编译
compile:

npm i -g node-gyp
git clone git://github.com/node-ffi/node-ffi.git
cd node-ffi
node-gyp rebuild

Node FFI Tutorial

node-ffi 停止更新当前不支持最新版本node.js，事实上经QQs实践基于node10的electron6无法与之集成构建，Github上有替代方案 node-ffi-napi

websocket

Posted on 2020-04-09 Edited on 2022-04-24

ws: a Node.js WebSocket library

ws is a simple to use, blazing fast, and thoroughly tested WebSocket client and
server implementation.

Passes the quite extensive Autobahn test suite: server,
client.

Note: This module does not work in the browser. The client in the docs is a
reference to a back end with the role of a client in the WebSocket
communication. Browser clients must use the native
WebSocket
object(QQs: browser client should call the Websocket constructor provided by browser, see the example at bottom of this article). To make the same code work seamlessly on Node.js and the browser, you
can use one of the many wrappers available on npm, like
isomorphic-ws.

ws: a Node.js WebSocket library

Protocol support

HyBi drafts 07-12 (Use the option protocolVersion: 8)
HyBi drafts 13-17 (Current default, alternatively option
protocolVersion: 13)

Installing

1	npm install ws

Opt-in for performance and spec compliance

There are 2 optional modules that can be installed along side with the ws
module. These modules are binary addons which improve certain operations.
Prebuilt binaries are available for the most popular platforms so you don’t
necessarily need to have a C++ compiler installed on your machine.

npm install --save-optional bufferutil: Allows to efficiently perform
operations such as masking and unmasking the data payload of the WebSocket
frames.
npm install --save-optional utf-8-validate: Allows to efficiently check if a
message contains valid UTF-8 as required by the spec.

API docs

See /doc/ws.md for Node.js-like documentation of ws classes and
utility functions.

WebSocket compression

ws supports the permessage-deflate extension which enables
the client and server to negotiate a compression algorithm and its parameters,
and then selectively apply it to the data payloads of each WebSocket message.

The extension is disabled by default on the server and enabled by default on the
client. It adds a significant overhead in terms of performance and memory
consumption so we suggest to enable it only if it is really needed.

Note that Node.js has a variety of issues with high-performance compression,
where increased concurrency, especially on Linux, can lead to catastrophic
memory fragmentation and slow performance. If you intend to use
permessage-deflate in production, it is worthwhile to set up a test
representative of your workload and ensure Node.js/zlib will handle it with
acceptable performance and memory usage.

Tuning of permessage-deflate can be done via the options defined below. You can
also use zlibDeflateOptions and zlibInflateOptions, which is passed directly
into the creation of [raw deflate/inflate streams][node-zlib-deflaterawdocs].

See [the docs][ws-server-options] for more options.

const WebSocket = require('ws');

const wss = new WebSocket.Server({
  port: 8080,
  perMessageDeflate: {
    zlibDeflateOptions: {
      // See zlib defaults.
      chunkSize: 1024,
      memLevel: 7,
      level: 3
    },
    zlibInflateOptions: {
      chunkSize: 10 * 1024
    },
    // Other options settable:
    clientNoContextTakeover: true, // Defaults to negotiated value.
    serverNoContextTakeover: true, // Defaults to negotiated value.
    serverMaxWindowBits: 10, // Defaults to negotiated value.
    // Below options specified as default values.
    concurrencyLimit: 10, // Limits zlib concurrency for perf.
    threshold: 1024 // Size (in bytes) below which messages
    // should not be compressed.
  }
});

The client will only use the extension if it is supported and enabled on the
server. To always disable the extension on the client set the
perMessageDeflate option to false.

const WebSocket = require('ws');

const ws = new WebSocket('ws://www.host.com/path', {
  perMessageDeflate: false
});

Usage examples

Sending and receiving text data

const WebSocket = require('ws');

const ws = new WebSocket('ws://www.host.com/path');

ws.on('open', function open() {
  ws.send('something');
});

ws.on('message', function incoming(data) {
  console.log(data);
});

Sending binary data

const WebSocket = require('ws');

const ws = new WebSocket('ws://www.host.com/path');

ws.on('open', function open() {
  const array = new Float32Array(5);

  for (var i = 0; i < array.length; ++i) {
    array[i] = i / 2;
  }

  ws.send(array);
});

Simple server

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('something');
});

External HTTP/S server

const fs = require('fs');
const https = require('https');
const WebSocket = require('ws');

const server = https.createServer({
  cert: fs.readFileSync('/path/to/cert.pem'),
  key: fs.readFileSync('/path/to/key.pem')
});
const wss = new WebSocket.Server({ server });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('something');
});

server.listen(8080);

const http = require('http');
const WebSocket = require('ws');
const url = require('url');

const server = http.createServer();
const wss1 = new WebSocket.Server({ noServer: true });
const wss2 = new WebSocket.Server({ noServer: true });

wss1.on('connection', function connection(ws) {
  // ...
});

wss2.on('connection', function connection(ws) {
  // ...
});

server.on('upgrade', function upgrade(request, socket, head) {
  const pathname = url.parse(request.url).pathname;

  if (pathname === '/foo') {
    wss1.handleUpgrade(request, socket, head, function done(ws) {
      wss1.emit('connection', ws, request);
    });
  } else if (pathname === '/bar') {
    wss2.handleUpgrade(request, socket, head, function done(ws) {
      wss2.emit('connection', ws, request);
    });
  } else {
    socket.destroy();
  }
});

server.listen(8080);

Client authentication

const http = require('http');
const WebSocket = require('ws');

const server = http.createServer();
const wss = new WebSocket.Server({ noServer: true });

wss.on('connection', function connection(ws, request, client) {
  ws.on('message', function message(msg) {
    console.log(`Received message ${msg} from user ${client}`);
  });
});

server.on('upgrade', function upgrade(request, socket, head) {
  authenticate(request, (err, client) => {
    if (err || !client) {
      socket.destroy();
      return;
    }

    wss.handleUpgrade(request, socket, head, function done(ws) {
      wss.emit('connection', ws, request, client);
    });
  });
});

server.listen(8080);

Also see the provided example using express-session.

Server broadcast

A client WebSocket broadcasting to all connected WebSocket clients, including
itself.

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(data) {
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
});

A client WebSocket broadcasting to every other connected WebSocket clients,
excluding itself.

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(data) {
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
});

echo.websocket.org demo

const WebSocket = require('ws');

const ws = new WebSocket('wss://echo.websocket.org/', {
  origin: 'https://websocket.org'
});

ws.on('open', function open() {
  console.log('connected');
  ws.send(Date.now());
});

ws.on('close', function close() {
  console.log('disconnected');
});

ws.on('message', function incoming(data) {
  console.log(`Roundtrip time: ${Date.now() - data} ms`);

  setTimeout(function timeout() {
    ws.send(Date.now());
  }, 500);
});

Use the Node.js streams API

const WebSocket = require('ws');

const ws = new WebSocket('wss://echo.websocket.org/', {
  origin: 'https://websocket.org'
});

const duplex = WebSocket.createWebSocketStream(ws, { encoding: 'utf8' });

duplex.pipe(process.stdout);
process.stdin.pipe(duplex);

Other examples

For a full example with a browser client communicating with a ws server, see the
examples folder.

Otherwise, see the test cases.

FAQ

How to get the IP address of the client?

The remote IP address can be obtained from the raw socket.

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws, req) {
  const ip = req.connection.remoteAddress;
});

When the server runs behind a proxy like NGINX, the de-facto standard is to use
the X-Forwarded-For header.

1
2
3

wss.on('connection', function connection(ws, req) {
  const ip = req.headers['x-forwarded-for'].split(/\s*,\s*/)[0];
});

How to detect and close broken connections?

Sometimes the link between the server and the client can be interrupted in a way
that keeps both the server and the client unaware of the broken state of the
connection (e.g. when pulling the cord).

In these cases ping messages can be used as a means to verify that the remote
endpoint is still responsive.

const WebSocket = require('ws');

function noop() {}

function heartbeat() {
  this.isAlive = true;
}

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.isAlive = true;
  ws.on('pong', heartbeat);
});

const interval = setInterval(function ping() {
  wss.clients.forEach(function each(ws) {
    if (ws.isAlive === false) return ws.terminate();

    ws.isAlive = false;
    ws.ping(noop);
  });
}, 30000);

wss.on('close', function close() {
  clearInterval(interval);
});

Pong messages are automatically sent in response to ping messages as required by
the spec.

Just like the server example above your clients might as well lose connection
without knowing it. You might want to add a ping listener on your clients to
prevent that. A simple implementation would be:

const WebSocket = require('ws');

function heartbeat() {
  clearTimeout(this.pingTimeout);

  // Use `WebSocket#terminate()`, which immediately destroys the connection,
  // instead of `WebSocket#close()`, which waits for the close timer.
  // Delay should be equal to the interval at which your server
  // sends out pings plus a conservative assumption of the latency.
  this.pingTimeout = setTimeout(() => {
    this.terminate();
  }, 30000 + 1000);
}

const client = new WebSocket('wss://echo.websocket.org/');

client.on('open', heartbeat);
client.on('ping', heartbeat);
client.on('close', function clear() {
  clearTimeout(this.pingTimeout);
});

How to connect via a proxy?

Use a custom http.Agent implementation like https-proxy-agent or
socks-proxy-agent.

Changelog

We’re using the GitHub releases for changelog entries.

License

MIT

[node-zlib-deflaterawdocs]:
https://nodejs.org/api/zlib.html#zlib_zlib_createdeflateraw_options

[ws-server-options]:
https://github.com/websockets/ws/blob/master/doc/ws.md#new-websocketserveroptions-callback

Browser Client

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

GitFlow

Posted on 2020-04-09 Edited on 2022-04-24

Branch

master
dev
feature/xxxx
release/1.x.x
hotfix/1.x.x
Tag
hotfix 合并到master 以及 dev
1
2
git checkout master
git merge --no-ff hotfix/1.x.x
关于QA的讨论
曾认为feature代码在开发确认功能，过静态检查、单元测试、code review后合并至dev，即feature所在的生命周期由开发团队维护，从dev做release交QA进行全量测试
实际上在本团队，feature的DOD(defination of done)规定在合并到dev前需要通过QA测试，对合并后再发的’版本’也肯定要测的。
对于本团队的实践，是否存在QA过早介入，测试是否重复的问题，fcc大佬如是说：多数情况下new feature的业务/逻辑上的确认只能人工进行，这里的人是QA的人是合理的，该‘确认’过程不包含在code review(主要针对编码质量)中，若无QA的确认，则存在合并后被QA拒绝的风险，而拆解合并后的代码可能代价颇高。
另：了解gitlab

jenkins参数化

Posted on 2020-04-09 Edited on 2022-04-24 In 工具

使用Git Parameter简化GitFlow工作方式的持续集成

安装Git Parameter Plugin
设置 Jenkins Job ‘this project is parameterized’
设置变量BRANCH_NAME，变量类型为Branch or Tag, 默认为master
设置 Source Code Management - Branches to build 为 $BRANCH_NAME

完成后可使用该项目的build with Parameters功能，即选择特定分支进行构建

CAS

Posted on 2020-04-07 Edited on 2022-04-24

Git

Posted on 2020-04-07 Edited on 2023-04-14 In 工具

常规

git config --global user.email "QQs@xxxx.xxx"
git config --global user.name "QQs"
git init
git remote add origin git@xxxx.xxx:projectX.git
// 添加远程主机命名为origin
git pull origin master:local
// 拉取origin上的master分支 命名为local
git add .
git commit -m "blablabla"
git push origin master
// 将修改推送到origin上的master分支上
// clone and rename 
git clone git@xxxxxx YourFolderName

忽略本地修改拉取远程分支

1 2	git fetch --all git reset --hard origin/master

可以认为git pull是git fetch和git merge两个步骤的结合

git pull <远程主机名> <远程分支名>:<本地分支名>

//取回远程主机某个分支的更新，再与本地的指定分支合并。

git fetch origin master:temp 
//在本地新建一个temp分支，并将远程origin仓库的master分支代码下载到本地temp分支
git diff tmp 
//来比较本地代码与刚刚从远程下载下来的代码的区别
git merge tmp
//合并temp分支到本地的master分支
git branch -d temp
//删除temp分支

回退

1	git reset --hard cd8462xxxx

即将HEAD游标指向到之前的一次commit

部分检出

1 2	git config core.sparsecheckout true echo /db/* >> .git/info/sparse-checkout

reset revert

git reset --soft <commit> // 重置到<commit>版本，修改内容放入缓存区（unstage）
git reset --hard <commit> // 重置到<commit>版本，修改内容永久删除

git revert <commit-last> .. <commit-somewhere> // 提交一个记录来撤销所罗列出的<commit>

rebase

git checkout feature/new_featueXXX
git rebase develop
// resolve merge conflict
git rebase --continue

1	git rebase -i <start-commit> <end-commit> //(start-commit, end-commit] 前开后闭区间，合并到当前分支，默认 end-commit 为当前 HEAD

把 develop rebase 进 feature/new_featueXXX 分支，develop为上游(Upstream), checkout 的new_featueXXX 分支为Currnet Branch.

每将一次develop的commit rebase进feature 都合并为一个中间版本commit，然后 git rebase —continue。实际中，rebase过程中可能产生冲突，如果两条分支都含有多次commit，且修改内容相互渗透，产生很多冲突，continue时是个中间版本很难保证复合变基的逻辑吧那将使这种”规范”失去意义索性直接merge算了

rebase的取消
rebase完成后没有与该操作对应的commit记录，即不改变前后commit的个数（只调整顺序）但是git本身是有所有操作的记录的，因此任何操作都可以回退, 使用git reflog显示这些记录并选择标记头进行回退

1
2
3

git reflog
---显示action历史---
git reset --hard HEAD{10}

git rebase 的撤销

repository 迁移

git clone --bare git@old-repo.git 
cd old-repo
git remote add bitbucket git@bitbucket-repo.git
git push --all bitbucket
git push --tags bitbucket

stale branches 和 remote tracking branch

remote tracking branch是一个引用(reference),表示是远端分支的状态，不应被修改

stale branch是远端已经移除的remote tracking branchStackOverflow:What is a “stale” git branch?

git log

退出日志文本是按q，同vim

查看所有分支对当前目录的修改，并显示所修改文件:
git log —stat —graph —all

stage

git status
git add/rm …
git reset ./temp.txt
git checkout — …

tag

标签tag用于标记一个commit

1	git tag -a v1.0.3 -m "bump version to v1.0.3"

使用git tag命令查看所有标签，使用git checkout检出指定标签版本
移除尚未推送到远端的标签:

1	git tag -d v1.0.3

form-data 以及 basic auth

Posted on 2020-04-03 Edited on 2022-04-24

Postman

Node.js Server

const express = require('express');
const app = express();
var multer = require('multer');
var upload = multer();

// Parse URL-encoded bodies (as sent by HTML forms)
app.use(express.urlencoded());

// for parsing multipart/form-data
app.use(upload.array()); 
app.use(express.static('public'));
app.post('/', function(request, response){
    console.log(request.body);
    response.json({res:'ok',data:request.body})
});

const listener = app.listen(process.env.PORT || 3000, function () {
console.log('Your app is listening on port ' + listener.address().port);
});

Node.js client

const http = require('http')
const FormData = require('form-data')

function btoa(str) {
    return Buffer.from(str).toString('base64')
}
const formData = new FormData();
formData.append('username', 'QQs');
formData.append('password', btoa('*****'));
const authorizationData = 'Basic ' + btoa('authorizationID:authorizationPassword');
const options = {
    hostname: 'localhost',
    port: 3000,
    path: '',
    method: 'POST',
    headers: formData.getHeaders(),
    auth: authorizationData
};
const req = http.request(options, (res) => {
    res.setEncoding('utf8');
    res.on('data', (chunk) => {
        console.log(`BODY: ${chunk}`);
    });
    res.on('end', () => {
        console.log('No more data in response.');
    });
});
req.on('error', (e) => {
    console.error(`problem with request: ${e.message}`);
});
formData.pipe(req);

Angular httpclient

const formData = new FormData();
formData.append('username', 'QQs');
formData.append('password', btoa('*****'));
const postUrl = 'http://loacalhost:3000/';
const authorizationData = 'Basic ' + btoa('authorizationID:authorizationPassword');
const headers = new HttpHeaders({
    'Authorization': authorizationData
});
return this.http.post(postUrl, postData, { headers: headers }).pipe(
    map(response => {

    })
)

html form

<form action="http://authorizationID:authorizationPassword@localhost:3000/" method="post" enctype="multipart/form-data">
    <input type="text" name="username" id="username">
    <input type="text" name="password" id="password">
    <input type="submit" value="Post">
</form>

Electron 生命周期

Posted on 2020-03-31 Edited on 2022-04-24