白一梓

白一梓 查看完整档案

北京编辑齐鲁工业大学  |  计算机科学与技术 编辑一起作业网  |  Node工程师 编辑 blog.whyun.com 编辑
编辑

写css的人中C语言写的最好的;写c语言的人中css写的最好的。

个人动态

白一梓 发布了文章 · 2019-10-10

vipkid 的 rtc 使用介绍

跨机房应用之间互联,使用专线进行,在专线不可用的情况下可以回退使用公网。
vipkid 自研的 VDR rtc 比公版的腾讯云要更好的适应网络抖动,在抖动在 20-30% 的时候,对比明显。
慢速网络下,冗余增加一倍,降码率。

查看原文

赞 0 收藏 0 评论 0

白一梓 收藏了文章 · 2019-04-20

实现electron-bridge

electron-bridge

github链接 求star

Motivition

  • 如果想一套代码同时能跑在web环境和electron环境中,就需要在代码中先判断环境,再分别写对应的逻辑。每次写到electron环境下的逻辑,又要区分渲染进程和主进程,因为有些事只能渲染进程做,有些事只能主进程做。所以,我希望能将这些抽象出来,某个方法,只能在electron环境下被调用,并且不需要关心在什么进程下,web只要判断环境,调不同的方法就行,不需要关心和electron的交互。

  • 如果,我需要快速的开启另一个electron的项目,我希望我web里的代码能轻易的获取到electron的能力,而不是重新开始编写,这个时候,我希望有一层对electron能力的封装。

  • 团队内有些成员对web很熟悉,但是对electron不是很了解,如果加入项目,就需要去学习electron的知识,这个时候,如果能有一个库列出了所有electron能做的事,你只需要调用,无需关心它是怎么实现的,能很大程度提高开发效率。

Goals

  1. 给web注入适当的环境变量,让web知道自己的环境

  2. 给web注入一个对象,包含所有electron能做的事(包括主进程、渲染进程)

How to do

在load web页面的时候,有个webPreferences配置,我们在这里预加载一个js文件,就是electron-bridge.js

这个文件拥有node的能力,并且它是属于渲染进程的,所以它能做渲染进程里的事, 也能跟主进程通讯。

st=>start: start
op0=>operation: index.js去调用bridge.js暴露出来的方法, ElectronBridge.setFullScreen()
op1=>operation: bridge.js通过ipcRender告诉ipacMain做什么,并把回调暂存起来
op2=>operation:  主进程做完告诉bridge.js做完了,发送数据
op4=>operation:  bridge.js带上收到的数据,执行暂存的回调
op3=>operation:  bridge.js直接做完,触发回调
cond=>condition: bridge.js判断是不是主进程做的事?
e=>end: end

st->op0->cond
cond(yes)->op1->op2->op4->e
cond(no)->op3->e

Let's do it

给web注入适当的环境变量

加载bridge.js

win = new BrowserWindow({
  width: 800,
  height: 600,
  show: false,
  webPreferences: {
    preload: path.join(__dirname, '../bridge/bridge.js'),
    plugins: true
  }
});

当我们启动electron的时候,主进程开始通知这个渲染进程,给渲染进程注入主进程的环境变量,再有渲染进程挂载到window对象上,这样web就能获取自己的环境信息

//bridge.js

const {ipcRenderer} = require('electron');

//监听主进程,设置环境变量
ipcRenderer.on('set-env', (event, msg) => {
  for (const key in msg) {
    window[key] = msg[key];
  }
});
//main.js
const {BrowserWindow, ipcMain} = require('electron');

const win = new BrowserWindow({...});

//获取创建好的window对象发送消息
win.webContents.on('did-finish-load', function() {
  win.webContents.send('set-env', { //设置web环境变量
    __ELECTRON__: true,
    __DEV__: true,
    __PRO__: false,
    __SERVER__: false,
    windowLoaded: true
  });
});

通过bridge.js 来调用主进程的方法

我们通过ipcRender给主进程发送一系列消息,包括做什么事情(eventName), 根据哪些参数(params),对外根据不同的事件暴露不同的方法,接受参数,和回调函数。

  • 先将回调函数放在 eventsMap上暂存起来,因为ipcRender不能发送函数,所有的信息会被序列化后再发送给主进程,所以,我们先生成一个时间戳,让 eventsMap[时间戳] = cb 并把时间戳一同发送过去,等一会儿,主进程通知渲染进程调用哪个时间戳函数

  • 通过'resist-event'频道, 发送参数,包括 eventName、params、timeStamp

//bridge.js
const {ipcRenderer} = require('electron');

const eventsMap = {};

//调用原生事件
function registEvent(eventName, params, cb) {
  //允许只传两个数据
  if (!cb) {
    cb = params;
    params = {};
  }

  //如果win还未ready
  if (!windowLoaded) {
    cb(new Error('window not ready'));
    return;
  }

  const stamp = String(new Date().getTime());
  const opts = Object.assign({eventName}, params, {stamp});
  eventsMap[stamp] = cb; //注册唯一函数
  ipcRenderer.send('regist-event', opts); //发送事件
}

//进入全屏
function setFullScreen(cb) {
  registEvent(SET_FULL_SCREEN, cb);
}

window.ElectronBridge = {
  setFullScreen
};

主进程监听‘resist-event’频道,做对应的事。我们会将所有主进程能做的事,放在eventsList对象下,当接受到渲染进程的通知,去eventsList找有没有对应的事能做,有,做完通过promise,或者通过回调函数,去在‘fire-event’频道通知,渲染进程,事情已经做完,并把数据传回去,包括 stamp(之前渲染进程传过来的,现在传回去,告诉渲染进程执行哪个回调函数) 、 payload(返回数据) 、err (错误信息)

//main.js
const {ipcMain} = require('electron');

//监听对原生的调用
ipcMain.on('regist-event', (event, arg) => {
  const nativeEvent = eventsList[arg.eventName];
  if (nativeEvent) {
    const result =  nativeEvent(app, win, arg.params);
    if (isPromise(result)) {
      result.then(res => {
        event.sender.send('fire-event', {
          stamp: arg.stamp,
          payload: res
        });
      }).catch(err => {
        event.sender.send('fire-event', {
          stamp: arg.stamp,
          err
        });
      });
    } else {
      event.sender.send('fire-event', {
        stamp: arg.stamp,
        payload: result
      });
    }
  } else {
    event.sender.send('fire-event', {
      stamp: arg.stamp,
      err: new Error('event not support')
    });
  }
});

渲染进程监听‘fire-event’执行对应时间戳回调函数,并把主进程传过来的数据传给回调函数。触发完成后,删掉该回调函数。

//bridge.js

//触发事件回调
ipcRenderer.on('fire-event', (event, arg) => {
  const cb = eventsMap[arg.stamp];
  if (cb) {
    if (arg.err) {
      cb(arg.err, arg.payload);
    } else {
      cb(false, arg.payload);
    }
    delete eventsMap[arg.stamp];
  }
});

如果是渲染进程能做的事,就不需要再和主进程通讯,可以直接完成触发回调

//bridge.js
const {webFrame} = require('electron');
//设置缩放比,只能在渲染进程中实现
function setZoomFactor(params, cb) {
  webFrame.setZoomFactor(params);
  cb && cb();
}

window.ElectronBridge = {
  setZoomFactor
};

最终web中的js代码去调用bridge.js暴露出来的方法

// ../web/index.js

$btn1.addEventListener('click', function() {
  if (__ELECTRON__ && ElectronBridge) { //electron 环境
    ElectronBridge.setFullScreen((err) => {
      if (err) return;
      console.log('done');
    });
  } else { //web 环境
    alert('不能设置全屏')
    //do something else
  }
});
查看原文

白一梓 赞了文章 · 2019-04-20

实现electron-bridge

electron-bridge

github链接 求star

Motivition

  • 如果想一套代码同时能跑在web环境和electron环境中,就需要在代码中先判断环境,再分别写对应的逻辑。每次写到electron环境下的逻辑,又要区分渲染进程和主进程,因为有些事只能渲染进程做,有些事只能主进程做。所以,我希望能将这些抽象出来,某个方法,只能在electron环境下被调用,并且不需要关心在什么进程下,web只要判断环境,调不同的方法就行,不需要关心和electron的交互。

  • 如果,我需要快速的开启另一个electron的项目,我希望我web里的代码能轻易的获取到electron的能力,而不是重新开始编写,这个时候,我希望有一层对electron能力的封装。

  • 团队内有些成员对web很熟悉,但是对electron不是很了解,如果加入项目,就需要去学习electron的知识,这个时候,如果能有一个库列出了所有electron能做的事,你只需要调用,无需关心它是怎么实现的,能很大程度提高开发效率。

Goals

  1. 给web注入适当的环境变量,让web知道自己的环境

  2. 给web注入一个对象,包含所有electron能做的事(包括主进程、渲染进程)

How to do

在load web页面的时候,有个webPreferences配置,我们在这里预加载一个js文件,就是electron-bridge.js

这个文件拥有node的能力,并且它是属于渲染进程的,所以它能做渲染进程里的事, 也能跟主进程通讯。

st=>start: start
op0=>operation: index.js去调用bridge.js暴露出来的方法, ElectronBridge.setFullScreen()
op1=>operation: bridge.js通过ipcRender告诉ipacMain做什么,并把回调暂存起来
op2=>operation:  主进程做完告诉bridge.js做完了,发送数据
op4=>operation:  bridge.js带上收到的数据,执行暂存的回调
op3=>operation:  bridge.js直接做完,触发回调
cond=>condition: bridge.js判断是不是主进程做的事?
e=>end: end

st->op0->cond
cond(yes)->op1->op2->op4->e
cond(no)->op3->e

Let's do it

给web注入适当的环境变量

加载bridge.js

win = new BrowserWindow({
  width: 800,
  height: 600,
  show: false,
  webPreferences: {
    preload: path.join(__dirname, '../bridge/bridge.js'),
    plugins: true
  }
});

当我们启动electron的时候,主进程开始通知这个渲染进程,给渲染进程注入主进程的环境变量,再有渲染进程挂载到window对象上,这样web就能获取自己的环境信息

//bridge.js

const {ipcRenderer} = require('electron');

//监听主进程,设置环境变量
ipcRenderer.on('set-env', (event, msg) => {
  for (const key in msg) {
    window[key] = msg[key];
  }
});
//main.js
const {BrowserWindow, ipcMain} = require('electron');

const win = new BrowserWindow({...});

//获取创建好的window对象发送消息
win.webContents.on('did-finish-load', function() {
  win.webContents.send('set-env', { //设置web环境变量
    __ELECTRON__: true,
    __DEV__: true,
    __PRO__: false,
    __SERVER__: false,
    windowLoaded: true
  });
});

通过bridge.js 来调用主进程的方法

我们通过ipcRender给主进程发送一系列消息,包括做什么事情(eventName), 根据哪些参数(params),对外根据不同的事件暴露不同的方法,接受参数,和回调函数。

  • 先将回调函数放在 eventsMap上暂存起来,因为ipcRender不能发送函数,所有的信息会被序列化后再发送给主进程,所以,我们先生成一个时间戳,让 eventsMap[时间戳] = cb 并把时间戳一同发送过去,等一会儿,主进程通知渲染进程调用哪个时间戳函数

  • 通过'resist-event'频道, 发送参数,包括 eventName、params、timeStamp

//bridge.js
const {ipcRenderer} = require('electron');

const eventsMap = {};

//调用原生事件
function registEvent(eventName, params, cb) {
  //允许只传两个数据
  if (!cb) {
    cb = params;
    params = {};
  }

  //如果win还未ready
  if (!windowLoaded) {
    cb(new Error('window not ready'));
    return;
  }

  const stamp = String(new Date().getTime());
  const opts = Object.assign({eventName}, params, {stamp});
  eventsMap[stamp] = cb; //注册唯一函数
  ipcRenderer.send('regist-event', opts); //发送事件
}

//进入全屏
function setFullScreen(cb) {
  registEvent(SET_FULL_SCREEN, cb);
}

window.ElectronBridge = {
  setFullScreen
};

主进程监听‘resist-event’频道,做对应的事。我们会将所有主进程能做的事,放在eventsList对象下,当接受到渲染进程的通知,去eventsList找有没有对应的事能做,有,做完通过promise,或者通过回调函数,去在‘fire-event’频道通知,渲染进程,事情已经做完,并把数据传回去,包括 stamp(之前渲染进程传过来的,现在传回去,告诉渲染进程执行哪个回调函数) 、 payload(返回数据) 、err (错误信息)

//main.js
const {ipcMain} = require('electron');

//监听对原生的调用
ipcMain.on('regist-event', (event, arg) => {
  const nativeEvent = eventsList[arg.eventName];
  if (nativeEvent) {
    const result =  nativeEvent(app, win, arg.params);
    if (isPromise(result)) {
      result.then(res => {
        event.sender.send('fire-event', {
          stamp: arg.stamp,
          payload: res
        });
      }).catch(err => {
        event.sender.send('fire-event', {
          stamp: arg.stamp,
          err
        });
      });
    } else {
      event.sender.send('fire-event', {
        stamp: arg.stamp,
        payload: result
      });
    }
  } else {
    event.sender.send('fire-event', {
      stamp: arg.stamp,
      err: new Error('event not support')
    });
  }
});

渲染进程监听‘fire-event’执行对应时间戳回调函数,并把主进程传过来的数据传给回调函数。触发完成后,删掉该回调函数。

//bridge.js

//触发事件回调
ipcRenderer.on('fire-event', (event, arg) => {
  const cb = eventsMap[arg.stamp];
  if (cb) {
    if (arg.err) {
      cb(arg.err, arg.payload);
    } else {
      cb(false, arg.payload);
    }
    delete eventsMap[arg.stamp];
  }
});

如果是渲染进程能做的事,就不需要再和主进程通讯,可以直接完成触发回调

//bridge.js
const {webFrame} = require('electron');
//设置缩放比,只能在渲染进程中实现
function setZoomFactor(params, cb) {
  webFrame.setZoomFactor(params);
  cb && cb();
}

window.ElectronBridge = {
  setZoomFactor
};

最终web中的js代码去调用bridge.js暴露出来的方法

// ../web/index.js

$btn1.addEventListener('click', function() {
  if (__ELECTRON__ && ElectronBridge) { //electron 环境
    ElectronBridge.setFullScreen((err) => {
      if (err) return;
      console.log('done');
    });
  } else { //web 环境
    alert('不能设置全屏')
    //do something else
  }
});
查看原文

赞 3 收藏 7 评论 0

白一梓 收藏了文章 · 2019-03-13

nodejs和树莓派开发以及点亮RGB的LED灯代码

前段时间集团举行前端IOT比赛,借此机会熟悉了树莓派相关的东西,特此记录一些相关的文档和开发指南。

先介绍一些树莓派的入门教程

阮一峰的树莓派入门

微雪电子-树莓派硬件中文官网

ssh链接树莓派

ssh pi@dd.dd.dd.dd(ip)
密码:raspberry

设置显示设备

推荐选购3.5吋或者5吋的HDMI显示设备,我第一次买的3.2吋的串口显示器,占用了我20个串口的针脚。

设备链接见这里

使用3.5吋显示器

cd /boot/LCD-show/
./LCD35-show
使用HDMI输出

cd /boot/LCD-show/
./LCD-hdmi
设置旋转屏幕

设置显示方向
安装完触摸驱动后,可以通过运行以下命令修改屏幕旋转方向。

旋转0度:

cd /boot/LCD-show/
./LCD35-show 0
旋转90度:

cd /boot/LCD-show/
./LCD35-show 90
旋转180度:

cd /boot/LCD-show/
./LCD35-show 180
旋转270度:

cd /boot/LCD-show/
./LCD35-show 270
声音设置为非HDMI输出

Bash
sudo amixer cset numid=3 1
需要注意的是如果你是浏览器播放声音。。拔掉显示器后貌似浏览器就进入后台模式不播放声音了。

介绍一些相关的nodejs的库

https://github.com/rwaldron/j...

一个适配各种板子的串口的基础库,当你需要点亮LED小灯泡的时候需要用到它

Raspi-io

Raspi-io is a Firmata API compatible library for Raspbian running on the Raspberry Pi that can be used as an I/O plugin with Johnny-Five.

和上面一个库搭配使用。

rpio

https://github.com/jperkin/no...

This is a high performance node.js addon which provides access to the Raspberry Pi GPIO interface, supporting regular GPIO as well as i²c, PWM, and SPI.

一个控制打开某个串口针脚的基础库。

serialport

https://github.com/EmergingTe...

一个链接控制硬件的基础库,比如控制USB串口,和链接USB串口的设备进行通信等,他有很多版本,树莓派的版本见这里

https://www.npmjs.com/package...

安装有点,麻烦。我折腾了3小时、、、、

点亮一个LED灯

LED灯分为简单的两个针脚的二极管灯,点亮见前面阮一峰博客,下面重点介绍一下RGB的LED灯

TB1KFkTSXXXXXcxXXXXXXXXXXXX-772-570.jpg
如上所示。这样的灯点亮的教程比较少。

第一步选择对应的串口针脚,首先不要把插针脚2,即:+5V口那个。

我插了两个分别是RGB为:[29,31,33],[36,38,40]

代码如下

var five = require("johnny-five");
var Raspi = require('raspi-io')
var rpio = require('rpio');
var isLED1On=false;
var isLED2On=false;
var LED = {
    LED1:null,
    LED2:null,
    init(LED1=[29,31,33],LED2=[36,38,40]){
        var board = new five.Board({
            io:new Raspi({enableSoftPwm:true})
        });
        this.LED1=LED1;
        this.LED2=LED2
        board.on('ready',function(){
            return new Promise(function(resolve,reject){
                var led1 =  new five.Led.RGB({
                    pins: {
                        red: `P1-${LED1[0]}`,
                        green: `P1-${LED1[1]}`,
                        blue:`P1-${LED1[2]}`,
                    }
                })
                var led2 =  new five.Led.RGB({
                    pins: {
                        red: `P1-${LED2[0]}`,
                        green: `P1-${LED2[1]}`,
                        blue:`P1-${LED2[2]}`,
                    }
                })
                // 打开 11 号针脚(GPIO17) 作为输出
                rpio.open(LED1[0], rpio.OUTPUT);
                rpio.open(LED1[1], rpio.OUTPUT);
                rpio.open(LED1[2], rpio.OUTPUT);
                rpio.open(LED2[0], rpio.OUTPUT);
                rpio.open(LED2[1], rpio.OUTPUT);
                rpio.open(LED2[2], rpio.OUTPUT);
                rpio.open(LED1[0], rpio.HIGH);
                rpio.open(LED1[1], rpio.HIGH);
                rpio.open(LED1[2], rpio.HIGH);
                resolve(board);
            })
        })
    },
    openLED1(){
        console.log('led1'+JSON.stringify(this))
        rpio.write(this.LED1[0], rpio.HIGH);
        rpio.write(this.LED1[1], rpio.HIGH);
        rpio.write(this.LED1[2], rpio.HIGH);
        isLED1On=true;
    },
    openLED2(){
        rpio.write(this.LED2[0], rpio.HIGH);
        rpio.write(this.LED2[1], rpio.HIGH);
        rpio.write(this.LED2[2], rpio.HIGH);
        isLED2On=true;
    },
    closeLED1(){
        console.log('led1'+JSON.stringify(this))
        rpio.write(this.LED1[0], rpio.LOW);
        rpio.write(this.LED1[1], rpio.LOW);
        rpio.write(this.LED1[2], rpio.LOW);
        isLED1On=false;
    },
    closeLED2(){
        rpio.write(this.LED2[0], rpio.LOW);
        rpio.write(this.LED2[1], rpio.LOW);
        rpio.write(this.LED2[2], rpio.LOW);
        isLED2On=false;
    },
    flashLED1(){
        if(isLED1On){
            return;
        }
        var self = this;
        self.openLED1();
        setTimeout(function () {
            self.closeLED1();
        },3000);
    },
    flashLED2(){
        if(isLED2On){
            return;
        }
        var self = this;
        self.openLED2();
        setTimeout(function () {
            self.closeLED2()
        },3000);
    },

}
module.exports={
    led:LED
}

更多内容详见我的博客

查看原文

白一梓 赞了文章 · 2019-03-13

nodejs和树莓派开发以及点亮RGB的LED灯代码

前段时间集团举行前端IOT比赛,借此机会熟悉了树莓派相关的东西,特此记录一些相关的文档和开发指南。

先介绍一些树莓派的入门教程

阮一峰的树莓派入门

微雪电子-树莓派硬件中文官网

ssh链接树莓派

ssh pi@dd.dd.dd.dd(ip)
密码:raspberry

设置显示设备

推荐选购3.5吋或者5吋的HDMI显示设备,我第一次买的3.2吋的串口显示器,占用了我20个串口的针脚。

设备链接见这里

使用3.5吋显示器

cd /boot/LCD-show/
./LCD35-show
使用HDMI输出

cd /boot/LCD-show/
./LCD-hdmi
设置旋转屏幕

设置显示方向
安装完触摸驱动后,可以通过运行以下命令修改屏幕旋转方向。

旋转0度:

cd /boot/LCD-show/
./LCD35-show 0
旋转90度:

cd /boot/LCD-show/
./LCD35-show 90
旋转180度:

cd /boot/LCD-show/
./LCD35-show 180
旋转270度:

cd /boot/LCD-show/
./LCD35-show 270
声音设置为非HDMI输出

Bash
sudo amixer cset numid=3 1
需要注意的是如果你是浏览器播放声音。。拔掉显示器后貌似浏览器就进入后台模式不播放声音了。

介绍一些相关的nodejs的库

https://github.com/rwaldron/j...

一个适配各种板子的串口的基础库,当你需要点亮LED小灯泡的时候需要用到它

Raspi-io

Raspi-io is a Firmata API compatible library for Raspbian running on the Raspberry Pi that can be used as an I/O plugin with Johnny-Five.

和上面一个库搭配使用。

rpio

https://github.com/jperkin/no...

This is a high performance node.js addon which provides access to the Raspberry Pi GPIO interface, supporting regular GPIO as well as i²c, PWM, and SPI.

一个控制打开某个串口针脚的基础库。

serialport

https://github.com/EmergingTe...

一个链接控制硬件的基础库,比如控制USB串口,和链接USB串口的设备进行通信等,他有很多版本,树莓派的版本见这里

https://www.npmjs.com/package...

安装有点,麻烦。我折腾了3小时、、、、

点亮一个LED灯

LED灯分为简单的两个针脚的二极管灯,点亮见前面阮一峰博客,下面重点介绍一下RGB的LED灯

TB1KFkTSXXXXXcxXXXXXXXXXXXX-772-570.jpg
如上所示。这样的灯点亮的教程比较少。

第一步选择对应的串口针脚,首先不要把插针脚2,即:+5V口那个。

我插了两个分别是RGB为:[29,31,33],[36,38,40]

代码如下

var five = require("johnny-five");
var Raspi = require('raspi-io')
var rpio = require('rpio');
var isLED1On=false;
var isLED2On=false;
var LED = {
    LED1:null,
    LED2:null,
    init(LED1=[29,31,33],LED2=[36,38,40]){
        var board = new five.Board({
            io:new Raspi({enableSoftPwm:true})
        });
        this.LED1=LED1;
        this.LED2=LED2
        board.on('ready',function(){
            return new Promise(function(resolve,reject){
                var led1 =  new five.Led.RGB({
                    pins: {
                        red: `P1-${LED1[0]}`,
                        green: `P1-${LED1[1]}`,
                        blue:`P1-${LED1[2]}`,
                    }
                })
                var led2 =  new five.Led.RGB({
                    pins: {
                        red: `P1-${LED2[0]}`,
                        green: `P1-${LED2[1]}`,
                        blue:`P1-${LED2[2]}`,
                    }
                })
                // 打开 11 号针脚(GPIO17) 作为输出
                rpio.open(LED1[0], rpio.OUTPUT);
                rpio.open(LED1[1], rpio.OUTPUT);
                rpio.open(LED1[2], rpio.OUTPUT);
                rpio.open(LED2[0], rpio.OUTPUT);
                rpio.open(LED2[1], rpio.OUTPUT);
                rpio.open(LED2[2], rpio.OUTPUT);
                rpio.open(LED1[0], rpio.HIGH);
                rpio.open(LED1[1], rpio.HIGH);
                rpio.open(LED1[2], rpio.HIGH);
                resolve(board);
            })
        })
    },
    openLED1(){
        console.log('led1'+JSON.stringify(this))
        rpio.write(this.LED1[0], rpio.HIGH);
        rpio.write(this.LED1[1], rpio.HIGH);
        rpio.write(this.LED1[2], rpio.HIGH);
        isLED1On=true;
    },
    openLED2(){
        rpio.write(this.LED2[0], rpio.HIGH);
        rpio.write(this.LED2[1], rpio.HIGH);
        rpio.write(this.LED2[2], rpio.HIGH);
        isLED2On=true;
    },
    closeLED1(){
        console.log('led1'+JSON.stringify(this))
        rpio.write(this.LED1[0], rpio.LOW);
        rpio.write(this.LED1[1], rpio.LOW);
        rpio.write(this.LED1[2], rpio.LOW);
        isLED1On=false;
    },
    closeLED2(){
        rpio.write(this.LED2[0], rpio.LOW);
        rpio.write(this.LED2[1], rpio.LOW);
        rpio.write(this.LED2[2], rpio.LOW);
        isLED2On=false;
    },
    flashLED1(){
        if(isLED1On){
            return;
        }
        var self = this;
        self.openLED1();
        setTimeout(function () {
            self.closeLED1();
        },3000);
    },
    flashLED2(){
        if(isLED2On){
            return;
        }
        var self = this;
        self.openLED2();
        setTimeout(function () {
            self.closeLED2()
        },3000);
    },

}
module.exports={
    led:LED
}

更多内容详见我的博客

查看原文

赞 1 收藏 2 评论 0

白一梓 收藏了文章 · 2019-03-06

NodeJS中被忽略的内存

原文链接:BlueSun | NodeJS中被忽略的内存

如朴灵说过,Node对内存泄露十分敏感,一旦线上应用有成千上万的流量,那怕是一个字节的内存泄漏也会造成堆积,垃圾回收过程中将会耗费更多时间进行对象扫描,应用响应缓慢,直到进程内存溢出,应用奔溃。

虽然从很久以前就知道内存问题是不容忽视的,但是日常开发的时候并没有碰到性能上的瓶颈,直到最近做了一个百万PV级的营销项目,由于访问量,并发量都达到了一个量级。一些细小的、平时没注意到的问题被放大,这才映入眼帘,开始注意到了内存问题。殊不知Node对内存的泄露是如此的敏感。
为此,赶紧去补习了一下V8中的内存处理机制。
那么,V8中的内存机制是怎么样的?

V8的内存机制

内存的限制

Node中并不像其他后端语言中,对内存的使用没有多少限制。在Node中使用内存,只能使用到系统的一部分内存,64位系统下约为1.4GB,32位系统下约为0.7GB。这归咎于Node使用了本来运行在浏览器的V8引擎。

V8引擎的设计之初只是运行在浏览器中,而在浏览器的一般应用场景下使用起来绰绰有余,足以胜任前端页面中的所有需求。

虽然服务端操作大内存也不是常见的需求,但是万一有这样的需求,还是可以解除限制的。
在启动node程序的时候,可以传递两个参数来调整内存限制的大小。

node --max-nex-space-size=1024 app.js // 单位为KB
node --max-old-space-size=2000 app.js // 单位为MB

这两条命令分别对应Node内存堆中的「新生代」和「老生代」

不受内存限制的特例

在Node中,使用Buffer可以读取超过V8内存限制的大文件。原因是Buffer对象不同于其他对象,它不经过V8的内存分配机制。这在于Node并不同于浏览器的应用场景。在浏览器中,JavaScript直接处理字符串即可满足绝大多数的业务需求,而Node则需要处理网络流和文件I/O流,操作字符串远远不能满足传输的性能需求。

内存的分配

一切JavaScript对象都用堆来存储

当我们在代码中声明变量并赋值时,所使用对象的内存就分配在堆中。如果已申请的对空闲内存不够分配新的对象,讲继续申请堆内存,直到堆的大小超过V8的限制为止。

V8的堆示意图

V8的垃圾回收机制

分代式垃圾回收

V8的垃圾回收策略主要基于「分代式垃圾回收机制」,基于这个机制,V8把内存分为「新生代(New Space)」和 「老生代 (Old Space)」。
新生代中的对象为存活时间较短的对象,老生代中的对象为存活时间较长或常驻内存的对象。
前面提及到的--max-old-space-size命令就是设置老生代内存空间的最大值,而--max-new-space-size命令则可以设置新生代内存空间的大小。

V8的分代示意图

为什么要分成新老两代?

垃圾回收算法有很多种,但是并没有一种是胜任所有的场景,在实际的应用中,需要根据对象的生存周期长短不一,而使用不同的算法,已达到最好的效果。在V8中,按对象的存活时间将内存的垃圾回收进行不同的分代,然后分别对不同的内存施以更高效的算法。

新生代中的垃圾回收

在新生代中,主要通过Scavenge算法进行垃圾回收。

Scavenge

在Scavenge算法中,它将堆内存一分为二,每一部分空间称为semispace。在这两个semispace空间中,只有一个处于使用中,另外一个处于闲置状态。处于使用状态的semispace称为From空间,处于闲置状态的semispace称为To空间。当我们分配对象时,先是从From空间中分配。当开始进行垃圾回收时,会检查From空间中存活的对象,这些存活的对象会被复制到To空间中,而非存活的对象占用的空间会被释放。完成复制后,From空间和To空间角色互换。简而言之,在垃圾回收的过程中,就是通过将存活对象在两个semispace空间之间进行复制。

V8的堆内存示意图

在新生代中的对象怎样才能到老生代中?

在新生代存活周期长的对象会被移动到老生代中,主要符合两个条件中的一个:

1. 对象是否经历过Scavenge回收。
对象从From空间中复制到To空间时,会检查它的内存地址来判断这个对象是否已经经历过一次Scavenge回收,如果已经经历过了,则将该对象从From空间中复制到老生代空间中。

2. To空间的内存占比超过25%限制。
当对象从From空间复制到To空间时,如果To空间已经使用超过25%,则这个对象直接复制到老生代中。这么做的原因在于这次Scavenge回收完成后,这个To空间会变成From空间,接下来的内存分配将在这个空间中进行。如果占比过高,会影响后续的内存分配。

老生代中的垃圾回收

对于老生代的对象,由于存活对象占比较大比重,使用Scavenge算法显然不科学。一来复制的对象太多会导致效率问题,二来需要浪费多一倍的空间。所以,V8在老生代中主要采用「Mark-Sweep」算法与「Mark-Compact」算法相结合的方式进行垃圾回收。

Mark-Sweep

Mark-Sweep是标记清除的意思,分为标记和清除两个阶段。在标记阶段遍历堆中的所有对象,并标记存活的对象,在随后的清除阶段中,只清除标记之外的对象。

Mark-Sweep在老生代空间中标记后的示意图

但是Mark-Sweep有一个很严重的问题,就是进行一次标记清除回收之后,内存会变得碎片化。如果需要分配一个大对象,这时候就无法完成分配了。这时候就该Mark-Compact出场了。

Mark-Compact

Mark-Compact是标记整理的意思,是在Mark-Sweep基础上演变而来。Mark-Compact在标记存活对象之后,在整理过程中,将活着的对象往一端移动,移动完成后,直接清理掉边界外的内存。

Mark-Compact完成标记并移动存活对象后的示意图

Incremental Marking

鉴于Node单线程的特性,V8每次垃圾回收的时候,都需要将应用逻辑暂停下来,待执行完垃圾回收后再恢复应用逻辑,被称为「全停顿」。在分代垃圾回收中,一次小垃圾回收只收集新生代,且存活对象也相对较少,即使全停顿也没有多大的影响。但是在老生代中,存活对象较多,垃圾回收的标记、清理、整理都需要长时间的停顿,这样会严重影响到系统的性能。
所以「增量标记 (Incrememtal Marking)」被提出来。它从标记阶段入手,将原本要一口气停顿完成的动作改为增量标记,拆分为许多小「步进」,每做完一「步进」就让JavaScript应用逻辑执行一小会,垃圾回收与应用逻辑这样交替执行直到标记阶段完成。

内存泄露排查的工具

node-heapdump

它允许对V8堆内存抓取快照,用于事后分析。
在程序中引入

var heapdump = require("node-heapdump");

之后可以通过向服务器发送SIGUSR2信号,让node-heapdump抓拍一份堆内存的快照:

$ kill -USR2 <pid>

这份抓拍的快照会默认存放在文件目录下,这是一份大JSON文件,可以通过Chrome的开发者工具打开查看。

Chrome Profile

node-memwatch

需要注意,node-memwatch只是支持到node v0.12.x为止,当使用更高的版本的时候,就会安装不上,这时候可以使用node-watch-next 替代,一摸一样的API。

不同于node-heapdump,它提供了两个事件监听器,用来提供内存泄露的以及垃圾回收的信息:

  1. stats事件:每次进行全堆回收时,会触发改时间,传递内存的统计信息

  2. leak事件:经过五次垃圾回收之后,内存仍没有被释放的对象,会触发leak事件,传递相关的信息。

node-profiler

node-profiler 是 alinode团队出品的一个与node-heapdump类似的抓取内存堆快照的工具,不同的是,node-profiler的实现不一样,使用起来更便捷。附上他们的教程:如何使用Node Profiler

alinode

alinode官方如似说:

alinode 是阿里云出品的 Node.js 应用服务解决方案,是一套基于社区 Node 改进的运行时环境和服务平台。在社区的基础上我们内建了强大的支持功能,帮助开发者迅速洞见性能细节,快速定位疑难杂症,直探问题根源。

以上内容参考自

A tour of V8: Garbage Collection
V8 之旅: 垃圾回收器
《深入浅出Node.js》

查看原文

白一梓 收藏了文章 · 2019-01-25

谈谈前端异常捕获与上报

关于

前言

Hello,大家好,又与大家见面了,这次给大家分享下前端异常监控中需要了解的异常捕获与上报机制的一些要点,同时包含了实战性质的参考代码和流程。

首先,我们为什么要进行异常捕获和上报呢?

正所谓百密一疏,一个经过了大量测试及联调的项目在有些时候还是会有十分隐蔽的bug存在,这种复杂而又不可预见性的问题唯有通过完善的监控机制才能有效的减少其带来的损失,因此对于直面用户的前端而言,异常捕获与上报是至关重要的。

虽然目前市面上已经有一些非常完善的前端监控系统存在,如sentrybugsnag等,但是知己知彼,才能百战不殆,唯有了解原理,摸清逻辑,使用起来才能得心应手。

异常捕获方法

1. try catch

通常,为了判断一段代码中是否存在异常,我们会这一写:

try {
    var a = 1;
    var b = a + c;
} catch (e) {
    // 捕获处理
    console.log(e); // ReferenceError: c is not defined
}

使用try catch能够很好的捕获异常并对应进行相应处理,不至于让页面挂掉,但是其存在一些弊端,比如需要在捕获异常的代码上进行包裹,会导致页面臃肿不堪,不适用于整个项目的异常捕获。

2. window.onerror

相比try catch来说window.onerror提供了全局监听异常的功能:

window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
    console.log('errorMessage: ' + errorMessage); // 异常信息
    console.log('scriptURI: ' + scriptURI); // 异常文件路径
    console.log('lineNo: ' + lineNo); // 异常行号
    console.log('columnNo: ' + columnNo); // 异常列号
    console.log('error: ' + error); // 异常堆栈信息
};

console.log(a);

如图:

window.onerror即提供了我们错误的信息,还提供了错误行列号,可以精准的进行定位,如此似乎正是我们想要的,但是接下来便是填坑过程。

异常捕获问题

1. Script error.

我们合乎情理地在本地页面进行尝试捕获异常,如:

<!-- http://localhost:3031/ -->
<script>
window.onerror = function() {
    console.log(arguments);
};
</script>
<script data-original="http://cdn.xxx.com/index.js"></script>

这里我们把静态资源放到异域上进行优化加载,但是捕获的异常信息却是:

经过分析发现,跨域之后window.onerror是无法捕获异常信息的,所以统一返回Script error.,解决方案便是script属性配置 crossorigin="anonymous" 并且服务器添加Access-Control-Allow-Origin。

<script data-original="http://cdn.xxx.com/index.js" crossorigin="anonymous"></script>

一般的CDN网站都会将Access-Control-Allow-Origin配置为*,意思是所有域都可以访问。

2. sourceMap

解决跨域或者将脚本存放在同域之后,你可能会将代码压缩一下再发布,这时候便出现了压缩后的代码无法找到原始报错位置的问题。如图,我们用webpack将代码打包压缩成bundle.js:

// webpack.config.js
var path = require('path');

// webpack 4.1.1
module.exports = {
    mode: 'development',
    entry: './client/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'client')
    }
}

最后我们页面引入的脚本文件是这样的:

!function(e){var o={};function n(r){if(o[r])return o[r].exports;var t=o[r]={i:r,l:!1,exports:{}}...;

所以我们看到的异常信息是这样的:

lineNo可能是一个非常小的数字,一般是1,而columnNo会是一个很大的数字,这里是730,因为所有代码都压缩到了一行。

那么该如何解决呢?聪明的童鞋可能已经猜到启用source-map了,没错,我们利用webpack打包压缩后生成一份对应脚本的map文件就能进行追踪了,在webpack中开启source-map功能:

module.exports = {
    ...
    devtool: '#source-map',
    ...
}

打包压缩的文件末尾会带上这样的注释:

!function(e){var o={};function n(r){if(o[r])return o[r].exports;var t=o[r]={i:r,l:!1,exports:{}}...;
//# sourceMappingURL=bundle.js.map

意思是该文件对应的map文件为bundle.js.map。下面便是一个source-map文件的内容,是一个JSON对象:

version: 3, // Source map的版本
sources: ["webpack:///webpack/bootstrap", ...], // 转换前的文件
names: ["installedModules", "__webpack_require__", ...], // 转换前的所有变量名和属性名
mappings: "aACA,IAAAA,KAGA,SAAAC...", // 记录位置信息的字符串
file: "bundle.js", // 转换后的文件名
sourcesContent: ["// The module cache var installedModules = {};..."], // 源代码
sourceRoot: "" // 转换前的文件所在的目录

如果你想详细了解关于sourceMap的知识,可以前往:JavaScript Source Map 详解

如此,既然我们拿到了对应脚本的map文件,那么我们该如何进行解析获取压缩前文件的异常信息呢?这个我会在下面异常上报的时候进行介绍。

3. MVVM框架

现在越来越多的项目开始使用前端框架,在MVVM框架中如果你一如既往的想使用window.onerror来捕获异常,那么很可能会竹篮打水一场空,或许根本捕获不到,因为你的异常信息被框架自身的异常机制捕获了。比如Vue 2.x中我们应该这样捕获全局异常

Vue.config.errorHandler = function (err, vm, info) {
    let { 
        message, // 异常信息
        name, // 异常名称
        script,  // 异常脚本url
        line,  // 异常行号
        column,  // 异常列号
        stack  // 异常堆栈信息
    } = err;
    
    // vm为抛出异常的 Vue 实例
    // info为 Vue 特定的错误信息,比如错误所在的生命周期钩子
}

目前script、line、column这3个信息打印出来是undefined,不过这些信息在stack中都可以找到,可以通过正则匹配去进行获取,然后进行上报。

同样的在react也提供了异常处理的方式,在 React 16.x 版本中引入了 Error Boundary:

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    componentDidCatch(error, info) {
        this.setState({ hasError: true });
        
        // 将异常信息上报给服务器
        logErrorToMyService(error, info); 
    }

    render() {
        if (this.state.hasError) {
            return '出错了';
        }
    
        return this.props.children;
    }
}

然后我们就可以这样使用该组件:

<ErrorBoundary>
    <MyWidget />
</ErrorBoundary>

详见官方文档:Error Handling in React 16

异常上报

以上介绍了前端异常捕获的相关知识点,那么接下来我们既然成功捕获了异常,那么该如何上报呢?

在脚本代码没有被压缩的情况下可以直接捕获后上传对应的异常信息,这里就不做介绍了,下面主要讲解常见的处理压缩文件上报的方法。

1. 提交异常

当捕获到异常时,我们可以将异常信息传递给接口,以window.onerror为例:

window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {

    // 构建错误对象
    var errorObj = {
        errorMessage: errorMessage || null,
        scriptURI: scriptURI || null,
        lineNo: lineNo || null,
        columnNo: columnNo || null,
        stack: error && error.stack ? error.stack : null
    };

    if (XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
    
        xhr.open('post', '/middleware/errorMsg', true); // 上报给node中间层处理
        xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头
        xhr.send(JSON.stringify(errorObj)); // 发送参数
    }
}

2. sourceMap解析

其实source-map格式的文件是一种数据类型,既然是数据类型那么肯定有解析它的办法,目前市面上也有专门解析它的相应工具包,在浏览器环境或者node环境下比较流行的是一款叫做'source-map'的插件。

通过require该插件,前端浏览器可以对map文件进行解析,但因为前端解析速度较慢,所以这里不做推荐,我们还是使用服务器解析。如果你的应用有node中间层,那么你完全可以将异常信息提交到中间层,然后解析map文件后将数据传递给后台服务器,中间层代码如下:

const express = require('express');
const fs = require('fs');
const router = express.Router();
const fetch = require('node-fetch');
const sourceMap = require('source-map');
const path = require('path');
const resolve = file => path.resolve(__dirname, file);

// 定义post接口
router.post('/errorMsg/', function(req, res) {
    let error = req.body; // 获取前端传过来的报错对象
    let url = error.scriptURI; // 压缩文件路径

    if (url) {
        let fileUrl = url.slice(url.indexOf('client/')) + '.map'; // map文件路径

        // 解析sourceMap
        let smc = new sourceMap.SourceMapConsumer(fs.readFileSync(resolve('../' + fileUrl), 'utf8')); // 返回一个promise对象
        
        smc.then(function(result) {
        
            // 解析原始报错数据
            let ret = result.originalPositionFor({
                line: error.lineNo, // 压缩后的行号
                column: error.columnNo // 压缩后的列号
            });
            
            let url = ''; // 上报地址
        
            // 将异常上报至后台
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    errorMessage: error.errorMessage, // 报错信息
                    source: ret.source, // 报错文件路径
                    line: ret.line, // 报错文件行号
                    column: ret.column, // 报错文件列号
                    stack: error.stack // 报错堆栈
                })
            }).then(function(response) {
                return response.json();
            }).then(function(json) {
                res.json(json);         
            });
        })
    }
});

module.exports = router;

这里我们通过前端传过来的异常文件路径获取服务器端map文件地址,然后将压缩后的行列号传递给sourceMap返回的promise对象进行解析,通过originalPositionFor方法我们能获取到原始的报错行列号和文件地址,最后通过ajax将需要的异常信息统一传递给后台存储,完成异常上报。下图可以看到控制台打印出了经过解析后的真是报错位置和文件:

附:source-map API

3. 注意点

以上是异常捕获和上报的主要知识点和流程,还有一些需要注意的地方,比如你的应用访问量很大,那么一个小异常都可能会把你的服务器搞挂,所以上报的时候可以进行信息过滤和采样等,设置一个调控开关,服务器也可以对相似的异常进行过滤,在一个时间段内不进行多次存储。另外window.onerror这样的异常捕获不能捕获promise的异常错误信息,这点需要注意。

最终大致的流程图如下:

结语

前端异常捕获与上报是前端异常监控的前提,了解并做好了异常数据的收集和分析才能实现一个完善的错误响应和处理机制,最终达成数据可视化。本文详细实例代码地址:https://github.com/luozhihao/error-catch-report

查看原文

白一梓 赞了文章 · 2019-01-25

谈谈前端异常捕获与上报

关于

前言

Hello,大家好,又与大家见面了,这次给大家分享下前端异常监控中需要了解的异常捕获与上报机制的一些要点,同时包含了实战性质的参考代码和流程。

首先,我们为什么要进行异常捕获和上报呢?

正所谓百密一疏,一个经过了大量测试及联调的项目在有些时候还是会有十分隐蔽的bug存在,这种复杂而又不可预见性的问题唯有通过完善的监控机制才能有效的减少其带来的损失,因此对于直面用户的前端而言,异常捕获与上报是至关重要的。

虽然目前市面上已经有一些非常完善的前端监控系统存在,如sentrybugsnag等,但是知己知彼,才能百战不殆,唯有了解原理,摸清逻辑,使用起来才能得心应手。

异常捕获方法

1. try catch

通常,为了判断一段代码中是否存在异常,我们会这一写:

try {
    var a = 1;
    var b = a + c;
} catch (e) {
    // 捕获处理
    console.log(e); // ReferenceError: c is not defined
}

使用try catch能够很好的捕获异常并对应进行相应处理,不至于让页面挂掉,但是其存在一些弊端,比如需要在捕获异常的代码上进行包裹,会导致页面臃肿不堪,不适用于整个项目的异常捕获。

2. window.onerror

相比try catch来说window.onerror提供了全局监听异常的功能:

window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
    console.log('errorMessage: ' + errorMessage); // 异常信息
    console.log('scriptURI: ' + scriptURI); // 异常文件路径
    console.log('lineNo: ' + lineNo); // 异常行号
    console.log('columnNo: ' + columnNo); // 异常列号
    console.log('error: ' + error); // 异常堆栈信息
};

console.log(a);

如图:

window.onerror即提供了我们错误的信息,还提供了错误行列号,可以精准的进行定位,如此似乎正是我们想要的,但是接下来便是填坑过程。

异常捕获问题

1. Script error.

我们合乎情理地在本地页面进行尝试捕获异常,如:

<!-- http://localhost:3031/ -->
<script>
window.onerror = function() {
    console.log(arguments);
};
</script>
<script data-original="http://cdn.xxx.com/index.js"></script>

这里我们把静态资源放到异域上进行优化加载,但是捕获的异常信息却是:

经过分析发现,跨域之后window.onerror是无法捕获异常信息的,所以统一返回Script error.,解决方案便是script属性配置 crossorigin="anonymous" 并且服务器添加Access-Control-Allow-Origin。

<script data-original="http://cdn.xxx.com/index.js" crossorigin="anonymous"></script>

一般的CDN网站都会将Access-Control-Allow-Origin配置为*,意思是所有域都可以访问。

2. sourceMap

解决跨域或者将脚本存放在同域之后,你可能会将代码压缩一下再发布,这时候便出现了压缩后的代码无法找到原始报错位置的问题。如图,我们用webpack将代码打包压缩成bundle.js:

// webpack.config.js
var path = require('path');

// webpack 4.1.1
module.exports = {
    mode: 'development',
    entry: './client/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'client')
    }
}

最后我们页面引入的脚本文件是这样的:

!function(e){var o={};function n(r){if(o[r])return o[r].exports;var t=o[r]={i:r,l:!1,exports:{}}...;

所以我们看到的异常信息是这样的:

lineNo可能是一个非常小的数字,一般是1,而columnNo会是一个很大的数字,这里是730,因为所有代码都压缩到了一行。

那么该如何解决呢?聪明的童鞋可能已经猜到启用source-map了,没错,我们利用webpack打包压缩后生成一份对应脚本的map文件就能进行追踪了,在webpack中开启source-map功能:

module.exports = {
    ...
    devtool: '#source-map',
    ...
}

打包压缩的文件末尾会带上这样的注释:

!function(e){var o={};function n(r){if(o[r])return o[r].exports;var t=o[r]={i:r,l:!1,exports:{}}...;
//# sourceMappingURL=bundle.js.map

意思是该文件对应的map文件为bundle.js.map。下面便是一个source-map文件的内容,是一个JSON对象:

version: 3, // Source map的版本
sources: ["webpack:///webpack/bootstrap", ...], // 转换前的文件
names: ["installedModules", "__webpack_require__", ...], // 转换前的所有变量名和属性名
mappings: "aACA,IAAAA,KAGA,SAAAC...", // 记录位置信息的字符串
file: "bundle.js", // 转换后的文件名
sourcesContent: ["// The module cache var installedModules = {};..."], // 源代码
sourceRoot: "" // 转换前的文件所在的目录

如果你想详细了解关于sourceMap的知识,可以前往:JavaScript Source Map 详解

如此,既然我们拿到了对应脚本的map文件,那么我们该如何进行解析获取压缩前文件的异常信息呢?这个我会在下面异常上报的时候进行介绍。

3. MVVM框架

现在越来越多的项目开始使用前端框架,在MVVM框架中如果你一如既往的想使用window.onerror来捕获异常,那么很可能会竹篮打水一场空,或许根本捕获不到,因为你的异常信息被框架自身的异常机制捕获了。比如Vue 2.x中我们应该这样捕获全局异常

Vue.config.errorHandler = function (err, vm, info) {
    let { 
        message, // 异常信息
        name, // 异常名称
        script,  // 异常脚本url
        line,  // 异常行号
        column,  // 异常列号
        stack  // 异常堆栈信息
    } = err;
    
    // vm为抛出异常的 Vue 实例
    // info为 Vue 特定的错误信息,比如错误所在的生命周期钩子
}

目前script、line、column这3个信息打印出来是undefined,不过这些信息在stack中都可以找到,可以通过正则匹配去进行获取,然后进行上报。

同样的在react也提供了异常处理的方式,在 React 16.x 版本中引入了 Error Boundary:

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    componentDidCatch(error, info) {
        this.setState({ hasError: true });
        
        // 将异常信息上报给服务器
        logErrorToMyService(error, info); 
    }

    render() {
        if (this.state.hasError) {
            return '出错了';
        }
    
        return this.props.children;
    }
}

然后我们就可以这样使用该组件:

<ErrorBoundary>
    <MyWidget />
</ErrorBoundary>

详见官方文档:Error Handling in React 16

异常上报

以上介绍了前端异常捕获的相关知识点,那么接下来我们既然成功捕获了异常,那么该如何上报呢?

在脚本代码没有被压缩的情况下可以直接捕获后上传对应的异常信息,这里就不做介绍了,下面主要讲解常见的处理压缩文件上报的方法。

1. 提交异常

当捕获到异常时,我们可以将异常信息传递给接口,以window.onerror为例:

window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {

    // 构建错误对象
    var errorObj = {
        errorMessage: errorMessage || null,
        scriptURI: scriptURI || null,
        lineNo: lineNo || null,
        columnNo: columnNo || null,
        stack: error && error.stack ? error.stack : null
    };

    if (XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
    
        xhr.open('post', '/middleware/errorMsg', true); // 上报给node中间层处理
        xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头
        xhr.send(JSON.stringify(errorObj)); // 发送参数
    }
}

2. sourceMap解析

其实source-map格式的文件是一种数据类型,既然是数据类型那么肯定有解析它的办法,目前市面上也有专门解析它的相应工具包,在浏览器环境或者node环境下比较流行的是一款叫做'source-map'的插件。

通过require该插件,前端浏览器可以对map文件进行解析,但因为前端解析速度较慢,所以这里不做推荐,我们还是使用服务器解析。如果你的应用有node中间层,那么你完全可以将异常信息提交到中间层,然后解析map文件后将数据传递给后台服务器,中间层代码如下:

const express = require('express');
const fs = require('fs');
const router = express.Router();
const fetch = require('node-fetch');
const sourceMap = require('source-map');
const path = require('path');
const resolve = file => path.resolve(__dirname, file);

// 定义post接口
router.post('/errorMsg/', function(req, res) {
    let error = req.body; // 获取前端传过来的报错对象
    let url = error.scriptURI; // 压缩文件路径

    if (url) {
        let fileUrl = url.slice(url.indexOf('client/')) + '.map'; // map文件路径

        // 解析sourceMap
        let smc = new sourceMap.SourceMapConsumer(fs.readFileSync(resolve('../' + fileUrl), 'utf8')); // 返回一个promise对象
        
        smc.then(function(result) {
        
            // 解析原始报错数据
            let ret = result.originalPositionFor({
                line: error.lineNo, // 压缩后的行号
                column: error.columnNo // 压缩后的列号
            });
            
            let url = ''; // 上报地址
        
            // 将异常上报至后台
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    errorMessage: error.errorMessage, // 报错信息
                    source: ret.source, // 报错文件路径
                    line: ret.line, // 报错文件行号
                    column: ret.column, // 报错文件列号
                    stack: error.stack // 报错堆栈
                })
            }).then(function(response) {
                return response.json();
            }).then(function(json) {
                res.json(json);         
            });
        })
    }
});

module.exports = router;

这里我们通过前端传过来的异常文件路径获取服务器端map文件地址,然后将压缩后的行列号传递给sourceMap返回的promise对象进行解析,通过originalPositionFor方法我们能获取到原始的报错行列号和文件地址,最后通过ajax将需要的异常信息统一传递给后台存储,完成异常上报。下图可以看到控制台打印出了经过解析后的真是报错位置和文件:

附:source-map API

3. 注意点

以上是异常捕获和上报的主要知识点和流程,还有一些需要注意的地方,比如你的应用访问量很大,那么一个小异常都可能会把你的服务器搞挂,所以上报的时候可以进行信息过滤和采样等,设置一个调控开关,服务器也可以对相似的异常进行过滤,在一个时间段内不进行多次存储。另外window.onerror这样的异常捕获不能捕获promise的异常错误信息,这点需要注意。

最终大致的流程图如下:

结语

前端异常捕获与上报是前端异常监控的前提,了解并做好了异常数据的收集和分析才能实现一个完善的错误响应和处理机制,最终达成数据可视化。本文详细实例代码地址:https://github.com/luozhihao/error-catch-report

查看原文

赞 107 收藏 278 评论 11

白一梓 收藏了文章 · 2019-01-17

监听微信返回事件踩坑指南

PC浏览器返回等于重新进入上一个页面,会触发刷新动作,而微信不会。也就是困扰我多时的微信返回不刷新。

大概再2017年初和2016末(大概也是从那个时候我开始做微信公众号),还可以通过在sessionStorage中记录刷新标志,让上一个页面根据标识刷新。也就是说当时微信返回还是会触发渲染事件的(具体是什么事件也不清楚,因为当时没有深究,但是确实是触发了componentDidMount)。

但是某个时刻起,这种方法也不再有效了,说明通过storage记录需要刷新标志是完全失效的了。

另外可以发现,上一个页面会保持上一次操作的状态,并且不会再有静态资源的请求,不会触发load事件。那也可以这么理解,在微信中的页面跳转,其实更类似于浏览器中的打开新标签页。所以上一个页面的内容没有被销掉,而是会保持你跳走前的状态。所以我们很多页面会有点击返回但是loading还是在转的现象。

尝试一:visibilitychange

由此,我想到了第一个检查他是否返回的方法——监听页面的visibilitychange事件。因为PC浏览器中如果标签切换或者是浏览器缩略,其可见性改变的时候,都会触发该事件。

有兴趣的可以打开控制台输入以下代码,看看有什么不同。

window.addEventListener('visibilitychange', function () {
  console.log(document.hidden)
});

总之我先尝试了以下代码:

let isPageBack = false; 

window.addEventListener('visibilitychange', function () {
  if(document.hiden){ 
     isPageBack = true
 } else if ( isPageBack ) {
     fetch('/data') //因为visibilitychange事件中alert可以看到被模拟器禁了,所以就改用改了fetch自己的接口,通过查看日志检查是否触发
 }
});

尝试之后发现该事件并没有被触发。疑惑之余,我尝试了chrome手机浏览器,发现同样,该事件没有被触发。

另外,因为好奇如果app压后台会不会触发该事件,所以尝试这段代码↓,结果发现即使压后台页面也不会被挂起。

setInterval(function () {
  var p = document.createElement('p');
  p.appendChild(document.createTextNode(`${Date.now()}`));
  document.body.appendChild(p);
}, 1000)

尝试二:pageshow & pagehide

与visibilitychange类似的还有pageshowpagehide事件。

pageshow事件触发点是 a session history entry is being traversed to. 同时根据MDN的介绍在back/forward时也会被触发

于是我改了改代码

let isPageBack = false;

window.addEventListener('pageshow', function () {
  if (isPageBack ) fetch('/data')
})

window.addEventListener('pagehide', function () {
  isPageBack = true
})

居然意外的能行,,,

pageshowpagehide事件可以被监听到。返回页可以通过页面是否隐藏过知道是否是返回回来的。

尝试三:history

history可以修改历史记录或url主要是 history.pushStatehistory.replaceState

使用pushState 等于多推一条历史记录,replaceState 等于修改了历史记录,另外我们要知道reload是不计入历史记录的。

理论上来说如果使用pushState修改url,那么页面访问就会像这样 A -> A1 -> B

当B返回A1时就会触发 popstate 事件。在popstate事件里面可以做一些自定义的事情。

这里用了代码

 var state = {
   date: Date.now()
 };
 window.history.pushState(state, 'csb');
 window.addEventListener('popstate', function (event) {
   if(event.state) location.reload()
 })

检查history时,可以看到state里面有一个key是date的时间戳,同时历史记录的长度+1。
但是使用pushState会增加历史记录,会导致同一个页面需要返回好几次才能退出去,不过可以利用他做返回退出公众号

window.history.pushState({}, 'csb');
window.addEventListener('popstate', function (event) {
  if (event.state) { 
    wx.ready(function () {
      wx.closeWindow();
    });
  }
});


但是因为replaceState不会增加历史记录,所以利用它这样返回刷新页面

history.replaceState(null, null, '#');
window.addEventListener('popstate', function (event) {
 self.location.reload();
})

另外如果要如果A->B->C,而C返回时想要直接返回A可以这样

B页面:

history.replaceState(null, null, '/c'); //将url替换成C,这样跳转到C页面等于被转变成了reload行为,但直观上来说,是我们删除了一条历史记录
查看原文

白一梓 收藏了文章 · 2019-01-17

使用h5新特性,轻松监听任何App自带返回键(最新版)

1、前言

如今h5新特性、新标签、新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力。作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践。接下来我将和各位分享一个特别好用的h5新特性(目前也不是特别新),轻松监听任何App自带的返回键,包括安卓机里的物理返回键,从而实现项目开发中进一步的需求。

2、起因

大概半年前接到pm这需求,用纯h5实现多audio的播放、暂停、续播,页面放至驾考宝典App中,与客户端没有任何的交互,换言之就是混合型开发,功能型h5。所以与客户端相关的js不需要引用。那为什么不让客户端实现让前端h5实现?更何况App里的返回键还是原生的,ios和安卓里的双方协议可能还不一样。这是我撸码之前提出的疑问。pm小姐姐回我客户端还得发版、审核,太麻烦了,h5一个线上链接就搞定了。好吧,既然是这样,看上去这需求也挺简单的嘛,虽然之前也没做过类似的需求。不管三七二十一,撸起袖子就是干,开始了填坑之旅。

3、具体页面展示

clipboard.png

clipboard.png

这就是设计稿及最终成稿图了。用户点击任何一个图标都可以实现音频的播放,而且点击的同时图标会发生变化,再点击相同图标即可实现暂停,以此类推。当第一个音频正在播放时,点击其他图标,第一个音频会自动暂停,以此类推。我相信做过类似需求的朋友,应该会很熟悉产品到底希望我们前端做成什么样。所以,这里会有几个坑,不仅仅是监听App的返回键。我先说第一个。

第一: 播放音频时,需要秒开,而不是等待一秒甚至更长时间。由于产品最开始给我的是本地音频文件,当时我也没考虑到线上音频文件(这样加载也许会更快但也许也会更慢),因为audio默认加载模式是先下载完,当音频就绪后再播放。所以最后我采取预加载模式,提高加载效率,尽可能让用户感受不到有延迟的存在。代码如下:

clipboard.png

这样即可。但这只规避了第一个坑。第二个坑或可以称之为自主优化,即播放进度条的时刻显示和暂停了。需求里是没有播放进度条的,但在需求上线后我和pm小姐姐沟通的过程中,对方肯定、称赞了我的设计。播放进度条的设计和增加,更接近原生App、用户体验也更好。以及页面初始化时,菊花图的存在,也很有意义。自定义播放进度条,根据当前播放的音频时长而变化,该暂停就暂停,该重新初始化就重新初始化,很好的融合进页面。希望这点也帮助到大家。而涉及的代码,具体会用到canplay、timeupdate事件,以及load()函数等。此处我个人用jq实现的。

clipboard.png

第二、DOM结构的渲染。非常不推荐在页面里写死,六个较少,勉强可以这么写。但是一旦数量增加,非常不可取。我最开始用的是传统的字符串拼接实现,但后来我导师建议我用模板引擎渲染,而驾考宝典事业部默认用artTemplate.js,最后我便修改了下。它分为原生JS和jq两个版本写法,各位也可自行研究下————模板引擎和拼接字符串的优缺点。如果自行设计一个模板引擎,该如何设计。

4、接下来着重介绍下我具体是怎么监听任何App自带的返回键,以及安卓机里的物理返回键。

那为什么我要去监听呢,这里我有必要强调强调再强调。苹果手机不管是微信、QQ、App,还是浏览器里,涉及到audio、video,返回上一页系统会自动暂停当前的播放的,但不是所有安卓机都可以。所以我们自己必须自定义监听。很多朋友可能第一想法就是百度,然后出来的答案无非是这样

pushHistory(); 
window.addEventListener("popstate", function(e) { 
    alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
}, false); 
function pushHistory() { 
    var state = { 
        title: "title", 
        url: "#"
    }; 
    window.history.pushState(state, "title", "#"); 
}

是不是很眼熟?然而关键需求不能完美实现,要这段代码有何用,当时我也是绞尽脑汁。直到经过大神好友指导,复制了这段代码

var hiddenProperty = 'hidden' in document ? 'hidden' :    
    'webkitHidden' in document ? 'webkitHidden' :    
    'mozHidden' in document ? 'mozHidden' :    
    null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
    if (document[hiddenProperty]) {    
        console.log('页面非激活');
    }else{
        console.log('页面激活')
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

所有问题迎刃而解。
这段代码的原理我个人理解就是通过判断用户浏览的是否为当前页,从而进行相关操作。
这是 MDN相关链接: https://developer.mozilla.org...

所以最后我是这么处理的,代码截图如下:

clipboard.png

5、手机兼容性

众所周知现在的安卓机系统4.0等都是低配版了,该属性大部分安卓机都能识别,个人低配版安卓机无法识别,原因在于navigator.userAgent内核版本过低,chrome现在很多是64+了,所以遇到该问题只要想办法兼容它就好了。

综上,遇到这个问题各位也不要过度担心,办法肯定是有的,但不是一根筋,而是通过转变思路,快速实现需求。希望这个特性能帮到大家。

6、感谢及呼吁

自从18年3月我公开发表了这篇文章,当时写的很简洁,但阅读量还是有不少,我挺吃惊的,谢谢各位的认可。但随后包括直到今天,我发现有不少知名微信公众号和网站都转载了我的这篇文章,有些并没有标明原文地址和作者,这让我也很意外和失望。所以最后希望大家能互相尊重吧,最终每个人的劳动成果,谢谢。在转载文章时,标注真实的原文地址和作者。这也是为什么我这次要更新文章的原因。另外,现在我已经不做常规的业务开发,本人已转投h5游戏开发,集游戏创意、美术、编码、测试于一身,欢迎同道朋友交流哦。

查看原文

认证与成就

  • 获得 159 次点赞
  • 获得 139 枚徽章 获得 8 枚金徽章, 获得 51 枚银徽章, 获得 80 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2014-05-19
个人主页被 4.8k 人浏览