wjkang

wjkang 查看完整档案

深圳编辑桂林电子科技大学  |  数字媒体技术 编辑  |  填写所在公司/组织 jaycewu.site 编辑
编辑

ฏ๎๎๎๎๎๎๎๎๎ฏ๎๎๎๎๎๎๎๎๎ฏ๎๎๎๎๎๎๎๎๎ฏ๎๎๎๎๎๎๎๎๎ฏ๎๎๎๎๎๎๎๎๎ฏ๎๎๎๎๎๎๎๎๎ฏ๎๎๎๎๎๎๎๎๎

个人动态

wjkang 收藏了文章 · 11月17日

Git 之 revert

revert 可以取消指定的提交内容。

当讨论 revert 时,需要分两种情况,因为 commit 分为两种:一种是常规的 commit,也就是使用 git commit 提交的 commit;另一种是 merge commit,在使用 git merge 合并两个分支之后,你将会得到一个新的 merge commit

merge commit 和普通 commit 的不同之处在于 merge commit 包含两个 parent commit,代表该 merge commit 是从哪两个 commit 合并过来的。

clipboard.png

在上图所示的红框中有一个 merge commit,使用 git show 命令可以查看 commit 的详细信息

➜  git show bd86846
commit bd868465569400a6b9408050643e5949e8f2b8f5
Merge: ba25a9d 1c7036f

这代表该 merge commit 是从 ba25a9d 和 1c7036f 两个 commit 合并过来的。

而常规的 commit 则没有 Merge 行

➜  git show 3e853bd
commit 3e853bdcb2d8ce45be87d4f902c0ff6ad00f240a

revert 常规 commit

使用 git revert <commit id> 即可,git 会生成一个新的 commit,将指定的 commit 内容从当前分支上撤除。

revert merge commit

revert merge commit 有一些不同,这时需要添加 -m 选项以代表这次 revert 的是一个 merge commit

但如果直接使用 git revert <commit id>,git 也不知道到底要撤除哪一条分支上的内容,这时需要指定一个 parent number 标识出"主线",主线的内容将会保留,而另一条分支的内容将被 revert。

如上面的例子中,从 git show 命令的结果中可以看到,merge commit 的 parent 分别为 ba25a9d 和 1c7036f,其中 ba25a9d 代表 master 分支(从图中可以看出),1c7036f 代表 will-be-revert 分支。需要注意的是 -m 选项接收的参数是一个数字,数字取值为 1 和 2,也就是 Merge 行里面列出来的第一个还是第二个。

我们要 revert will-be-revert 分支上的内容,即 保留主分支,应该设置主分支为主线,操作如下:

➜  git revert -m 1 bd86846

revert 之后重新上线

假设狗蛋在自己分支 goudan/a-cool-feature 上开发了一个功能,并合并到了 master 上,之后 master 上又提交了一个修改 h,这时提交历史如下:

a -> b -> c -> f -- g -> h (master)
           \      /
            d -> e   (goudan/a-cool-feature)

突然,大家发现狗蛋的分支存在严重的 bug,需要 revert 掉,于是大家把 g 这个 merge commit revert 掉了,记为 G,如下:

a -> b -> c -> f -- g -> h -> G (master)
           \      /
            d -> e   (goudan/a-cool-feature)

然后狗蛋回到自己的分支进行 bugfix,修好之后想重新合并到 master,直觉上只需要再 merge 到 master 即可(或者使用 cherry-pick),像这样:

a -> b -> c -> f -- g -> h -> G -> i (master)
           \      /               /
            d -> e -> j -> k ----    (goudan/a-cool-feature)

i 是新的 merge commit。但需要注意的是,这 不能 得到我们期望的结果。因为 d 和 e 两个提交曾经被丢弃过,如此合并到 master 的代码,并不会重新包含 d 和 e 两个提交的内容,相当于只有 goudan/a-cool-feature 上的新 commit 被合并了进来,而 goudan/a-cool-feature 分支之前的内容,依然是被 revert 掉了。

所以,如果想恢复整个 goudan/a-cool-feature 所做的修改,应该先把 G revert 掉:

a -> b -> c -> f -- g -> h -> G -> G' -> i (master)
           \      /                     /
            d -> e -> j -> k ----------    (goudan/a-cool-feature)

其中 G' 是对 G 的 revert 操作生成的 commit,把之前撤销合并时丢弃的代码恢复了回来,然后再 merge 狗蛋的分支,把解决 bug 写的新代码合并到 master 分支。

参考

http://blog.psjay.com/posts/git-revert-merge-commit/

https://stackoverflow.com/questions/9059335/get-parents-of-a-merge-commit-in-git

查看原文

wjkang 收藏了文章 · 8月17日

react-native 之布局篇

宽度单位和像素密度

react的宽度不支持百分比,设置宽度时不需要带单位 {width: 10}, 那么10代表的具体宽度是多少呢?

不知道是官网文档不全还是我眼瞎,反正是没找到,那做一个实验自己找吧:

    var Dimensions = require('Dimensions');
    <Text style={styles.welcome}>
          window.width={Dimensions.get('window').width + '\n'} 
          window.height={Dimensions.get('window').height + '\n'} 
          pxielRatio={PixelRatio.get()}
    </Text> 

默认用的是ihone6的模拟器结果是:

    window.width=375
    window.height=667

我们知道iphone系列的尺寸如下图:

iphones

可以看到iphone 6的宽度为 375pt,对应了上边的375,实际上官文指出的单位为 dp 。 那如何获取实际的像素尺寸呢? 这对图片的高清化很重要,如果我的图片大小为100100 px. 设置宽度为100 100. 那在iphone上的尺寸就是模糊的。 这个时候需要的图像大小应该是 100 * pixelRatio的大小 。

react 提供了PixelRatio 的获取方式https://facebook.github.io/react-native/docs/pixelratio.html

 var image = getImage({
   width: 200 * PixelRatio.get(),
   height: 100 * PixelRatio.get()
 });
 <Image source={image} style={{width: 200, height: 100}} />

flex的布局

默认宽度

我们知道一个div如果不设置宽度,默认的会占用100%的宽度, 为了验证100%这个问题, 做三个实验

  1. 根节点上方一个View, 不设置宽度

  2. 固定宽度的元素上设置一个View, 不设置宽度

  3. flex的元素上放一个View宽度, 不设置宽度

 <Text style={[styles.text, styles.header]}>
      根节点上放一个元素,不设置宽度
  </Text>        

  <View style={{height: 20, backgroundColor: '#333333'}} />

  <Text style={[styles.text, styles.header]}>
      固定宽度的元素上放一个View,不设置宽度
  </Text> 

  <View style={{width: 100}}>
    <View style={{height: 20, backgroundColor: '#333333'}} />
  </View>

  <Text style={[styles.text, styles.header]}>
      flex的元素上放一个View,不设置宽度
  </Text> 

  <View style={{flexDirection: 'row'}}>
    <View style={{flex: 1}}>
      <View style={{height: 20, backgroundColor: '#333333'}} />
    </View>
    <View style={{flex: 1}}/>
  </View>

结果可以看到flex的元素如果不设置宽度, 都会百分之百的占满父容器。

水平垂直居中

css 里边经常会做的事情是去讲一个文本或者图片水平垂直居中,如果使用过css 的flexbox当然知道使用alignItemsjustifyContent . 那用react-native也来做一下实验

   <Text style={[styles.text, styles.header]}>
        水平居中
    </Text>

    <View style={{height: 100, backgroundColor: '#333333', alignItems: 'center'}}>
      <View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/>
    </View>

     <Text style={[styles.text, styles.header]}>
        垂直居中
    </Text>
    <View style={{height: 100, backgroundColor: '#333333', justifyContent: 'center'}}>
      <View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/>
    </View>

    <Text style={[styles.text, styles.header]}>
        水平垂直居中
    </Text>
    <View style={{height: 100, backgroundColor: '#333333', alignItems: 'center', justifyContent: 'center'}}>
      <View style={{backgroundColor: '#fefefe', width: 30, height: 30, borderRadius: 15}}/>
    </View>

网格布局

网格布局实验, 网格布局能够满足绝大多数的日常开发需求,所以只要满足网格布局的spec,那么就可以证明react的flex布局能够满足正常开发需求

等分的网格

    <View style={styles.flexContainer}>
      <View style={styles.cell}>
        <Text style={styles.welcome}>
          cell1
        </Text>
      </View>
      <View style={styles.cell}>
        <Text style={styles.welcome}>
          cell2
        </Text>
      </View>
      <View style={styles.cell}>
        <Text style={styles.welcome}>
          cell3
        </Text>
      </View>
    </View>

    styles = {
        flexContainer: {
            // 容器需要添加direction才能变成让子元素flex
            flexDirection: 'row'
        },
        cell: {
            flex: 1,
            height: 50,
            backgroundColor: '#aaaaaa'
        },
        welcome: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10
        },
    }

左边固定, 右边固定,中间flex的布局

    <View style={styles.flexContainer}>
      <View style={styles.cellfixed}>
        <Text style={styles.welcome}>
          fixed
        </Text>
      </View>
      <View style={styles.cell}>
        <Text style={styles.welcome}>
          flex
        </Text>
      </View>
      <View style={styles.cellfixed}>
        <Text style={styles.welcome}>
          fixed
        </Text>
      </View>
    </View>

    styles = {
        flexContainer: {
            // 容器需要添加direction才能变成让子元素flex
            flexDirection: 'row'
        },
        cell: {
            flex: 1,
            height: 50,
            backgroundColor: '#aaaaaa'
        },
        welcome: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10
        },
        cellfixed: {
            height: 50,
            width: 80,
            backgroundColor: '#fefefe'
        } 
    }

嵌套的网格

通常网格不是一层的,布局容器都是一层套一层的, 所以必须验证在real world下面的网格布局

 <Text style={[styles.text, styles.header]}>
    嵌套的网格
  </Text>
  <View style={{flexDirection: 'row', height: 200, backgroundColor:"#fefefe", padding: 20}}>
    <View style={{flex: 1, flexDirection:'column', padding: 15, backgroundColor:"#eeeeee"}}>  
        <View style={{flex: 1, backgroundColor:"#bbaaaa"}}>  
        </View>
        <View style={{flex: 1, backgroundColor:"#aabbaa"}}>
        </View>
    </View>
    <View style={{flex: 1, padding: 15, flexDirection:'row', backgroundColor:"#eeeeee"}}>
        <View style={{flex: 1, backgroundColor:"#aaaabb"}}>  
            <View style={{flex: 1, flexDirection:'row', backgroundColor:"#eeaaaa"}}> 
               <View style={{flex: 1, backgroundColor:"#eebbaa"}}>  
              </View>
              <View style={{flex: 1, backgroundColor:"#bbccee"}}>
              </View> 
            </View>
            <View style={{flex: 1, backgroundColor:"#eebbdd"}}>
            </View>
        </View>
        <View style={{flex: 1, backgroundColor:"#aaccaa"}}>
          <ScrollView style={{flex: 1, backgroundColor:"#bbccdd", padding: 5}}>
                <View style={{flexDirection: 'row', height: 50, backgroundColor:"#fefefe"}}>
                  <View style={{flex: 1, flexDirection:'column', backgroundColor:"#eeeeee"}}>  
                      <View style={{flex: 1, backgroundColor:"#bbaaaa"}}>  
                      </View>
                      <View style={{flex: 1, backgroundColor:"#aabbaa"}}>
                      </View>
                  </View>
                  <View style={{flex: 1, flexDirection:'row', backgroundColor:"#eeeeee"}}>
                      <View style={{flex: 1, backgroundColor:"#aaaabb"}}>  
                          <View style={{flex: 1, flexDirection:'row', backgroundColor:"#eeaaaa"}}> 
                             <View style={{flex: 1, backgroundColor:"#eebbaa"}}>  
                            </View>
                            <View style={{flex: 1, backgroundColor:"#bbccee"}}>
                            </View> 
                          </View>
                          <View style={{flex: 1, backgroundColor:"#eebbdd"}}>
                          </View>
                      </View>
                      <View style={{flex: 1, backgroundColor:"#aaccaa"}}>
                      </View>
                  </View>
                </View>
                <Text style={[styles.text, styles.header, {color: '#ffffff', fontSize: 12}]}>
                  {(function(){
                    var str = '';
                    var n = 100;
                    while(n--) {
                      str += '嵌套的网格' + '\n';
                    }
                    return str;
                  })()}
                </Text>
          </ScrollView> 
        </View>
    </View>
  </View>

好在没被我玩儿坏,可以看到上图的嵌套关系也是足够的复杂的,(我还加了一个ScrollView,然后再嵌套整个结构)嵌套多层的布局是没有问题的。

图片布局

首先我们得知道图片有一个stretchMode. 通过Image.resizeMode访问

找出有哪些mode

  var keys = Object.keys(Image.resizeMode).join('  ');

打印出来的是 contain, cover, stretch 这几种模式, (官方文档不知道为什么不直接给出)

尝试使用这些mode

  <Text style={styles.welcome}> 100px height </Text>
  <Image style={{height: 100}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />

100px 高度, 可以看到图片适应100高度和全屏宽度,背景居中适应未拉伸但是被截断也就是cover。

  <Text style={styles.welcome}> 100px height with resizeMode contain </Text>
  <View style={[{flex: 1, backgroundColor: '#fe0000'}]}>
      <Image style={{flex: 1, height: 100, resizeMode: Image.resizeMode.contain}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />
  </View>


contain 模式容器完全容纳图片,图片自适应宽高

  <Text style={styles.welcome}> 100px height with resizeMode cover </Text>
  <View style={[{flex: 1, backgroundColor: '#fe0000'}]}>
      <Image style={{flex: 1, height: 100, resizeMode: Image.resizeMode.cover}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />
  </View>

cover模式同100px高度模式


  <Text style={styles.welcome}> 100px height with resizeMode stretch </Text>
  <View style={[{flex: 1, backgroundColor: '#fe0000'}]}>
      <Image style={{flex: 1, height: 100, resizeMode: Image.resizeMode.stretch}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />
  </View>

stretch模式图片被拉伸适应屏幕

  <Text style={styles.welcome}> set height to image container </Text>
  <View style={[{flex: 1, backgroundColor: '#fe0000', height: 100}]}>
      <Image style={{flex: 1}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}} />
  </View>

随便试验了一下, 发现高度设置到父容器,图片flex的时候也会等同于cover模式

绝对定位和相对定位

 <View style={{flex: 1, height: 100, backgroundColor: '#333333'}}>
    <View style={[styles.circle, {position: 'absolute', top: 50, left: 180}]}>
    </View>
  </View>
  styles = {
    circle: {
    backgroundColor: '#fe0000',
    borderRadius: 10,
    width: 20,
    height: 20
    }
  }

和css的标准不同的是, 元素容器不用设置position:'absolute|relative' .

 <View style={{flex: 1, height: 100, backgroundColor: '#333333'}}>
    <View style={[styles.circle, {position: 'relative', top: 50, left: 50, marginLeft: 50}]}>
    </View>
  </View>

相对定位的可以看到很容易的配合margin做到了。 (我还担心不能配合margin,所以测试了一下:-:)

padding和margin

我们知道在css中区分inline元素和block元素,既然react-native实现了一个超级小的css subset。那我们就来实验一下padding和margin在inline和非inline元素上的padding和margin的使用情况。

padding

 <Text style={[styles.text, styles.header]}>
    在正常的View上设置padding 
  </Text>

  <View style={{padding: 30, backgroundColor: '#333333'}}>
    <Text style={[styles.text, {color: '#fefefe'}]}> Text Element</Text>
  </View>

  <Text style={[styles.text, styles.header]}>
    在文本元素上设置padding
  </Text>
  <View style={{padding: 0, backgroundColor: '#333333'}}>
    <Text style={[styles.text, {backgroundColor: '#fe0000', padding: 30}]}>
      text 元素上设置paddinga
    </Text>
  </View>

在View上设置padding很顺利,没有任何问题, 但是如果在inline元素上设置padding, 发现会出现上面的错误, paddingTop和paddingBottom都被挤成marginBottom了。 按理说,不应该对Text做padding处理, 但是确实有这样的问题存在,所以可以将这个问题mark一下。

margin

 <Text style={[styles.text, styles.header]}>
    在正常的View上设置margin 
  </Text>

  <View style={{backgroundColor: '#333333'}}>
    <View style={{backgroundColor: '#fefefe', width: 30, height: 30, margin: 30}}/>
  </View>

  <Text style={[styles.text, styles.header]}>
    在文本元素上设置margin
  </Text>
  <View style={{backgroundColor: '#333333'}}>
    <Text style={[styles.text, {backgroundColor: '#fe0000', margin: 30}]}>
      text 元素上设置margin
    </Text>
    <Text style={[styles.text, {backgroundColor: '#fe0000', margin: 30}]}>
      text 元素上设置margin
    </Text>
  </View>

我们知道,对于inline元素,设置margin-left和margin-right有效,top和bottom按理是不会生效的, 但是上图的结果可以看到,实际是生效了的。所以现在给我的感觉是Text元素更应该理解为一个不能设置padding的block。

算了不要猜了, 我们看看官方文档怎么说Text,https://facebook.github.io/react-native/docs/text.html

  <Text>
    <Text>First part and </Text>
    <Text>second part</Text>
  </Text>
  // Text container: all the text flows as if it was one
  // |First part |
  // |and second |
  // |part       |

  <View>
    <Text>First part and </Text>
    <Text>second part</Text>
  </View>
  // View container: each text is its own block
  // |First part |
  // |and        |
  // |second part|

也就是如果Text元素在Text里边,可以考虑为inline, 如果单独在View里边,那就是Block。
下面会专门研究一下文本相关的布局

文本元素

首先我们得考虑对于Text元素我们希望有哪些功能或者想验证哪些功能:

  1. 文字是否能自动换行?

  2. overflow ellipse?

  3. 是否能对部分文字设置样式 ,类似span等标签

先看看文字有哪些支持的style属性

 /*==========TEXT================*/
  Attributes.style = {
    color string
    containerBackgroundColor string
    fontFamily string
    fontSize number
    fontStyle enum('normal', 'italic')
    fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
    lineHeight number
    textAlign enum("auto", 'left', 'right', 'center')
    writingDirection enum("auto", 'ltr', 'rtl')
  }

实验1, 2, 3

 <Text style={[styles.text, styles.header]}>
      文本元素
  </Text>

  <View style={{backgroundColor: '#333333', padding: 10}}>
    <Text style={styles.baseText} numberOfLines={5}>
      <Text style={styles.titleText} onPress={this.onPressTitle}>
        文本元素{'\n'}
      </Text>
      <Text>
        {'\n'}In this example, the nested title and body text will inherit the fontFamily from styles.baseText, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines, numberOfLines is Used to truncate the text with an elipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number.
      </Text>
    </Text>
  </View>
  styles = {
    baseText: {
      fontFamily: 'Cochin',
      color: 'white'
    },
    titleText: {
      fontSize: 20,
      fontWeight: 'bold',
    }
  }

从结果来看1,2,3得到验证。 但是不知道各位有没有发现问题, 为什么底部空出了这么多空间, 没有设置高度啊。 我去除numberOfLines={5} 这行代码,效果如下:


所以实际上, 那段空间是文本撑开的, 但是文本被numberOfLines={5} 截取了,但是剩余的空间还在。 我猜这应该是个bug。

其实官方文档里边把numberOfLines={5}这句放到的是长文本的Text元素上的,也就是子Text上的。 实际结果是不生效。 这应该又是一个bug。

Text元素的子Text元素的具体实现是怎样的, 感觉这货会有很多bug, 看官文

 <Text style={{fontWeight: 'bold'}}>
  I am bold
  <Text style={{color: 'red'}}>
    and red
  </Text>
 </Text>

Behind the scenes, this is going to be converted to a flat
NSAttributedString that contains the following information

 "I am bold and red"
  0-9: bold
  9-17: bold, red

好吧, 那对于numberOfLines={5} 放在子Text元素上的那种bug倒是可以解释了。

Text的样式继承

实际上React-native里边是没有样式继承这种说法的, 但是对于Text元素里边的Text元素,上面的例子可以看出存在继承。 那既然有继承,问题就来了!

到底是继承的最外层的Text的值呢,还是继承父亲Text的值呢?

 <Text style={[styles.text, styles.header]}>
      文本样式继承
  </Text>

  <View style={{backgroundColor: '#333333', padding: 10}}>
    <Text style={{color: 'white'}}>
      <Text style={{color: 'red'}} onPress={this.onPressTitle}>
         文本元素{'\n'}
        <Text>我是white还是red呢?{'\n'} </Text>
      </Text>
      <Text>我应该是white的</Text>
    </Text>
  </View>

结果可见是直接继承父亲Text的。

总结

  1. react 宽度基于pt为单位, 可以通过Dimensions 来获取宽高,PixelRatio 获取密度。

  2. 基于flex的布局

    1. view默认宽度为100%

    2. 水平居中用alignItems, 垂直居中用justifyContent

    3. 基于flex能够实现现有的网格系统需求,且网格能够各种嵌套无bug

  3. 图片布局

    1. 通过Image.resizeMode来适配图片布局,包括contain, cover, stretch

    2. 默认不设置模式等于cover模式

    3. contain模式自适应宽高,给出高度值即可

    4. cover铺满容器,但是会做截取

    5. stretch铺满容器,拉伸

  4. 定位

    1. 定位相对于父元素,父元素不用设置position也行

    2. padding 设置在Text元素上的时候会存在bug。所有padding变成了marginBottom

  5. 文本元素

    1. 文字必须放在Text元素里边

    2. Text元素可以相互嵌套,且存在样式继承关系

    3. numberOfLines 需要放在最外层的Text元素上,且虽然截取了文字但是还是会占用空间

查看原文

wjkang 收藏了文章 · 2月26日

学习 sentry 源码整体架构,打造属于自己的前端异常监控SDK

前言

你好,我是若川。这是学习源码整体架构系列第四篇。整体架构这词语好像有点大,姑且就算是源码整体结构吧,主要就是学习是代码整体结构,不深究其他不是主线的具体函数的实现。文章学习的是打包整合后的代码,不是实际仓库中的拆分的代码。
要是有人说到怎么读源码,正在读文章的你能推荐我的源码系列文章,那真是太好了

学习源码整体架构系列文章如下:

1.学习 jQuery 源码整体架构,打造属于自己的 js 类库
2.学习 underscore 源码整体架构,打造属于自己的函数式编程类库
3.学习 lodash 源码整体架构,打造属于自己的函数式编程类库
4.学习 sentry 源码整体架构,打造属于自己的前端异常监控SDK
5.学习 vuex 源码整体架构,打造属于自己的状态管理库
6.学习 axios 源码整体架构,打造属于自己的请求库
7.学习 koa 源码的整体架构,浅析koa洋葱模型原理和co原理
8.学习 redux 源码整体架构,深入理解 redux 及其中间件原理
感兴趣的读者可以点击阅读。

其他源码计划中的有:expressvue-rotuerreact-redux 等源码,不知何时能写完(哭泣),欢迎持续关注我(若川)。

源码类文章,一般阅读量不高。已经有能力看懂的,自己就看了。不想看,不敢看的就不会去看源码。

所以我的文章,尽量写得让想看源码又不知道怎么看的读者能看懂。

导读
本文通过梳理前端错误监控知识、介绍sentry错误监控原理、sentry初始化、Ajax上报、window.onerror、window.onunhandledrejection几个方面来学习sentry的源码。

开发微信小程序,想着搭建小程序错误监控方案。最近用了丁香园 开源的Sentry 小程序 SDKsentry-miniapp
顺便研究下sentry-javascript仓库 的源码整体架构,于是有了这篇文章。

本文分析的是打包后未压缩的源码,源码总行数五千余行,链接地址是:https://browser.sentry-cdn.com/5.7.1/bundle.js, 版本是v5.7.1

本文示例等源代码在这我的github博客中github blog sentry,需要的读者可以点击查看,如果觉得不错,可以顺便star一下。

看源码前先来梳理下前端错误监控的知识。

前端错误监控知识

摘抄自 慕课网视频教程:前端跳槽面试必备技巧
别人做的笔记:前端跳槽面试必备技巧-4-4 错误监控类

前端错误的分类

1.即时运行错误:代码错误

try...catch

window.onerror (也可以用DOM2事件监听)

2.资源加载错误

object.onerror: dom对象的onerror事件

performance.getEntries()

Error事件捕获

3.使用performance.getEntries()获取网页图片加载错误

var allImgs = document.getElementsByTagName('image')

var loadedImgs = performance.getEntries().filter(i => i.initiatorType === 'img')

最后allImsloadedImgs对比即可找出图片资源未加载项目

Error事件捕获代码示例

window.addEventListener('error', function(e) {
  console.log('捕获', e)
}, true) // 这里只有捕获才能触发事件,冒泡是不能触发

上报错误的基本原理

1.采用Ajax通信的方式上报

2.利用Image对象上报 (主流方式)

Image上报错误方式:
(new Image()).src = 'https://lxchuan12.cn/error?name=若川'

Sentry 前端异常监控基本原理

1.重写 window.onerror 方法、重写 window.onunhandledrejection 方法

如果不了解onerror和onunhandledrejection方法的读者,可以看相关的MDN文档。这里简要介绍一下:

MDN GlobalEventHandlers.onerror

window.onerror = function (message, source, lineno, colno, error) {
    console.log('message, source, lineno, colno, error', message, source, lineno, colno, error);
}
参数:<br/>
message:错误信息(字符串)。可用于HTML onerror=""处理程序中的event。<br/>
source:发生错误的脚本URL(字符串)<br/>
lineno:发生错误的行号(数字)<br/>
colno:发生错误的列号(数字)<br/>
errorError对象(对象)<br/>

MDN unhandledrejection

Promisereject 且没有 reject 处理器的时候,会触发 unhandledrejection 事件;这可能发生在 window 下,但也可能发生在 Worker 中。 这对于调试回退错误处理非常有用。

Sentry 源码可以搜索 global.onerror 定位到具体位置

 GlobalHandlers.prototype._installGlobalOnErrorHandler = function () {
    // 代码有删减
    // 这里的 this._global 在浏览器中就是 window
    this._oldOnErrorHandler = this._global.onerror;
    this._global.onerror = function (msg, url, line, column, error) {}
    // code ...
 }

同样,可以搜索global.onunhandledrejection 定位到具体位置

GlobalHandlers.prototype._installGlobalOnUnhandledRejectionHandler = function () {
    // 代码有删减
    this._oldOnUnhandledRejectionHandler = this._global.onunhandledrejection;
    this._global.onunhandledrejection = function (e) {}
}
2.采用Ajax上传

支持 fetch 使用 fetch,否则使用 XHR

BrowserBackend.prototype._setupTransport = function () {
    // 代码有删减
    if (supportsFetch()) {
        return new FetchTransport(transportOptions);
    }
    return new XHRTransport(transportOptions);
};
2.1 fetch
FetchTransport.prototype.sendEvent = function (event) {
    var defaultOptions = {
        body: JSON.stringify(event),
        method: 'POST',
        referrerPolicy: (supportsReferrerPolicy() ? 'origin' : ''),
    };
    return this._buffer.add(global$2.fetch(this.url, defaultOptions).then(function (response) { return ({
        status: exports.Status.fromHttpCode(response.status),
    }); }));
};
2.2 XMLHttpRequest
XHRTransport.prototype.sendEvent = function (event) {
    var _this = this;
    return this._buffer.add(new SyncPromise(function (resolve, reject) {
        // 熟悉的 XMLHttpRequest
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (request.readyState !== 4) {
                return;
            }
            if (request.status === 200) {
                resolve({
                    status: exports.Status.fromHttpCode(request.status),
                });
            }
            reject(request);
        };
        request.open('POST', _this.url);
        request.send(JSON.stringify(event));
    }));
}

接下来主要通过Sentry初始化、如何Ajax上报window.onerror、window.onunhandledrejection三条主线来学习源码。

如果看到这里,暂时不想关注后面的源码细节,直接看后文小结1和2的两张图。或者可以点赞或收藏这篇文章,后续想看了再看。

Sentry 源码入口和出口

var Sentry = (function(exports){
    // code ...

    var SDK_NAME = 'sentry.javascript.browser';
    var SDK_VERSION = '5.7.1';

    // code ...
    // 省略了导出的Sentry的若干个方法和属性
    // 只列出了如下几个
    exports.SDK_NAME = SDK_NAME;
    exports.SDK_VERSION = SDK_VERSION;
    // 重点关注 captureMessage
    exports.captureMessage = captureMessage;
    // 重点关注 init
    exports.init = init;

    return exports;
}({}));

Sentry.init 初始化 之 init 函数

初始化

// 这里的dsn,是sentry.io网站会生成的。
Sentry.init({ dsn: 'xxx' });
// options 是 {dsn: '...'}
function init(options) {
    // 如果options 是undefined,则赋值为 空对象
    if (options === void 0) { options = {}; }
    // 如果没传 defaultIntegrations 则赋值默认的
    if (options.defaultIntegrations === undefined) {
        options.defaultIntegrations = defaultIntegrations;
    }
    // 初始化语句
    if (options.release === undefined) {
        var window_1 = getGlobalObject();
        // 这是给  sentry-webpack-plugin 插件提供的,webpack插件注入的变量。这里没用这个插件,所以这里不深究。
        // This supports the variable that sentry-webpack-plugin injects
        if (window_1.SENTRY_RELEASE && window_1.SENTRY_RELEASE.id) {
            options.release = window_1.SENTRY_RELEASE.id;
        }
    }
    // 初始化并且绑定
    initAndBind(BrowserClient, options);
}

getGlobalObject、inNodeEnv 函数

很多地方用到这个函数getGlobalObject。其实做的事情也比较简单,就是获取全局对象。浏览器中是window

/**
 * 判断是否是node环境
 * Checks whether we're in the Node.js or Browser environment
 *
 * @returns Answer to given question
 */
function isNodeEnv() {
    // tslint:disable:strict-type-predicates
    return Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]';
}
var fallbackGlobalObject = {};
/**
 * Safely get global scope object
 *
 * @returns Global scope object
 */
function getGlobalObject() {
    return (isNodeEnv()
    // 是 node 环境 赋值给 global
        ? global
        : typeof window !== 'undefined'
            ? window
            // 不是 window self 不是undefined 说明是 Web Worker 环境
            : typeof self !== 'undefined'
                ? self
                // 都不是,赋值给空对象。
                : fallbackGlobalObject);

继续看 initAndBind 函数

initAndBind 函数之 new BrowserClient(options)

function initAndBind(clientClass, options) {
    // 这里没有开启debug模式,logger.enable() 这句不会执行
    if (options.debug === true) {
        logger.enable();
    }
    getCurrentHub().bindClient(new clientClass(options));
}

可以看出 initAndBind(),第一个参数是 BrowserClient 构造函数,第二个参数是初始化后的options
接着先看 构造函数 BrowserClient
另一条线 getCurrentHub().bindClient() 先不看。

BrowserClient 构造函数

var BrowserClient = /** @class */ (function (_super) {
    // `BrowserClient` 继承自`BaseClient`
    __extends(BrowserClient, _super);
    /**
     * Creates a new Browser SDK instance.
     *
     * @param options Configuration options for this SDK.
     */
    function BrowserClient(options) {
        if (options === void 0) { options = {}; }
        // 把`BrowserBackend`,`options`传参给`BaseClient`调用。
        return _super.call(this, BrowserBackend, options) || this;
    }
    return BrowserClient;
}(BaseClient));

从代码中可以看出
BrowserClient 继承自BaseClient,并且把BrowserBackendoptions传参给BaseClient调用。

先看 BrowserBackend,这里的BaseClient,暂时不看。

BrowserBackend之前,先提一下继承、继承静态属性和方法。

__extends、extendStatics 打包代码实现的继承

未打包的源码是使用ES6 extends实现的。这是打包后的对ES6extends的一种实现。

如果对继承还不是很熟悉的读者,可以参考我之前写的文章。面试官问:JS的继承

// 继承静态方法和属性
var extendStatics = function(d, b) {
    // 如果支持 Object.setPrototypeOf 这个函数,直接使用
    // 不支持,则使用原型__proto__ 属性,
    // 如何还不支持(但有可能__proto__也不支持,毕竟是浏览器特有的方法。)
    // 则使用for in 遍历原型链上的属性,从而达到继承的目的。
    extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return extendStatics(d, b);
};

function __extends(d, b) {
    extendStatics(d, b);
    // 申明构造函数__ 并且把 d 赋值给 constructor
    function __() { this.constructor = d; }
    // (__.prototype = b.prototype, new __()) 这种逗号形式的代码,最终返回是后者,也就是 new __()
    // 比如 (typeof null, 1) 返回的是1
    // 如果 b === null 用Object.create(b) 创建 ,也就是一个不含原型链等信息的空对象 {}
    // 否则使用 new __() 返回
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

不得不说这打包后的代码十分严谨,上面说的我的文章《面试官问:JS的继承》中没有提到不支持__proto__的情况。看来这文章可以进一步严谨修正了。
让我想起Vue源码中对数组检测代理判断是否支持__proto__的判断。

// vuejs 源码:https://github.com/vuejs/vue/blob/dev/dist/vue.js#L526-L527
// can we use __proto__?
var hasProto = '__proto__' in {};

看完打包代码实现的继承,继续看 BrowserBackend 构造函数

BrowserBackend 构造函数 (浏览器后端)

var BrowserBackend = /** @class */ (function (_super) {
    __extends(BrowserBackend, _super);
    function BrowserBackend() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    /**
     * 设置请求
     */
    BrowserBackend.prototype._setupTransport = function () {
        if (!this._options.dsn) {
            // We return the noop transport here in case there is no Dsn.
            // 没有设置dsn,调用BaseBackend.prototype._setupTransport 返回空函数
            return _super.prototype._setupTransport.call(this);
        }
        var transportOptions = __assign({}, this._options.transportOptions, { dsn: this._options.dsn });
        if (this._options.transport) {
            return new this._options.transport(transportOptions);
        }
        // 支持Fetch则返回 FetchTransport 实例,否则返回 XHRTransport实例,
        // 这两个构造函数具体代码在开头已有提到。
        if (supportsFetch()) {
            return new FetchTransport(transportOptions);
        }
        return new XHRTransport(transportOptions);
    };
    // code ...
    return BrowserBackend;
}(BaseBackend));

BrowserBackend 又继承自 BaseBackend

BaseBackend 构造函数 (基础后端)

/**
 * This is the base implemention of a Backend.
 * @hidden
 */
var BaseBackend = /** @class */ (function () {
    /** Creates a new backend instance. */
    function BaseBackend(options) {
        this._options = options;
        if (!this._options.dsn) {
            logger.warn('No DSN provided, backend will not do anything.');
        }
        // 调用设置请求函数
        this._transport = this._setupTransport();
    }
    /**
     * Sets up the transport so it can be used later to send requests.
     * 设置发送请求空函数
     */
    BaseBackend.prototype._setupTransport = function () {
        return new NoopTransport();
    };
    // code ...
    BaseBackend.prototype.sendEvent = function (event) {
        this._transport.sendEvent(event).then(null, function (reason) {
            logger.error("Error while sending event: " + reason);
        });
    };
    BaseBackend.prototype.getTransport = function () {
        return this._transport;
    };
    return BaseBackend;
}());

通过一系列的继承后,回过头来看 BaseClient 构造函数。

BaseClient 构造函数(基础客户端)

var BaseClient = /** @class */ (function () {
    /**
     * Initializes this client instance.
     *
     * @param backendClass A constructor function to create the backend.
     * @param options Options for the client.
     */
    function BaseClient(backendClass, options) {
        /** Array of used integrations. */
        this._integrations = {};
        /** Is the client still processing a call? */
        this._processing = false;
        this._backend = new backendClass(options);
        this._options = options;
        if (options.dsn) {
            this._dsn = new Dsn(options.dsn);
        }
        if (this._isEnabled()) {
            this._integrations = setupIntegrations(this._options);
        }
    }
    // code ...
    return BaseClient;
}());

小结1. new BrowerClient 经过一系列的继承和初始化

可以输出下具体new clientClass(options)之后的结果:

function initAndBind(clientClass, options) {
    if (options.debug === true) {
        logger.enable();
    }
    var client = new clientClass(options);
    console.log('new clientClass(options)', client);
    getCurrentHub().bindClient(client);
    // 原来的代码
    // getCurrentHub().bindClient(new clientClass(options));
}

最终输出得到这样的数据。我画了一张图表示。重点关注的原型链用颜色标注了,其他部分收缩了。

sentry new BrowserClient 实例图 By@若川

initAndBind 函数之 getCurrentHub().bindClient()

继续看 initAndBind 的另一条线。

function initAndBind(clientClass, options) {
    if (options.debug === true) {
        logger.enable();
    }
    getCurrentHub().bindClient(new clientClass(options));
}

获取当前的控制中心 Hub,再把new BrowserClient() 的实例对象绑定在Hub上。

getCurrentHub 函数

// 获取当前Hub 控制中心
function getCurrentHub() {
    // Get main carrier (global for every environment)
    var registry = getMainCarrier();
    // 如果没有控制中心在载体上,或者它的版本是老版本,就设置新的。
    // If there's no hub, or its an old API, assign a new one
    if (!hasHubOnCarrier(registry) || getHubFromCarrier(registry).isOlderThan(API_VERSION)) {
        setHubOnCarrier(registry, new Hub());
    }
    // node 才执行
    // Prefer domains over global if they are there (applicable only to Node environment)
    if (isNodeEnv()) {
        return getHubFromActiveDomain(registry);
    }
    // 返回当前控制中心来自载体上。
    // Return hub that lives on a global object
    return getHubFromCarrier(registry);
}

衍生的函数 getMainCarrier、getHubFromCarrier

<!-- 获取主载体 -->

function getMainCarrier() {
    // 载体 这里是window
    // 通过一系列new BrowerClient() 一系列的初始化
    // 挂载在  carrier.__SENTRY__ 已经有了三个属性,globalEventProcessors, hub, logger
    var carrier = getGlobalObject();
    carrier.__SENTRY__ = carrier.__SENTRY__ || {
        hub: undefined,
    };
    return carrier;
}
// 获取控制中心 hub 从载体上
function getHubFromCarrier(carrier) {
    // 已经有了则返回,没有则new Hub
    if (carrier && carrier.__SENTRY__ && carrier.__SENTRY__.hub) {
        return carrier.__SENTRY__.hub;
    }
    carrier.__SENTRY__ = carrier.__SENTRY__ || {};
    carrier.__SENTRY__.hub = new Hub();
    return carrier.__SENTRY__.hub;
}

bindClient 绑定客户端在当前控制中心上

Hub.prototype.bindClient = function (client) {
    // 获取最后一个
    var top = this.getStackTop();
    // 把 new BrowerClient() 实例 绑定到top上
    top.client = client;
};
Hub.prototype.getStackTop = function () {
    // 获取最后一个
    return this._stack[this._stack.length - 1];
};

小结2. 经过一系列的继承和初始化

再回过头来看 initAndBind函数

function initAndBind(clientClass, options) {
    if (options.debug === true) {
        logger.enable();
    }
    var client = new clientClass(options);
    console.log(client, options, 'client, options');
    var currentHub = getCurrentHub();
    currentHub.bindClient(client);
    console.log('currentHub', currentHub);
    // 源代码
    // getCurrentHub().bindClient(new clientClass(options));
}

最终会得到这样的Hub实例对象。笔者画了一张图表示,便于查看理解。

Hub 实例关系图

初始化完成后,再来看具体例子。
具体 captureMessage 函数的实现。

Sentry.captureMessage('Hello, 若川!');

captureMessage 函数

通过之前的阅读代码,知道会最终会调用Fetch接口,所以直接断点调试即可,得出如下调用栈。
接下来描述调用栈的主要流程。

captureMessage 断点调试图

调用栈主要流程:

captureMessage

function captureMessage(message, level) {
    var syntheticException;
    try {
        throw new Error(message);
    }
    catch (exception) {
        syntheticException = exception;
    }
    // 调用 callOnHub 方法
    return callOnHub('captureMessage', message, level, {
        originalException: message,
        syntheticException: syntheticException,
    });
}

=> callOnHub

/**
 * This calls a function on the current hub.
 * @param method function to call on hub.
 * @param args to pass to function.
 */
function callOnHub(method) {
    // 这里method 传进来的是 'captureMessage'
    // 把method除外的其他参数放到args数组中
    var args = [];
    for (var _i = 1; _i < arguments.length; _i++) {
        args[_i - 1] = arguments[_i];
    }
    // 获取当前控制中心 hub
    var hub = getCurrentHub();
    // 有这个方法 把args 数组展开,传递给 hub[method] 执行
    if (hub && hub[method]) {
        // tslint:disable-next-line:no-unsafe-any
        return hub[method].apply(hub, __spread(args));
    }
    throw new Error("No hub defined or " + method + " was not found on the hub, please open a bug report.");
}

=> Hub.prototype.captureMessage

接着看Hub.prototype 上定义的 captureMessage 方法

Hub.prototype.captureMessage = function (message, level, hint) {
    var eventId = (this._lastEventId = uuid4());
    var finalHint = hint;
    // 代码有删减
    this._invokeClient('captureMessage', message, level, __assign({}, finalHint, { event_id: eventId }));
    return eventId;
};

=> Hub.prototype._invokeClient

/**
 * Internal helper function to call a method on the top client if it exists.
 *
 * @param method The method to call on the client.
 * @param args Arguments to pass to the client function.
 */
Hub.prototype._invokeClient = function (method) {
    // 同样:这里method 传进来的是 'captureMessage'
    // 把method除外的其他参数放到args数组中
    var _a;
    var args = [];
    for (var _i = 1; _i < arguments.length; _i++) {
        args[_i - 1] = arguments[_i];
    }
    var top = this.getStackTop();
    // 获取控制中心的 hub,调用客户端也就是new BrowerClient () 实例中继承自 BaseClient 的 captureMessage 方法
    // 有这个方法 把args 数组展开,传递给 hub[method] 执行
    if (top && top.client && top.client[method]) {
        (_a = top.client)[method].apply(_a, __spread(args, [top.scope]));
    }
};

=> BaseClient.prototype.captureMessage

BaseClient.prototype.captureMessage = function (message, level, hint, scope) {
    var _this = this;
    var eventId = hint && hint.event_id;
    this._processing = true;
    var promisedEvent = isPrimitive(message)
        ? this._getBackend().eventFromMessage("" + message, level, hint)
        : this._getBackend().eventFromException(message, hint);
        // 代码有删减
    promisedEvent
        .then(function (event) { return _this._processEvent(event, hint, scope); })
    // 代码有删减
    return eventId;
};

最后会调用 _processEvent 也就是

=> BaseClient.prototype._processEvent

这个函数最终会调用

_this._getBackend().sendEvent(finalEvent);

也就是

=> BaseBackend.prototype.sendEvent

BaseBackend.prototype.sendEvent = function (event) {
    this._transport.sendEvent(event).then(null, function (reason) {
        logger.error("Error while sending event: " + reason);
    });
};

=> FetchTransport.prototype.sendEvent 最终发送了请求

FetchTransport.prototype.sendEvent

FetchTransport.prototype.sendEvent = function (event) {
    var defaultOptions = {
        body: JSON.stringify(event),
        method: 'POST',
        // Despite all stars in the sky saying that Edge supports old draft syntax, aka 'never', 'always', 'origin' and 'default
        // https://caniuse.com/#feat=referrer-policy
        // It doesn't. And it throw exception instead of ignoring this parameter...
        // REF: https://github.com/getsentry/raven-js/issues/1233
        referrerPolicy: (supportsReferrerPolicy() ? 'origin' : ''),
    };
    // global$2.fetch(this.url, defaultOptions) 使用fetch发送请求
    return this._buffer.add(global$2.fetch(this.url, defaultOptions).then(function (response) { return ({
        status: exports.Status.fromHttpCode(response.status),
    }); }));
};

看完 Ajax 上报 主线,再看本文的另外一条主线 window.onerror 捕获。

window.onerror 和 window.onunhandledrejection 捕获 错误

例子:调用一个未申明的变量。

func();

Promise 不捕获错误

new Promise(() => {
    fun();
})
.then(res => {
    console.log('then');
})

captureEvent

调用栈主要流程:

window.onerror

GlobalHandlers.prototype._installGlobalOnErrorHandler = function () {
    if (this._onErrorHandlerInstalled) {
        return;
    }
    var self = this; // tslint:disable-line:no-this-assignment
    // 浏览器中这里的 this._global.  就是window
    this._oldOnErrorHandler = this._global.onerror;
    this._global.onerror = function (msg, url, line, column, error) {
        var currentHub = getCurrentHub();
        // 代码有删减
        currentHub.captureEvent(event, {
            originalException: error,
        });
        if (self._oldOnErrorHandler) {
            return self._oldOnErrorHandler.apply(this, arguments);
        }
        return false;
    };
    this._onErrorHandlerInstalled = true;
};
window.onunhandledrejection
GlobalHandlers.prototype._installGlobalOnUnhandledRejectionHandler = function () {
    if (this._onUnhandledRejectionHandlerInstalled) {
        return;
    }
    var self = this; // tslint:disable-line:no-this-assignment
    this._oldOnUnhandledRejectionHandler = this._global.onunhandledrejection;
    this._global.onunhandledrejection = function (e) {
        // 代码有删减
        var currentHub = getCurrentHub();
        currentHub.captureEvent(event, {
            originalException: error,
        });
        if (self._oldOnUnhandledRejectionHandler) {
            return self._oldOnUnhandledRejectionHandler.apply(this, arguments);
        }
        return false;
    };
    this._onUnhandledRejectionHandlerInstalled = true;
};

共同点:都会调用currentHub.captureEvent

currentHub.captureEvent(event, {
    originalException: error,
});

=> Hub.prototype.captureEvent

最终又是调用 _invokeClient ,调用流程跟 captureMessage 类似,这里就不再赘述。

this._invokeClient('captureEvent')

=> Hub.prototype._invokeClient

=> BaseClient.prototype.captureEvent

=> BaseClient.prototype._processEvent

=> BaseBackend.prototype.sendEvent

=> FetchTransport.prototype.sendEvent

最终同样是调用了这个函数发送了请求。

可谓是殊途同归,行文至此就基本已经结束,最后总结一下。

总结

Sentry-JavaScript源码高效利用了JS的原型链机制。可谓是惊艳,值得学习。

本文通过梳理前端错误监控知识、介绍sentry错误监控原理、sentry初始化、Ajax上报、window.onerror、window.onunhandledrejection几个方面来学习sentry的源码。还有很多细节和构造函数没有分析。

总共的构造函数(类)有25个,提到的主要有9个,分别是:Hub、BaseClient、BaseBackend、BaseTransport、FetchTransport、XHRTransport、BrowserBackend、BrowserClient、GlobalHandlers

其他没有提到的分别是 SentryError、Logger、Memo、SyncPromise、PromiseBuffer、Span、Scope、Dsn、API、NoopTransport、FunctionToString、InboundFilters、TryCatch、Breadcrumbs、LinkedErrors、UserAgent

这些构造函数(类)中还有很多值得学习,比如同步的Promise(SyncPromise)。
有兴趣的读者,可以看这一块官方仓库中采用typescript写的源码SyncPromise,也可以看打包后出来未压缩的代码。

读源码比较耗费时间,写文章记录下来更加费时间(比如写这篇文章跨度十几天...),但收获一般都比较大。

如果读者发现有不妥或可改善之处,再或者哪里没写明白的地方,欢迎评论指出。另外觉得写得不错,对您有些许帮助,可以点赞、评论、转发分享,也是对笔者的一种支持。万分感谢。

推荐阅读

知乎滴滴云:超详细!搭建一个前端错误监控系统
掘金BlackHole1:JavaScript集成Sentry
丁香园 开源的Sentry 小程序 SDKsentry-miniapp
sentry官网
sentry-javascript仓库

笔者往期文章

学习 lodash 源码整体架构,打造属于自己的函数式编程类库
学习 underscore 源码整体架构,打造属于自己的函数式编程类库
学习 jQuery 源码整体架构,打造属于自己的 js 类库
面试官问:JS的继承
面试官问:JS的this指向
面试官问:能否模拟实现JS的call和apply方法
面试官问:能否模拟实现JS的bind方法
面试官问:能否模拟实现JS的new操作符
前端使用puppeteer 爬虫生成《React.js 小书》PDF并合并

关于

作者:常以若川为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少,唯善学。
个人博客-若川-本文链接地址,使用vuepress重构了,阅读体验可能更好些
掘金专栏,欢迎关注~
segmentfault前端视野专栏,欢迎关注~
知乎前端视野专栏,欢迎关注~
github blog,相关源码和资源都放在这里,求个star^_^~

欢迎加微信交流 微信公众号

可能比较有趣的微信公众号,长按扫码关注。也可以加微信 ruochuan12,注明来源,拉您进【前端视野交流群】。

若川视野

查看原文

wjkang 赞了文章 · 2019-06-02

当我们在谈论高并发的时候究竟在谈什么?

什么是高并发?

高并发是互联网分布式系统架构的性能指标之一,它通常是指单位时间内系统能够同时处理的请求数,
简单点说,就是QPS(Queries per second)。

那么我们在谈论高并发的时候,究竟在谈些什么东西呢?

高并发究竟是什么?

这里先给出结论:
高并发的基本表现为单位时间内系统能够同时处理的请求数,
高并发的核心是对CPU资源的有效压榨

举个例子,如果我们开发了一个叫做MD5穷举的应用,每个请求都会携带一个md5加密字符串,最终系统穷举出所有的结果,并返回原始字符串。这个时候我们的应用场景或者说应用业务是属于CPU密集型而不是IO密集型。这个时候CPU一直在做有效计算,甚至可以把CPU利用率跑满,这时我们谈论高并发并没有任何意义。(当然,我们可以通过加机器也就是加CPU来提高并发能力,这个是一个正常猿都知道废话方案,谈论加机器没有什么意义,没有任何高并发是加机器解决不了,如果有,那说明你加的机器还不够多!🐶)

对于大多数互联网应用来说,CPU不是也不应该是系统的瓶颈,系统的大部分时间的状况都是CPU在等I/O (硬盘/内存/网络) 的读/写操作完成。

这个时候就可能有人会说,我看系统监控的时候,内存和网络都很正常,但是CPU利用率却跑满了这是为什么?

这是一个好问题,后文我会给出实际的例子,再次强调上文说的 '有效压榨' 这4个字,这4个字会围绕本文的全部内容!

控制变量法

万事万物都是互相联系的,当我们在谈论高并发的时候,系统的每个环节应该都是需要与之相匹配的。我们先来回顾一下一个经典C/S的HTTP请求流程。

clipboard.png

如图中的序号所示:
1 我们会经过DNS服务器的解析,请求到达负载均衡集群
2 负载均衡服务器会根据配置的规则,想请求分摊到服务层。服务层也是我们的业务核心层,这里可能也会有一些PRC、MQ的一些调用等等
3 再经过缓存层
4 最后持久化数据
5 返回数据给客户端

要达到高并发,我们需要 负载均衡、服务层、缓存层、持久层 都是高可用、高性能的,甚至在第5步,我们也可以通过 压缩静态文件、HTTP2推送静态文件、CDN来做优化,这里的每一层我们都可以写几本书来谈优化。

本文主要讨论服务层这一块,即图红线圈出来的那部分。不再考虑讲述数据库、缓存相关的影响。
高中的知识告诉我们,这个叫 控制变量法

再谈并发

  • 网络编程模型的演变历史

clipboard.png

并发问题一直是服务端编程中的重点和难点问题,为了优系统的并发量,从最初的Fork进程开始,到进程池/线程池,再到epoll事件驱动(Nginx、node.js反人类回调),再到协程。
从上中可以很明显的看出,整个演变的过程,就是对CPU有效性能压榨的过程。
什么?不明显?

  • 那我们再谈谈上下文切换

在谈论上下文切换之前,我们再明确两个名词的概念。
并行:两个事件同一时刻完成。
并发:两个事件在同一时间段内交替发生,从宏观上看,两个事件都发生了

线程是操作系统调度的最小单位,进程是资源分配的最小单位。由于CPU是串行的,因此对于单核CPU来说,同一时刻一定是只有一个线程在占用CPU资源的。因此,Linux作为一个多任务(进程)系统,会频繁的发生进程/线程切换。

在每个任务运行前,CPU都需要知道从哪里加载,从哪里运行,这些信息保存在CPU寄存器和操作系统的程序计数器里面,这两样东西就叫做 CPU上下文
进程是由内核来管理和调度的,进程的切换只能发生在内核态,因此 虚拟内存、栈、全局变量等用户空间的资源,以及内核堆栈、寄存器等内核空间的状态,就叫做 进程上下文
前面说过,线程是操作系统调度的最小单位。同时线程会共享父进程的虚拟内存和全局变量等资源,因此 父进程的资源加上线上自己的私有数据就叫做线程的上下文

对于线程的上下文切换来说,如果是同一进程的线程,因为有资源共享,所以会比多进程间的切换消耗更少的资源。

现在就更容易解释了,进程和线程的切换,会产生CPU上下文切换和进程/线程上下文的切换。而这些上下文切换,都是会消耗额外的CPU的资源的。

  • 进一步谈谈协程的上下文切换

那么协程就不需要上下文切换了吗?需要,但是不会产生CPU上下文切换进程/线程上下文的切换,因为这些切换都是在同一个线程中,即用户态中的切换,你甚至可以简单的理解为协程上下文之间的切换,就是移动了一下你程序里面的指针,CPU资源依旧属于当前线程。
需要深刻理解的,可以再深入看看Go的GMP模型
最终的效果就是协程进一步压榨了CPU的有效利用率

回到开始的那个问题

这个时候就可能有人会说,我看系统监控的时候,内存和网络都很正常,但是CPU利用率却跑满了这是为什么?

注意本篇文章在谈到CPU利用率的时候,一定会加上有效两字作为定语,CPU利用率跑满,很多时候其实是做了很多低效的计算。
以"世界上最好的语言"为例,典型PHP-FPM的CGI模式,每一个HTTP请求:
都会读取框架的数百个php文件,
都会重新建立/释放一遍MYSQL/REIDS/MQ连接,
都会重新动态解释编译执行PHP文件,
都会在不同的php-fpm进程直接不停的切换切换再切换。

php的这种CGI运行模式,根本上就决定了它在高并发上的灾难性表现

找到问题,往往比解决问题更难。当我们理解了当我们在谈论高并发究竟在谈什么 之后,我们会发现高并发和高性能并不是编程语言限制了你,限制你的只是你的思想。

找到问题,解决问题!当我们能有效压榨CPU性能之后,能达到什么样的效果?

下面我们看看 php+swoole的HTTP服务 与 Java高性能的异步框架netty的HTTP服务之间的性能差异对比。

性能对比前的准备

Swoole是一个为PHP用C和C++编写的基于事件的高性能异步&协程并行网络通信引擎
Netty是由JBOSS提供的一个java开源框架。 Netty提供异步的、事件驱动的网络应用程序框架和工具,用以快速开发高性能、高可靠性的网络服务器和客户端程序。
  • 单机能够达到的最大HTTP连接数是多少?

回忆一下计算机网络的相关知识,HTTP协议是应用层协议,在传输层,每个TCP连接建立之前都会进行三次握手。
每个TCP连接由 本地ip,本地端口,远端ip,远端端口,四个属性标识。
TCP协议报文头如下(图片来自维基百科):

clipboard.png

本地端口由16位组成,因此本地端口的最多数量为 2^16 = 65535个。
远端端口由16位组成,因此远端端口的最多数量为 2^16 = 65535个。
同时,在linux底层的网络编程模型中,每个TCP连接,操作系统都会维护一个File descriptor(fd)文件来与之对应,而fd的数量限制,可以由ulimit -n 命令查看和修改,测试之前我们可以执行命令: ulimit -n 65536修改这个限制为65535。

因此,在不考虑硬件资源限制的情况下,
本地的最大HTTP连接数为: 本地最大端口数65535 * 本地ip数1 = 65535 个。
远端的最大HTTP连接数为:远端最大端口数65535 * 远端(客户端)ip数+∞ = 无限制~~ 。
PS: 实际上操作系统会有一些保留端口占用,因此本地的连接数实际也是达不到理论值的。

性能对比

  • 测试资源

各一台docker容器,1G内存+2核CPU,如图所示:

clipboard.png

docker-compose编排如下:

# java8
version: "2.2"
services:
  java8:
    container_name: "java8"
    hostname: "java8"
    image: "java:8"
    volumes:
      - /home/cg/MyApp:/MyApp
    ports:
      - "5555:8080"
    environment:
      - TZ=Asia/Shanghai
    working_dir: /MyApp
    cpus: 2
    cpuset: 0,1

    mem_limit: 1024m
    memswap_limit: 1024m
    mem_reservation: 1024m
    tty: true
    
# php7-sw
version: "2.2"
services:
  php7-sw:
    container_name: "php7-sw"
    hostname: "php7-sw"
    image: "mileschou/swoole:7.1"
    volumes:
      - /home/cg/MyApp:/MyApp
    ports:
      - "5551:8080"
    environment:
      - TZ=Asia/Shanghai
    working_dir: /MyApp
    cpus: 2
    cpuset: 0,1

    mem_limit: 1024m
    memswap_limit: 1024m
    mem_reservation: 1024m
    tty: true    
  • php代码
<?php

use Swoole\Server;
use Swoole\Http\Response;

$http = new swoole_http_server("0.0.0.0", 8080);
$http->set([
    'worker_num' => 2
]);
$http->on("request", function ($request, Response $response) {
    //go(function () use ($response) {
        // Swoole\Coroutine::sleep(0.01);
        $response->end('Hello World');
    //});
});

$http->on("start", function (Server $server) {
    go(function () use ($server) {
        echo "server listen on 0.0.0.0:8080 \n";
    });
});
$http->start();
  • Java关键代码

源代码来自, https://github.com/netty/netty

    public static void main(String[] args) throws Exception {
        // Configure SSL.
        final SslContext sslCtx;
        if (SSL) {
            SelfSignedCertificate ssc = new SelfSignedCertificate();
            sslCtx = SslContextBuilder.forServer(ssc.certificate(), ssc.privateKey()).build();
        } else {
            sslCtx = null;
        }

        // Configure the server.
        EventLoopGroup bossGroup = new NioEventLoopGroup(2);
        EventLoopGroup workerGroup = new NioEventLoopGroup();
        try {
            ServerBootstrap b = new ServerBootstrap();
            b.option(ChannelOption.SO_BACKLOG, 1024);
            b.group(bossGroup, workerGroup)
             .channel(NioServerSocketChannel.class)
             .handler(new LoggingHandler(LogLevel.INFO))
             .childHandler(new HttpHelloWorldServerInitializer(sslCtx));

            Channel ch = b.bind(PORT).sync().channel();

            System.err.println("Open your web browser and navigate to " +
                    (SSL? "https" : "http") + "://127.0.0.1:" + PORT + '/');

            ch.closeFuture().sync();
        } finally {
            bossGroup.shutdownGracefully();
            workerGroup.shutdownGracefully();
        }
    }

因为我只给了两个核心的CPU资源,所以两个服务均只开启连个work进程即可。
5551端口表示PHP服务。
5555端口表示Java服务。

  • 压测工具结果对比:ApacheBench (ab)

ab命令: docker run --rm jordi/ab -k -c 1000 -n 1000000 http://10.234.3.32:5555/
在并发1000进行100万次Http请求的基准测试中,

Java + netty 压测结果:

clipboard.png

clipboard.png

PHP + swoole 压测结果:

clipboard.png

clipboard.png

服务QPS响应时间ms(max,min)内存(MB)
Java + netty84042.11(11,25)600+
php + swoole87222.98(9,25)30+

ps: 上图选择的是三次压测下的最佳结果。

总的来说,性能差异并不大,PHP+swoole的服务甚至比Java+netty的服务还要稍微好一点,特别是在内存占用方面,java用了600MB,php只用了30MB。
这能说明什么呢?
没有IO阻塞操作,不会发生协程切换。
这个仅仅只能说明 多线程+epoll的模式下,有效的压榨CPU性能,你甚至用PHP都能写出高并发和高性能的服务。

性能对比——见证奇迹的时刻

上面代码其实并没有展现出协程的优秀性能,因为整个请求没有阻塞操作,但往往我们的应用会伴随着例如 文档读取、DB连接/查询 等各种阻塞操作,下面我们看看加上阻塞操作后,压测结果如何。
Java和PHP代码中,我都分别加上 sleep(0.01) //秒的代码,模拟0.01秒的系统调用阻塞。
代码就不再重复贴上来了。

带IO阻塞操作的 Java + netty 压测结果:

clipboard.png

大概10分钟才能跑完所有压测。。。

带IO阻塞操作的 PHP + swoole 压测结果:

clipboard.png

服务QPS响应时间ms(max,min)内存(MB)
Java + netty1562.69(52,160)100+
php + swoole9745.20(9,25)30+

从结果中可以看出,基于协程的php+ swoole服务比 Java + netty服务的QPS高了6倍。

当然,这两个测试代码都是官方demo中的源代码,肯定还有很多可以优化的配置,优化之后,结果肯定也会好很多。

可以再思考下,为什么官方默认线程/进程数量不设置的更多一点呢?
进程/线程数量可不是越多越好哦,前面我们已经讨论过了,在进程/线程切换的时候,会产生额外的CPU资源花销,特别是在用户态和内核态之间切换的时候!

对于这些压测结果来说,我并不是针对Java,我是指 只要明白了高并发的核心是什么,找到这个目标,无论用什么编程语言,只要针对CPU利用率做有效的优化(连接池、守护进程、多线程、协程、select轮询、epoll事件驱动),你也能搭建出一个高并发和高性能的系统。

所以,你现在明白了,当我们在谈论高性能的时候,究竟在谈什么了吗?

思路永远比结果重要!

本文欢迎转载,转载请注明作者和出处即可,谢谢!

查看原文

赞 312 收藏 216 评论 55

wjkang 收藏了文章 · 2019-06-02

当我们在谈论高并发的时候究竟在谈什么?

什么是高并发?

高并发是互联网分布式系统架构的性能指标之一,它通常是指单位时间内系统能够同时处理的请求数,
简单点说,就是QPS(Queries per second)。

那么我们在谈论高并发的时候,究竟在谈些什么东西呢?

高并发究竟是什么?

这里先给出结论:
高并发的基本表现为单位时间内系统能够同时处理的请求数,
高并发的核心是对CPU资源的有效压榨

举个例子,如果我们开发了一个叫做MD5穷举的应用,每个请求都会携带一个md5加密字符串,最终系统穷举出所有的结果,并返回原始字符串。这个时候我们的应用场景或者说应用业务是属于CPU密集型而不是IO密集型。这个时候CPU一直在做有效计算,甚至可以把CPU利用率跑满,这时我们谈论高并发并没有任何意义。(当然,我们可以通过加机器也就是加CPU来提高并发能力,这个是一个正常猿都知道废话方案,谈论加机器没有什么意义,没有任何高并发是加机器解决不了,如果有,那说明你加的机器还不够多!🐶)

对于大多数互联网应用来说,CPU不是也不应该是系统的瓶颈,系统的大部分时间的状况都是CPU在等I/O (硬盘/内存/网络) 的读/写操作完成。

这个时候就可能有人会说,我看系统监控的时候,内存和网络都很正常,但是CPU利用率却跑满了这是为什么?

这是一个好问题,后文我会给出实际的例子,再次强调上文说的 '有效压榨' 这4个字,这4个字会围绕本文的全部内容!

控制变量法

万事万物都是互相联系的,当我们在谈论高并发的时候,系统的每个环节应该都是需要与之相匹配的。我们先来回顾一下一个经典C/S的HTTP请求流程。

clipboard.png

如图中的序号所示:
1 我们会经过DNS服务器的解析,请求到达负载均衡集群
2 负载均衡服务器会根据配置的规则,想请求分摊到服务层。服务层也是我们的业务核心层,这里可能也会有一些PRC、MQ的一些调用等等
3 再经过缓存层
4 最后持久化数据
5 返回数据给客户端

要达到高并发,我们需要 负载均衡、服务层、缓存层、持久层 都是高可用、高性能的,甚至在第5步,我们也可以通过 压缩静态文件、HTTP2推送静态文件、CDN来做优化,这里的每一层我们都可以写几本书来谈优化。

本文主要讨论服务层这一块,即图红线圈出来的那部分。不再考虑讲述数据库、缓存相关的影响。
高中的知识告诉我们,这个叫 控制变量法

再谈并发

  • 网络编程模型的演变历史

clipboard.png

并发问题一直是服务端编程中的重点和难点问题,为了优系统的并发量,从最初的Fork进程开始,到进程池/线程池,再到epoll事件驱动(Nginx、node.js反人类回调),再到协程。
从上中可以很明显的看出,整个演变的过程,就是对CPU有效性能压榨的过程。
什么?不明显?

  • 那我们再谈谈上下文切换

在谈论上下文切换之前,我们再明确两个名词的概念。
并行:两个事件同一时刻完成。
并发:两个事件在同一时间段内交替发生,从宏观上看,两个事件都发生了

线程是操作系统调度的最小单位,进程是资源分配的最小单位。由于CPU是串行的,因此对于单核CPU来说,同一时刻一定是只有一个线程在占用CPU资源的。因此,Linux作为一个多任务(进程)系统,会频繁的发生进程/线程切换。

在每个任务运行前,CPU都需要知道从哪里加载,从哪里运行,这些信息保存在CPU寄存器和操作系统的程序计数器里面,这两样东西就叫做 CPU上下文
进程是由内核来管理和调度的,进程的切换只能发生在内核态,因此 虚拟内存、栈、全局变量等用户空间的资源,以及内核堆栈、寄存器等内核空间的状态,就叫做 进程上下文
前面说过,线程是操作系统调度的最小单位。同时线程会共享父进程的虚拟内存和全局变量等资源,因此 父进程的资源加上线上自己的私有数据就叫做线程的上下文

对于线程的上下文切换来说,如果是同一进程的线程,因为有资源共享,所以会比多进程间的切换消耗更少的资源。

现在就更容易解释了,进程和线程的切换,会产生CPU上下文切换和进程/线程上下文的切换。而这些上下文切换,都是会消耗额外的CPU的资源的。

  • 进一步谈谈协程的上下文切换

那么协程就不需要上下文切换了吗?需要,但是不会产生CPU上下文切换进程/线程上下文的切换,因为这些切换都是在同一个线程中,即用户态中的切换,你甚至可以简单的理解为协程上下文之间的切换,就是移动了一下你程序里面的指针,CPU资源依旧属于当前线程。
需要深刻理解的,可以再深入看看Go的GMP模型
最终的效果就是协程进一步压榨了CPU的有效利用率

回到开始的那个问题

这个时候就可能有人会说,我看系统监控的时候,内存和网络都很正常,但是CPU利用率却跑满了这是为什么?

注意本篇文章在谈到CPU利用率的时候,一定会加上有效两字作为定语,CPU利用率跑满,很多时候其实是做了很多低效的计算。
以"世界上最好的语言"为例,典型PHP-FPM的CGI模式,每一个HTTP请求:
都会读取框架的数百个php文件,
都会重新建立/释放一遍MYSQL/REIDS/MQ连接,
都会重新动态解释编译执行PHP文件,
都会在不同的php-fpm进程直接不停的切换切换再切换。

php的这种CGI运行模式,根本上就决定了它在高并发上的灾难性表现

找到问题,往往比解决问题更难。当我们理解了当我们在谈论高并发究竟在谈什么 之后,我们会发现高并发和高性能并不是编程语言限制了你,限制你的只是你的思想。

找到问题,解决问题!当我们能有效压榨CPU性能之后,能达到什么样的效果?

下面我们看看 php+swoole的HTTP服务 与 Java高性能的异步框架netty的HTTP服务之间的性能差异对比。

性能对比前的准备

Swoole是一个为PHP用C和C++编写的基于事件的高性能异步&协程并行网络通信引擎
Netty是由JBOSS提供的一个java开源框架。 Netty提供异步的、事件驱动的网络应用程序框架和工具,用以快速开发高性能、高可靠性的网络服务器和客户端程序。
  • 单机能够达到的最大HTTP连接数是多少?

回忆一下计算机网络的相关知识,HTTP协议是应用层协议,在传输层,每个TCP连接建立之前都会进行三次握手。
每个TCP连接由 本地ip,本地端口,远端ip,远端端口,四个属性标识。
TCP协议报文头如下(图片来自维基百科):

clipboard.png

本地端口由16位组成,因此本地端口的最多数量为 2^16 = 65535个。
远端端口由16位组成,因此远端端口的最多数量为 2^16 = 65535个。
同时,在linux底层的网络编程模型中,每个TCP连接,操作系统都会维护一个File descriptor(fd)文件来与之对应,而fd的数量限制,可以由ulimit -n 命令查看和修改,测试之前我们可以执行命令: ulimit -n 65536修改这个限制为65535。

因此,在不考虑硬件资源限制的情况下,
本地的最大HTTP连接数为: 本地最大端口数65535 * 本地ip数1 = 65535 个。
远端的最大HTTP连接数为:远端最大端口数65535 * 远端(客户端)ip数+∞ = 无限制~~ 。
PS: 实际上操作系统会有一些保留端口占用,因此本地的连接数实际也是达不到理论值的。

性能对比

  • 测试资源

各一台docker容器,1G内存+2核CPU,如图所示:

clipboard.png

docker-compose编排如下:

# java8
version: "2.2"
services:
  java8:
    container_name: "java8"
    hostname: "java8"
    image: "java:8"
    volumes:
      - /home/cg/MyApp:/MyApp
    ports:
      - "5555:8080"
    environment:
      - TZ=Asia/Shanghai
    working_dir: /MyApp
    cpus: 2
    cpuset: 0,1

    mem_limit: 1024m
    memswap_limit: 1024m
    mem_reservation: 1024m
    tty: true
    
# php7-sw
version: "2.2"
services:
  php7-sw:
    container_name: "php7-sw"
    hostname: "php7-sw"
    image: "mileschou/swoole:7.1"
    volumes:
      - /home/cg/MyApp:/MyApp
    ports:
      - "5551:8080"
    environment:
      - TZ=Asia/Shanghai
    working_dir: /MyApp
    cpus: 2
    cpuset: 0,1

    mem_limit: 1024m
    memswap_limit: 1024m
    mem_reservation: 1024m
    tty: true    
  • php代码
<?php

use Swoole\Server;
use Swoole\Http\Response;

$http = new swoole_http_server("0.0.0.0", 8080);
$http->set([
    'worker_num' => 2
]);
$http->on("request", function ($request, Response $response) {
    //go(function () use ($response) {
        // Swoole\Coroutine::sleep(0.01);
        $response->end('Hello World');
    //});
});

$http->on("start", function (Server $server) {
    go(function () use ($server) {
        echo "server listen on 0.0.0.0:8080 \n";
    });
});
$http->start();
  • Java关键代码

源代码来自, https://github.com/netty/netty

    public static void main(String[] args) throws Exception {
        // Configure SSL.
        final SslContext sslCtx;
        if (SSL) {
            SelfSignedCertificate ssc = new SelfSignedCertificate();
            sslCtx = SslContextBuilder.forServer(ssc.certificate(), ssc.privateKey()).build();
        } else {
            sslCtx = null;
        }

        // Configure the server.
        EventLoopGroup bossGroup = new NioEventLoopGroup(2);
        EventLoopGroup workerGroup = new NioEventLoopGroup();
        try {
            ServerBootstrap b = new ServerBootstrap();
            b.option(ChannelOption.SO_BACKLOG, 1024);
            b.group(bossGroup, workerGroup)
             .channel(NioServerSocketChannel.class)
             .handler(new LoggingHandler(LogLevel.INFO))
             .childHandler(new HttpHelloWorldServerInitializer(sslCtx));

            Channel ch = b.bind(PORT).sync().channel();

            System.err.println("Open your web browser and navigate to " +
                    (SSL? "https" : "http") + "://127.0.0.1:" + PORT + '/');

            ch.closeFuture().sync();
        } finally {
            bossGroup.shutdownGracefully();
            workerGroup.shutdownGracefully();
        }
    }

因为我只给了两个核心的CPU资源,所以两个服务均只开启连个work进程即可。
5551端口表示PHP服务。
5555端口表示Java服务。

  • 压测工具结果对比:ApacheBench (ab)

ab命令: docker run --rm jordi/ab -k -c 1000 -n 1000000 http://10.234.3.32:5555/
在并发1000进行100万次Http请求的基准测试中,

Java + netty 压测结果:

clipboard.png

clipboard.png

PHP + swoole 压测结果:

clipboard.png

clipboard.png

服务QPS响应时间ms(max,min)内存(MB)
Java + netty84042.11(11,25)600+
php + swoole87222.98(9,25)30+

ps: 上图选择的是三次压测下的最佳结果。

总的来说,性能差异并不大,PHP+swoole的服务甚至比Java+netty的服务还要稍微好一点,特别是在内存占用方面,java用了600MB,php只用了30MB。
这能说明什么呢?
没有IO阻塞操作,不会发生协程切换。
这个仅仅只能说明 多线程+epoll的模式下,有效的压榨CPU性能,你甚至用PHP都能写出高并发和高性能的服务。

性能对比——见证奇迹的时刻

上面代码其实并没有展现出协程的优秀性能,因为整个请求没有阻塞操作,但往往我们的应用会伴随着例如 文档读取、DB连接/查询 等各种阻塞操作,下面我们看看加上阻塞操作后,压测结果如何。
Java和PHP代码中,我都分别加上 sleep(0.01) //秒的代码,模拟0.01秒的系统调用阻塞。
代码就不再重复贴上来了。

带IO阻塞操作的 Java + netty 压测结果:

clipboard.png

大概10分钟才能跑完所有压测。。。

带IO阻塞操作的 PHP + swoole 压测结果:

clipboard.png

服务QPS响应时间ms(max,min)内存(MB)
Java + netty1562.69(52,160)100+
php + swoole9745.20(9,25)30+

从结果中可以看出,基于协程的php+ swoole服务比 Java + netty服务的QPS高了6倍。

当然,这两个测试代码都是官方demo中的源代码,肯定还有很多可以优化的配置,优化之后,结果肯定也会好很多。

可以再思考下,为什么官方默认线程/进程数量不设置的更多一点呢?
进程/线程数量可不是越多越好哦,前面我们已经讨论过了,在进程/线程切换的时候,会产生额外的CPU资源花销,特别是在用户态和内核态之间切换的时候!

对于这些压测结果来说,我并不是针对Java,我是指 只要明白了高并发的核心是什么,找到这个目标,无论用什么编程语言,只要针对CPU利用率做有效的优化(连接池、守护进程、多线程、协程、select轮询、epoll事件驱动),你也能搭建出一个高并发和高性能的系统。

所以,你现在明白了,当我们在谈论高性能的时候,究竟在谈什么了吗?

思路永远比结果重要!

本文欢迎转载,转载请注明作者和出处即可,谢谢!

查看原文

wjkang 发布了文章 · 2019-05-10

使用 Node.js 写一个代码生成器

背景

第一次接触代码生成器用的是动软代码生成器,数据库设计好之后,一键生成后端 curd代码。之后也用过 CodeSmith , T4。目前市面上也有很多优秀的代码生成器,而且大部分都提供可视化界面操作。

自己写一个的原因是因为要集成到自己写的一个小工具中,而且使用 Node.js 这种动态脚本语言进行编写更加灵活。

原理

代码生成器的原理就是:数据 + 模板 => 文件

数据一般为数据库的表字段结构。

模板的语法与使用的模板引擎有关。

使用模板引擎将数据模板进行编译,编译后的内容输出到文件中就得到了一份代码文件。

功能

因为这个代码生成器是要集成到一个小工具 lazy-mock 内,这个工具的主要功能是启动一个 mock server 服务,包含curd功能,并且支持数据的持久化,文件变化的时候自动重启服务以最新的代码提供 api mock 服务。

代码生成器的功能就是根据配置的数据和模板,编译后将内容输出到指定的目录文件中。因为添加了新的文件,mock server 服务会自动重启。

还要支持模板的定制与开发,以及使用 CLI 安装模板。

可以开发前端项目的模板,直接将编译后的内容输出到前端项目的相关目录下,webpack 的热更新功能也会起作用。

模板引擎

模板引擎使用的是 nunjucks

lazy-mock 使用的构建工具是 gulp,使用 gulp-nodemon 实现 mock-server 服务的自动重启。所以这里使用 gulp-nunjucks-render 配合 gulp 的构建流程。

代码生成

编写一个 gulp task :

const rename = require('gulp-rename')
const nunjucksRender = require('gulp-nunjucks-render')
const codeGenerate = require('./templates/generate')
const ServerFullPath = require('./package.json').ServerFullPath; //mock -server项目的绝对路径
const FrontendFullPath = require('./package.json').FrontendFullPath; //前端项目的绝对路径
const nunjucksRenderConfig = {
  path: 'templates/server',
  envOptions: {
    tags: {
      blockStart: '<%',
      blockEnd: '%>',
      variableStart: '<$',
      variableEnd: '$>',
      commentStart: '<#',
      commentEnd: '#>'
    },
  },
  ext: '.js',
  //以上是 nunjucks 的配置
  ServerFullPath,
  FrontendFullPath
}
gulp.task('code', function () {
  require('events').EventEmitter.defaultMaxListeners = 0
  return codeGenerate(gulp, nunjucksRender, rename, nunjucksRenderConfig)
});
代码具体结构细节可以打开 lazy-mock 进行参照

为了支持模板的开发,以及更灵活的配置,我将代码生成的逻辑全都放在模板目录中。

templates 是存放模板以及数据配置的目录。结构如下:

只生成 lazy-mock 代码的模板中 :

generate.js的内容如下:

const path = require('path')
const CodeGenerateConfig = require('./config').default;
const Model = CodeGenerateConfig.model;

module.exports = function generate(gulp, nunjucksRender, rename, nunjucksRenderConfig) {
    nunjucksRenderConfig.data = {
        model: CodeGenerateConfig.model,
        config: CodeGenerateConfig.config
    }
    const ServerProjectRootPath = nunjucksRenderConfig.ServerFullPath;
    //server
    const serverTemplatePath = 'templates/server/'
    gulp.src(`${serverTemplatePath}controller.njk`)
        .pipe(nunjucksRender(nunjucksRenderConfig))
        .pipe(rename(Model.name + '.js'))
        .pipe(gulp.dest(ServerProjectRootPath + CodeGenerateConfig.config.ControllerRelativePath));

    gulp.src(`${serverTemplatePath}service.njk`)
        .pipe(nunjucksRender(nunjucksRenderConfig))
        .pipe(rename(Model.name + 'Service.js'))
        .pipe(gulp.dest(ServerProjectRootPath + CodeGenerateConfig.config.ServiceRelativePath));

    gulp.src(`${serverTemplatePath}model.njk`)
        .pipe(nunjucksRender(nunjucksRenderConfig))
        .pipe(rename(Model.name + 'Model.js'))
        .pipe(gulp.dest(ServerProjectRootPath + CodeGenerateConfig.config.ModelRelativePath));

    gulp.src(`${serverTemplatePath}db.njk`)
        .pipe(nunjucksRender(nunjucksRenderConfig))
        .pipe(rename(Model.name + '_db.json'))
        .pipe(gulp.dest(ServerProjectRootPath + CodeGenerateConfig.config.DBRelativePath));

    return gulp.src(`${serverTemplatePath}route.njk`)
        .pipe(nunjucksRender(nunjucksRenderConfig))
        .pipe(rename(Model.name + 'Route.js'))
        .pipe(gulp.dest(ServerProjectRootPath + CodeGenerateConfig.config.RouteRelativePath));
}

类似:

gulp.src(`${serverTemplatePath}controller.njk`)
        .pipe(nunjucksRender(nunjucksRenderConfig))
        .pipe(rename(Model.name + '.js'))
        .pipe(gulp.dest(ServerProjectRootPath + CodeGenerateConfig.config.ControllerRelativePath));

表示使用 controller.njk 作为模板,nunjucksRenderConfig作为数据(模板内可以获取到 nunjucksRenderConfig 属性 data 上的数据)。编译后进行文件重命名,并保存到指定目录下。

model.js 的内容如下:

var shortid = require('shortid')
var Mock = require('mockjs')
var Random = Mock.Random

//必须包含字段id
export default {
    name: "book",
    Name: "Book",
    properties: [
        {
            key: "id",
            title: "id"
        },
        {
            key: "name",
            title: "书名"
        },
        {
            key: "author",
            title: "作者"
        },
        {
            key: "press",
            title: "出版社"
        }
    ],
    buildMockData: function () {//不需要生成设为false
        let data = []
        for (let i = 0; i < 100; i++) {
            data.push({
                id: shortid.generate(),
                name: Random.cword(5, 7),
                author: Random.cname(),
                press: Random.cword(5, 7)
            })
        }
        return data
    }
}

模板中使用最多的就是这个数据,也是生成新代码需要配置的地方,比如这里配置的是 book ,生成的就是关于 book 的curd 的 mock 服务。要生成别的,修改后执行生成命令即可。

buildMockData 函数的作用是生成 mock 服务需要的随机数据,在 db.njk 模板中会使用:

{
  "<$ model.name $>":<% if model.buildMockData %><$ model.buildMockData()|dump|safe $><% else %>[]<% endif %>
}
这也是 nunjucks 如何在模板中执行函数

config.js 的内容如下:

export default {
    //server
    RouteRelativePath: '/src/routes/',
    ControllerRelativePath: '/src/controllers/',
    ServiceRelativePath: '/src/services/',
    ModelRelativePath: '/src/models/',
    DBRelativePath: '/src/db/'
}

配置相应的模板编译后保存的位置。

config/index.js 的内容如下:

import model from './model';
import config from './config';
export default {
    model,
    config
}

针对 lazy-mock 的代码生成的功能就已经完成了,要实现模板的定制直接修改模板文件即可,比如要修改 mock server 服务 api 的接口定义,直接修改 route.njk 文件:

import KoaRouter from 'koa-router'
import controllers from '../controllers/index.js'
import PermissionCheck from '../middleware/PermissionCheck'

const router = new KoaRouter()
router
    .get('/<$ model.name $>/paged', controllers.<$model.name $>.get<$ model.Name $>PagedList)
    .get('/<$ model.name $>/:id', controllers.<$ model.name $>.get<$ model.Name $>)
    .del('/<$ model.name $>/del', controllers.<$ model.name $>.del<$ model.Name $>)
    .del('/<$ model.name $>/batchdel', controllers.<$ model.name $>.del<$ model.Name $>s)
    .post('/<$ model.name $>/save', controllers.<$ model.name $>.save<$ model.Name $>)

module.exports = router

模板开发与安装

不同的项目,代码结构是不一样的,每次直接修改模板文件会很麻烦。

需要提供这样的功能:针对不同的项目开发一套独立的模板,支持模板的安装。

代码生成的相关逻辑都在模板目录的文件中,模板开发没有什么规则限制,只要保证目录名为 templatesgenerate.js中导出generate函数即可。

模板的安装原理就是将模板目录中的文件全部覆盖掉即可。不过具体的安装分为本地安装与在线安装。

之前已经说了,这个代码生成器是集成在 lazy-mock 中的,我的做法是在初始化一个新 lazy-mock 项目的时候,指定使用相应的模板进行初始化,也就是安装相应的模板。

使用 Node.js 写了一个 CLI 工具 lazy-mock-cli,已发到 npm ,其功能包含下载指定的远程模板来初始化新的 lazy-mock 项目。代码参考( copy )了 vue-cli2。代码不难,说下某些关键点。

安装 CLI 工具:

npm install lazy-mock -g

使用模板初始化项目:

lazy-mock init d2-admin-pm my-project
d2-admin-pm 是我为一个前端项目已经写好的一个模板。

init 命令调用的是 lazy-mock-init.js 中的逻辑:

#!/usr/bin/env node
const download = require('download-git-repo')
const program = require('commander')
const ora = require('ora')
const exists = require('fs').existsSync
const rm = require('rimraf').sync
const path = require('path')
const chalk = require('chalk')
const inquirer = require('inquirer')
const home = require('user-home')
const fse = require('fs-extra')
const tildify = require('tildify')
const cliSpinners = require('cli-spinners');
const logger = require('../lib/logger')
const localPath = require('../lib/local-path')

const isLocalPath = localPath.isLocalPath
const getTemplatePath = localPath.getTemplatePath

program.usage('<template-name> [project-name]')
    .option('-c, --clone', 'use git clone')
    .option('--offline', 'use cached template')

program.on('--help', () => {
    console.log('  Examples:')
    console.log()
    console.log(chalk.gray('    # create a new project with an official template'))
    console.log('    $ lazy-mock init d2-admin-pm my-project')
    console.log()
    console.log(chalk.gray('    # create a new project straight from a github template'))
    console.log('    $ vue init username/repo my-project')
    console.log()
})

function help() {
    program.parse(process.argv)
    if (program.args.length < 1) return program.help()
}
help()
//模板
let template = program.args[0]
//判断是否使用官方模板
const hasSlash = template.indexOf('/') > -1
//项目名称
const rawName = program.args[1]
//在当前文件下创建
const inPlace = !rawName || rawName === '.'
//项目名称
const name = inPlace ? path.relative('../', process.cwd()) : rawName
//创建项目完整目标位置
const to = path.resolve(rawName || '.')
const clone = program.clone || false

//缓存位置
const serverTmp = path.join(home, '.lazy-mock', 'sever')
const tmp = path.join(home, '.lazy-mock', 'templates', template.replace(/[\/:]/g, '-'))
if (program.offline) {
    console.log(`> Use cached template at ${chalk.yellow(tildify(tmp))}`)
    template = tmp
}

//判断是否当前目录下初始化或者覆盖已有目录
if (inPlace || exists(to)) {
    inquirer.prompt([{
        type: 'confirm',
        message: inPlace
            ? 'Generate project in current directory?'
            : 'Target directory exists. Continue?',
        name: 'ok'
    }]).then(answers => {
        if (answers.ok) {
            run()
        }
    }).catch(logger.fatal)
} else {
    run()
}

function run() {
    //使用本地缓存
    if (isLocalPath(template)) {
        const templatePath = getTemplatePath(template)
        if (exists(templatePath)) {
            generate(name, templatePath, to, err => {
                if (err) logger.fatal(err)
                console.log()
                logger.success('Generated "%s"', name)
            })
        } else {
            logger.fatal('Local template "%s" not found.', template)
        }
    } else {
        if (!hasSlash) {
            //使用官方模板
            const officialTemplate = 'lazy-mock-templates/' + template
            downloadAndGenerate(officialTemplate)
        } else {
            downloadAndGenerate(template)
        }
    }
}

function downloadAndGenerate(template) {
    downloadServer(() => {
        downloadTemplate(template)
    })
}

function downloadServer(done) {
    const spinner = ora('downloading server')
    spinner.spinner = cliSpinners.bouncingBall
    spinner.start()
    if (exists(serverTmp)) rm(serverTmp)
    download('wjkang/lazy-mock', serverTmp, { clone }, err => {
        spinner.stop()
        if (err) logger.fatal('Failed to download server ' + template + ': ' + err.message.trim())
        done()
    })
}

function downloadTemplate(template) {
    const spinner = ora('downloading template')
    spinner.spinner = cliSpinners.bouncingBall
    spinner.start()
    if (exists(tmp)) rm(tmp)
    download(template, tmp, { clone }, err => {
        spinner.stop()
        if (err) logger.fatal('Failed to download template ' + template + ': ' + err.message.trim())
        generate(name, tmp, to, err => {
            if (err) logger.fatal(err)
            console.log()
            logger.success('Generated "%s"', name)
        })
    })
}

function generate(name, src, dest, done) {
    try {
        fse.removeSync(path.join(serverTmp, 'templates'))
        const packageObj = fse.readJsonSync(path.join(serverTmp, 'package.json'))
        packageObj.name = name
        packageObj.author = ""
        packageObj.description = ""
        packageObj.ServerFullPath = path.join(dest)
        packageObj.FrontendFullPath = path.join(dest, "front-page")
        fse.writeJsonSync(path.join(serverTmp, 'package.json'), packageObj, { spaces: 2 })
        fse.copySync(serverTmp, dest)
        fse.copySync(path.join(src, 'templates'), path.join(dest, 'templates'))
    } catch (err) {
        done(err)
        return
    }
    done()
}

判断了是使用本地缓存的模板还是拉取最新的模板,拉取线上模板时是从官方仓库拉取还是从别的仓库拉取。

一些小问题

目前代码生成的相关数据并不是来源于数据库,而是在 model.js 中简单配置的,原因是我认为一个 mock server 不需要数据库,lazy-mock 确实如此。

但是如果写一个正儿八经的代码生成器,那肯定是需要根据已经设计好的数据库表来生成代码的。那么就需要连接数据库,读取数据表的字段信息,比如字段名称,字段类型,字段描述等。而不同关系型数据库,读取表字段信息的 sql 是不一样的,所以还要写一堆balabala的判断。可以使用现成的工具 sequelize-auto , 把它读取的 model 数据转成我们需要的格式即可。

生成前端项目代码的时候,会遇到这种情况:

某个目录结构是这样的:

index.js 的内容:

import layoutHeaderAside from '@/layout/header-aside'
export default {
    "layoutHeaderAside": layoutHeaderAside,
    "menu": () => import(/* webpackChunkName: "menu" */'@/pages/sys/menu'),
    "route": () => import(/* webpackChunkName: "route" */'@/pages/sys/route'),
    "role": () => import(/* webpackChunkName: "role" */'@/pages/sys/role'),
    "user": () => import(/* webpackChunkName: "user" */'@/pages/sys/user'),
    "interface": () => import(/* webpackChunkName: "interface" */'@/pages/sys/interface')
}

如果添加一个 book 就需要在这里加上"book": () => import(/* webpackChunkName: "book" */'@/pages/sys/book')

这一行内容也是可以通过配置模板来生成的,比如模板内容为:

"<$ model.name $>": () => import(/* webpackChunkName: "<$ model.name $>" */'@/pages<$ model.module $><$ model.name $>')

但是生成的内容怎么加到index.js中呢?

第一种方法:复制粘贴

第二种方法:

这部分的模板为 routerMapComponent.njk

export default {
    "<$ model.name $>": () => import(/* webpackChunkName: "<$ model.name $>" */'@/pages<$ model.module $><$ model.name $>')
}

编译后文件保存到 routerMapComponents 目录下,比如 book.js

修改 index.js :

const files = require.context('./', true, /\.js$/);
import layoutHeaderAside from '@/layout/header-aside'

let componentMaps = {
    "layoutHeaderAside": layoutHeaderAside,
    "menu": () => import(/* webpackChunkName: "menu" */'@/pages/sys/menu'),
    "route": () => import(/* webpackChunkName: "route" */'@/pages/sys/route'),
    "role": () => import(/* webpackChunkName: "role" */'@/pages/sys/role'),
    "user": () => import(/* webpackChunkName: "user" */'@/pages/sys/user'),
    "interface": () => import(/* webpackChunkName: "interface" */'@/pages/sys/interface'),
}
files.keys().forEach((key) => {
    if (key === './index.js') return
    Object.assign(componentMaps, files(key).default)
})
export default componentMaps
使用了 require.context

我目前也是使用了这种方法

第三种方法:

开发模板的时候,做特殊处理,读取原有 index.js 的内容,按行进行分割,在数组的最后一个元素之前插入新生成的内容,注意逗号的处理,将新数组内容重新写入 index.js 中,注意换行。

打个广告

如果你想要快速的创建一个 mock-server,同时还支持数据的持久化,又不需要安装数据库,还支持代码生成器的模板开发,欢迎试试 lazy-mock

查看原文

赞 0 收藏 0 评论 0

wjkang 发布了文章 · 2019-01-06

vue基于d2-admin的RBAC权限管理解决方案

前两篇关于vue权限路由文章的填坑,说了一堆理论,是时候操作一波了。

vue权限路由实现方式总结

vue权限路由实现方式总结二

选择d2-admin是因为element-ui的相关开源项目里,d2-admin的结构和代码是让我感到最舒服的,而且基于d2-admin实现RBAC权限管理也很方便,对d2-admin没有大的侵入性的改动。

预览地址

Github

相关概念

不了解RBAC,可以看这里企业管理系统前后端分离架构设计 系列一 权限模型篇

权限模型

  • 实现了RBAC模型权限控制
  • 菜单与路由独立管理,完全由后端返回
  • user存储用户
  • admin标识用户是否为系统管理员
  • role存储角色信息
  • roleUser存储用户与角色的关联关系
  • menu存储菜单信息,类型分为菜单功能,一个菜单下可以有多个功能,菜单类型的permission字段标识访问这个菜单需要的功能权限,功能类型的permission字段相当于此功能的别称,所以菜单类型的permission字段为其某个功能类型子节点的permission
  • permission存储角色与功能的关联关系
  • interface存储接口信息
  • functionInterface存储功能与接口关联关系,通过查找用户所属角色,再查找相关角色所具备的功能权限,再通过相关功能就可以查出用户所能访问的接口
  • route存储前端路由信息,通过permission字段过滤出用户所能访问的路由

运行流程及相关API

使用d2admin的原有登录逻辑,全局路由守卫中判断是否已经拉取权限信息,获取后标识为已获取。

const token = util.cookies.get('token')
    if (token && token !== 'undefined') {
      //拉取权限信息
      if (!isFetchPermissionInfo) {
        await fetchPermissionInfo();
        isFetchPermissionInfo = true;
        next(to.path, true)
      } else {
        next()
      }
    } else {
      // 将当前预计打开的页面完整地址临时存储 登录后继续跳转
      // 这个 cookie(redirect) 会在登录后自动删除
      util.cookies.set('redirect', to.fullPath)
      // 没有登录的时候跳转到登录界面
      next({
        name: 'login'
      })
    }
//标记是否已经拉取权限信息
let isFetchPermissionInfo = false

let fetchPermissionInfo = async () => {
  //处理动态添加的路由
  const formatRoutes = function (routes) {
    routes.forEach(route => {
      route.component = routerMapComponents[route.component]
      if (route.children) {
        formatRoutes(route.children)
      }
    })
  }
  try {
    let userPermissionInfo = await userService.getUserPermissionInfo()
    permissionMenu = userPermissionInfo.accessMenus
    permissionRouter = userPermissionInfo.accessRoutes
    permission.functions = userPermissionInfo.userPermissions
    permission.roles = userPermissionInfo.userRoles
    permission.interfaces = util.formatInterfaces(userPermissionInfo.accessInterfaces)
    permission.isAdmin = userPermissionInfo.isAdmin == 1
  } catch (ex) {
    console.log(ex)
  }
  formatRoutes(permissionRouter)
  let allMenuAside = [...menuAside, ...permissionMenu]
  let allMenuHeader = [...menuHeader, ...permissionMenu]
  //动态添加路由
  router.addRoutes(permissionRouter);
  // 处理路由 得到每一级的路由设置
  store.commit('d2admin/page/init', [...frameInRoutes, ...permissionRouter])
  // 设置顶栏菜单
  store.commit('d2admin/menu/headerSet', allMenuHeader)
  // 设置侧边栏菜单
  store.commit('d2admin/menu/fullAsideSet', allMenuAside)
  // 初始化菜单搜索功能
  store.commit('d2admin/search/init', allMenuHeader)
  // 设置权限信息
  store.commit('d2admin/permission/set', permission)
  // 加载上次退出时的多页列表
  store.dispatch('d2admin/page/openedLoad')
  await Promise.resolve()
}

后端需要返回的权限信息包括权限过滤后的角色编码集合,功能编码集合,接口信息集合,菜单列表,路由列表,以及是否系统管理员标识。格式如下

{
  "statusCode": 200,
  "msg": "",
  "data": {
    "userName": "MenuManager",
    "userRoles": [
      "R_MENUADMIN"
    ],
    "userPermissions": [
      "p_menu_view",
      "p_menu_edit",
      "p_menu_menu"
    ],
    "accessMenus": [
      {
        "title": "系统",
        "path": "/system",
        "icon": "cogs",
        "children": [
          {
            "title": "系统设置",
            "icon": "cogs",
            "children": [
              {
                "title": "菜单管理",
                "path": "/system/menu",
                "icon": "th-list"
              }
            ]
          },
          {
            "title": "组织架构",
            "icon": "pie-chart",
            "children": [
              {
                "title": "部门管理",
                "icon": "html5"
              },
              {
                "title": "职位管理",
                "icon": "opencart"
              }
            ]
          }
        ]
      }
    ],
    "accessRoutes": [
      {
        "name": "System",
        "path": "/system",
        "component": "layoutHeaderAside",
        "componentPath": "layout/header-aside/layout",
        "meta": {
          "title": "系统设置",
          "cache": true
        },
        "children": [
          {
            "name": "MenuPage",
            "path": "/system/menu",
            "component": "menu",
            "componentPath": "pages/sys/menu/index",
            "meta": {
              "title": "菜单管理",
              "cache": true
            }
          },
          {
            "name": "RoutePage",
            "path": "/system/route",
            "component": "route",
            "componentPath": "pages/sys/route/index",
            "meta": {
              "title": "路由管理",
              "cache": true
            }
          },
          {
            "name": "RolePage",
            "path": "/system/role",
            "component": "role",
            "componentPath": "pages/sys/role/index",
            "meta": {
              "title": "角色管理",
              "cache": true
            }
          },
          {
            "name": "UserPage",
            "path": "/system/user",
            "component": "user",
            "componentPath": "pages/sys/user/index",
            "meta": {
              "title": "用户管理",
              "cache": true
            }
          },
          {
            "name": "InterfacePage",
            "path": "/system/interface",
            "component": "interface",
            "meta": {
              "title": "接口管理"
            }
          }
        ]
      }
    ],
    "accessInterfaces": [
      {
        "path": "/menu/:id",
        "method": "get"
      },
      {
        "path": "/menu",
        "method": "get"
      },
      {
        "path": "/menu/save",
        "method": "post"
      },
      {
        "path": "/interface/paged",
        "method": "get"
      }
    ],
    "isAdmin": 0,
    "avatarUrl": "https://api.adorable.io/avatars/85/abott@adorable.png"
  }
}

设置菜单

将固定菜单(/menu/header/menu/aside)与后端返回的权限菜单(accessMenus)合并后,存入相应的vuex store模块中

...
let allMenuAside = [...menuAside, ...permissionMenu]
let allMenuHeader = [...menuHeader, ...permissionMenu]
...
// 设置顶栏菜单
store.commit('d2admin/menu/headerSet', allMenuHeader)
// 设置侧边栏菜单
store.commit('d2admin/menu/fullAsideSet', allMenuAside)
// 初始化菜单搜索功能
store.commit('d2admin/search/init', allMenuHeader)

处理路由

默认使用routerMapComponents 的方式处理后端返回的权限路由

//处理动态添加的路由
const formatRoutes = function (routes) {
    routes.forEach(route => {
        route.component = routerMapComponents[route.component]
        if (route.children) {
        formatRoutes(route.children)
        }
    })
}
...
formatRoutes(permissionRouter)
//动态添加路由
router.addRoutes(permissionRouter);
// 处理路由 得到每一级的路由设置
store.commit('d2admin/page/init', [...frameInRoutes, ...permissionRouter])
路由处理方式及区别可看vue权限路由实现方式总结二

设置权限信息

将角色编码集合,功能编码集合,接口信息集合,以及是否系统管理员标识存入相应的vuex store模块中

...
permission.functions = userPermissionInfo.userPermissions
permission.roles = userPermissionInfo.userRoles
permission.interfaces = util.formatInterfaces(userPermissionInfo.accessInterfaces)
permission.isAdmin = userPermissionInfo.isAdmin == 1
...
// 设置权限信息
store.commit('d2admin/permission/set', permission)

接口权限控制以及loading配置

支持使用角色编码,功能编码以及接口权限进行控制,如下

export function getMenuList() {
    return request({
        url: '/menu',
        method: 'get',
        interfaceCheck: true,
        permission:["p_menu_view"],
        loading: {
            type: 'loading',
            options: {
                fullscreen: true,
                lock: true,
                text: '加载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.8)'
            }
        },
        success: {
            type: 'message',
            options: {
                message: '加载菜单成功',
                type: 'success'
            }
        }
    })
}

interfaceCheck: true表示使用接口权限进行控制,如果vuex store中存储的接口信息与当前要请求的接口想匹配,则可发起请求,否则请求将被拦截。

permission:["p_menu_view"]表示使用角色编码和功能编码进行权限校验,如果vuex store中存储的角色编码或功能编码与当前表示的编码相匹配,则可发起请求,否则请求将被拦截。

源码位置在libs/permission.js,可根据自己需求进行修改

loading配置相关源码在libs/loading.js,根据自己需求进行配置,success也是如此,源码在libs/loading.js。 照此思路可以自行配置其它功能,比如请求失败等。

页面元素权限控制

使用指令v-permission

 <el-button
    v-permission:function.all="['p_menu_edit']"
    type="primary"
    icon="el-icon-edit"
    size="mini"
    @click="batchEdit"
    >批量编辑</el-button>

参数可为functionrole,表明以功能编码或角色编码进行校验,为空则使用两者进行校验。

修饰符all,表示必须全部匹配指令值中所有的编码。

源码位置在plugin/permission/index.js,根据自己实际需求进行修改。

使用v-if+全局方法:

<el-button
    v-if="canAdd"
    type="primary"
    icon="el-icon-circle-plus-outline"
    size="mini"
    @click="add"
    >添加</el-button>
data() {
    return {
      canAdd: this.hasPermissions(["p_menu_edit"])
    };
  },

默认同时使用角色编码与功能编码进行校验,有一项匹配即可。

类似的方法还要hasFunctionshasRoles

源码位置在plugin/permission/index.js,根据自己实际需求进行修改。

不要使用v-if="hasPermissions(['p_menu_edit'])"这种方式,会导致方法多次执行

也可以直接在组件中从vuex store读取权限信息进行校验。

开发建议

  • 页面级别的组件放到pages/目录下,并且在routerMapCompnonents/index.js中以key-value的形式导出
  • 不需要权限控制的固定菜单放到menu/aside.jsmenu/header.js
  • 不需要权限控制的路由放到router/routes.jsframeIn
  • 需要权限控制的菜单与路由通过界面的管理功能进行添加,确保菜单的path与路由的path相对应,路由的name与页面组件的name一致才能使keep-alive生效,路由的componentrouterMapCompnonents/index.js中能通过key匹配到。
  • 开发阶段菜单与路由的添加可由开发人员自行维护,并维护一份清单,上线后将清单交给相关的人去维护即可。
如果觉得麻烦,不想菜单与路由由后端返回,可以在前端维护一份菜单和路由(路由中的component还是使用字符串,参考mock/permissionMenuAndRouter.js),并且在菜单和路由上面维护相应的权限编码,一般都是使用功能编码。后端就不需要返回菜单和路由信息了,但是其他权限信息,比如角色编码,功能编码等还是需要的。通过后端返回的功能编码列表,在前端过滤出用户具备权限的菜单和路由,过滤处理后后的菜单与路由格式与之前由后端返回的格式一致,然后将处理后的菜单与路由当做后端返回的一样处理即可。

数据mock与代码生成

数据mock使用lazy-mock修改而来的d2-admin-server,数据真实来源于后端,相比其他工具,支持数据持久化,存储使用的是json文件,不需要安装数据库。简单的配置即可自动生成增删改查的接口。

后端使用中间件控制访问权限,比如:

 .get('/menu', PermissionCheck(), controllers.menu.getMenuList)

PermissionCheck默认使用接口进行校验,校验用户所能访问的API中是否匹配当前API,支持使用功能编码与角色编码进行校验PermissionCheck(["p_menu_edit"],["r_menu_admin"],true),第一个参数为功能编码,第二个为角色编码,第三个为是否使用接口进行校验。

更多详细用法可看lazy-mock文档

前端代码生成还在开发中...

查看原文

赞 10 收藏 8 评论 0

wjkang 发布了文章 · 2018-12-09

vue权限路由实现方式总结二

之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较“完美”的一种方案:菜单与路由完全由后端提供

菜单与路由完全由后端返回

这种方案前文也有提过,现在更加具体的说一说。

很多人喜欢把路由处理成菜单,或者把菜单处理成路由(我之前也是这样做的),最后发现挖的坑越来越深。

应用的菜单可能是两级,可能是三级,甚至是四到五级,而路由一般最多不会超过三级。如果应用的菜单达到五级,而用两级路由就可以就解决的情况下,为了能根据路由生成相应的菜单,有的人会弄出个五级路由出来。。。

所以墙裂建议,菜单数据与路由数据独立开,只要能根据菜单跳转到相应的路由即可。

菜单与路由都由后端提供,就需要就菜单与路由做相应的的维护功能。菜单上一些属性也是必须的,比如标题、跳转路径(也可以用跳转名称,对应路由名称即可,因为vue路由能根据名称进行跳转)。路由数据维护vue路由所需字段即可。

当然,做权限控制还得在菜单和路由上都维护相应的权限码,后端根据用户的权限过滤出用户能访问的菜单与路由。

下面是一份由后端返回的菜单和路由例子

let permissionMenu = [
    {
        title: "系统",
        path: "/system",
        icon: "folder-o",
        children: [
            {
                title: "系统设置",
                icon: "folder-o",
                children: [
                    {
                        title: "菜单管理",
                        path: "/system/menu",
                        icon: "folder-o"
                    },
                    {
                        title: "路由管理",
                        path: "/system/route",
                        icon: "folder-o"
                    }
                ]
            },
            {
                title: "权限管理",
                icon: "folder-o",
                children: [
                    {
                        title: "功能管理",
                        path: "/system/function",
                        icon: "folder-o"
                    },
                    {
                        title: "角色管理",
                        path: "/system/role",
                        icon: "folder-o"
                    },
                    {
                        title: "角色权限管理",
                        path: "/system/rolepermission",
                        icon: "folder-o"
                    },
                    {
                        title: "角色用户管理",
                        path: "/system/roleuser",
                        icon: "folder-o"
                    },
                    {
                        title: "用户角色管理",
                        path: "/system/userrole",
                        icon: "folder-o"
                    }
                ]
            },
            {
                title: "组织架构",
                icon: "folder-o",
                children: [
                    {
                        title: "部门管理",
                        path: "",
                        icon: "folder-o"
                    },
                    {
                        title: "职位管理",
                        path: "",
                        icon: "folder-o"
                    }
                ]
            },
            {
                title: "用户管理",
                icon: "folder-o",
                children: [
                    {
                        title: "用户管理",
                        path: "/system/user",
                        icon: "folder-o"
                    }
                ]
            }
        ]
    }
]

let permissionRouter = [
    {
        name: "系统设置",
        path: "/system",
        component: "layoutHeaderAside",
        componentPath:'layout/header-aside/layout',
        meta: {
            title: '系统设置'
        },
        children: [
            {
                name: "菜单管理",
                path: "/system/menu",
                meta: {
                    title: '菜单管理'
                },
                component: "menu",
                componentPath:'pages/sys/menu/index',
            },
            {
                name: "路由管理",
                path: "/system/route",
                meta: {
                    title: '路由管理'
                },
                component: "route",
                componentPath:'pages/sys/menu/index',
            }
        ]
    },
    {
        name: "权限管理",
        path: "/system",
        component: "layoutHeaderAside",
        componentPath:'layout/header-aside/layout',
        meta: {
            title: '权限管理'
        },
        children: [
            {
                name: "功能管理",
                path: "/system/function",
                meta: {
                    title: '功能管理'
                },
                component: "function",
                componentPath:'pages/sys/menu/index',
            },
            {
                name: "角色管理",
                path: "/system/role",
                meta: {
                    title: '角色管理'
                },
                component: "role",
                componentPath:'pages/sys/menu/index',
            },
            {
                name: "角色权限管理",
                path: "/system/rolepermission",
                meta: {
                    title: '角色权限管理'
                },
                component: "rolePermission",
                componentPath:'pages/sys/menu/index',
            },
            {
                name: "角色用户权限管理",
                path: "/system/roleuser",
                meta: {
                    title: '角色用户管理'
                },
                component: "roleUser",
                componentPath:'pages/sys/menu/index',
            },
            {
                name: "用户角色权限管理",
                path: "/system/userrole",
                meta: {
                    title: '用户角色管理'
                },
                component: "userRole",
                componentPath:'pages/sys/menu/index',
            }
        ]
    },
    {
        name: "用户管理",
        path: "/system",
        component: "layoutHeaderAside",
        componentPath:'layout/header-aside/layout',
        meta: {
            title: '用户管理'
        },
        children: [
            {
                name: "用户管理",
                path: "/system/user",
                meta: {
                    title: '用户管理'
                },
                component: "user",
                componentPath:'pages/sys/menu/index',
            }
        ]
    }
]

可以看到菜单最多达到三级,路由只有两级,通过菜单上的path与路由的path相对应,当点击菜单的时候就能正确的跳转。

有个小技巧:在路由的meta上维护一个title属性,在页面切换的时候,如果需要动态改变浏览器标签页的标题,可以直接从当前路由上取到,不需要到菜单上取。

菜单数据可以作为左侧菜单的数据源,也可以是顶部菜单的数据源。有的系统内容比较多,顶部可能是系统模块,左侧是模块下的菜单,切换顶部不同模块,左侧菜单要动态进行切换。做类似功能的时候,因为菜单数据与路由分开,只要关注与菜单即可,比如在菜单上加上模块属性。

当前的路由数据是完全符合vue路由声明规则的,但是直接使用添加路由的方法addRoutes动态添加路由是不行的。因为vue路由的component属性必须是一个组件,比如

{
    name: "login",
    path: "/login",
    component: () => import("@/pages/Login.vue")
}

而目前我们得到的路由数据中component属性是一个字符串。需要根据这个字符串将component属性处理成真正的组件。在路由数据中除了component这个属性不符合vue路由要求,还多了componentPath这个属性。下面介绍两种分别根据这两个属性处理路由的方法。

处理路由

使用routerMapComponents

这个名称是我取的,其实就是维护一个js文件,将组件按照key-value的规则导出,比如:

import layoutHeaderAside from '@/layout/header-aside'
export default {
    "layoutHeaderAside": layoutHeaderAside,
    "menu": () => import(/* webpackChunkName: "menu" */'@/pages/sys/menu'),
    "route": () => import(/* webpackChunkName: "route" */'@/pages/sys/route'),
    "function": () => import(/* webpackChunkName: "function" */'@/pages/permission/function'),
    "role": () => import(/* webpackChunkName: "role" */'@/pages/permission/role'),
    "rolePermission": () => import(/* webpackChunkName: "rolepermission" */'@/pages/permission/rolePermission'),
    "roleUser": () => import(/* webpackChunkName: "roleuser" */'@/pages/permission/roleUser'),
    "userRole": () => import(/* webpackChunkName: "userrole" */'@/pages/permission/userRole'),
    "user": () => import(/* webpackChunkName: "user" */'@/pages/permission/user')
}

这里的key就是与后端返回的路由数据的component属性对应。所以拿到后端返回的路由数据后,使用这份规则将路由数据处理一下即可:

const formatRoutes = function (routes) {
    routes.forEach(route => {
      route.component = routerMapComponents[route.component]
      if (route.children) {
        formatRoutes(route.children)
      }
    })
  }
formatRoutes(permissionRouter)
router.addRoutes(permissionRouter);

而且,规则列表里维护的组件都会被webpack打包成单独的js文件,即使处理路由数据的时候没有被使用到(没有被routerMapComponents[route.component]匹配出来)。当我们需要给一个页面做多种布局的时候,只需要在菜单维护界面上将component修改为routerMapComponents中相应的key即可。

标准的异步组件

按照vue官方文档的异步组件的写法,得到两种处理路由的方法,并且用到了路由数据中的componentPath:

第一种写法:

const formatRoutesByComponentPath = function (routes) {
    routes.forEach(route => {
      route.component = function (resolve) {
        require([`../${route.componentPath}.vue`], resolve)
      }
      if (route.children) {
        formatRoutesByComponentPath(route.children)
      }
    })
  }
formatRoutesByComponentPath(permissionRouter);
router.addRoutes(permissionRouter);

第二种写法:

const formatRoutesByComponentPath = function (routes) {
    routes.forEach(route => {
      route.component = () => import(`../${route.componentPath}.vue`)
      if (route.children) {
        formatRoutesByComponentPath(route.children)
      }
    })
  }
formatRoutesByComponentPath(permissionRouter);
router.addRoutes(permissionRouter);

其实在大多数人的认知里(包括我),这样的代码webpack应该是处理不了的,毕竟componentPath是运行时才确定,而webpack是“编译”时进行静态处理的。

为了验证这样的代码能不能正常运行,写了个简单的demo,感兴趣的可以下载到本地运行。

测试的结果是:上面的两种写法程序都可以正常运行。

观察打包后的代码,发现所有的组件都被打包,不管是否被使用(之前routerMapComponents方式中,只有维护进列表中的组件才会打包)。

所有的组件都被打包了,但是两种方法打包后的代码却是天差地别。

使用

route.component = function (resolve) {
    require([`../${route.componentPath}.vue`], resolve)
}

处理路由,打包后

0开头的文件是page404.vue打包后的代码,1开头的是home.vue的。这两个组件能分别打包,是因为main.js中显式的使用的这两个组件:

...
let routers = [
  {
    name: "home",
    path: "/",
    component: () => import(/* webpackChunkName: "home" */"@/pages/home.vue")
  },
  {
    name: "404",
    path: "*",
    component: () => import(/* webpackChunkName: "page404" */"@/pages/page404.vue")
  }
];

let router = new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: routers
});
...

而4开头的文件就是其它全部组件打包后的,而且额外带了点东西:

webpackJsonp([4, 0], {
    "/EbY": function(e, t, n) {
        var r = {
            "./App.vue": "M93x",
            "./pages/dynamic.vue": "fJxZ",
            "./pages/home.vue": "vkyI",
            "./pages/nouse.vue": "HYpT",
            "./pages/page404.vue": "GVrJ"
        };
        function i(e) {
            return n(a(e))
        }
        function a(e) {
            var t = r[e];
            if (! (t + 1)) throw new Error("Cannot find module '" + e + "'.");
            return t
        }
        i.keys = function() {
            return Object.keys(r)
        },
        i.resolve = a,
        e.exports = i,
        i.id = "/EbY"
    },
    GVrJ: function(e, t, n) {
        "use strict";
        Object.defineProperty(t, "__esModule", {
            value: !0
        });
        var r = {
            render: function() {
                var e = this.$createElement,
                t = this._self._c || e;
                return t("div", [this._v("\n  404\n  "), t("div", [t("router-link", {
                    attrs: {
                        to: "/"
                    }
                },
                [this._v("返回首页")])], 1)])
            },
            staticRenderFns: []
        };
        var i = n("VU/8")({
            name: "page404"
        },
        r, !1,
        function(e) {
            n("tqPO")
        },
        "data-v-5b14313a", null);
        t.
    default = i.exports
    },
    HYpT: function(e, t, n) {
        "use strict";
        Object.defineProperty(t, "__esModule", {
            value: !0
        });
        var r = {
            render: function() {
                var e = this.$createElement;
                return (this._self._c || e)("div", [this._v("\n  从未使用的组件\n")])
            },
            staticRenderFns: []
        };
        var i = n("VU/8")({
            name: "nouse"
        },
        r, !1,
        function(e) {
            n("v4yi")
        },
        "data-v-d4fde316", null);
        t.
    default = i.exports
    },
    WMa5: function(e, t) {},
    fJxZ: function(e, t, n) {
        "use strict";
        Object.defineProperty(t, "__esModule", {
            value: !0
        });
        var r = {
            render: function() {
                var e = this.$createElement,
                t = this._self._c || e;
                return t("div", [t("div", [this._v("动态路由页")]), this._v(" "), t("router-link", {
                    attrs: {
                        to: "/"
                    }
                },
                [this._v("首页")])], 1)
            },
            staticRenderFns: []
        };
        var i = n("VU/8")({
            name: "dynamic"
        },
        r, !1,
        function(e) {
            n("WMa5")
        },
        "data-v-71726d06", null);
        t.
    default = i.exports
    },
    tqPO: function(e, t) {},
    v4yi: function(e, t) {}
});

dynamic.vue,nouse.vue都被打包进去了,而且page404.vue又被打包了一次(???)。

而且有点东西:

var r = {
            "./App.vue": "M93x",
            "./pages/dynamic.vue": "fJxZ",
            "./pages/home.vue": "vkyI",
            "./pages/nouse.vue": "HYpT",
            "./pages/page404.vue": "GVrJ"
        };

这应该就是运行时使用componentPath处理路由,程序也能正常运行的关键点。

为了弄清楚page404.vue为什么又被打包了一次,我加了个simple.vue,而且在main.js也显式的import进去了,打包后发现simple.vue也是单独打包的,唯独page404.vue被打包了两次。暂时无解。。。

使用

route.component = () => import(`../${route.componentPath}.vue`)

处理路由,打包后

0开头的文件是page404.vue打包后的代码,1开头的是home.vue的,4开头是nouse.vue的,5开头是dynamic.vue的。

所有的组件都被单独打包了,而且home.vue打包后的代码还多了写东西:

webpackJsonp([1], {
    "rF/f": function(e, t) {},
    sTBc: function(e, t, n) {
        var r = {
            "./App.vue": ["M93x"],
            "./pages/dynamic.vue": ["fJxZ", 5],
            "./pages/home.vue": ["vkyI"],
            "./pages/nouse.vue": ["HYpT", 4],
            "./pages/page404.vue": ["GVrJ", 0]
        };
        function i(e) {
            var t = r[e];
            return t ? Promise.all(t.slice(1).map(n.e)).then(function() {
                return n(t[0])
            }) : Promise.reject(new Error("Cannot find module '" + e + "'."))
        }
        i.keys = function() {
            return Object.keys(r)
        },
        i.id = "sTBc",
        e.exports = i
    },
    vkyI: function(e, t, n) {
        "use strict";
        Object.defineProperty(t, "__esModule", {
            value: !0
        });
        var r = {
            name: "home",
            methods: {
                addRoutes: function() {
                    this.$router.addRoutes([{
                        name: "dynamic",
                        path: "/dynamic",
                        component: function() {
                            return n("sTBc")("./" +
                            function() {
                                return "pages/dynamic"
                            } + ".vue")
                        }
                    }]),
                    alert("路由添加成功!")
                }
            }
        },
        i = {
            render: function() {
                var e = this.$createElement,
                t = this._self._c || e;
                return t("div", [t("div", [this._v("这是首页")]), this._v(" "), t("a", {
                    attrs: {
                        href: "javascript:void(0)"
                    },
                    on: {
                        click: this.addRoutes
                    }
                },
                [this._v("动态添加路由")]), this._v("  \n  "), t("router-link", {
                    attrs: {
                        to: "/dynamic"
                    }
                },
                [this._v("前往动态路由")])], 1)
            },
            staticRenderFns: []
        };
        var s = n("VU/8")(r, i, !1,
        function(e) {
            n("rF/f")
        },
        "data-v-25e45483", null);
        t.
    default = s.exports
    }
});

可以看到

var r = {
    "./App.vue": ["M93x"],
    "./pages/dynamic.vue": ["fJxZ", 5],
    "./pages/home.vue": ["vkyI"],
    "./pages/nouse.vue": ["HYpT", 4],
    "./pages/page404.vue": ["GVrJ", 0]
};

跑里面去了,可能是因为是在home.vue里使用了route.component = () => import(../${route.componentPath}.vue)

低版本的vue-cli创建的项目,打包后的代码和前一种方式一样,并不是所有的组件都单独打包,不知道是webpack(webpack2出现这种情况),还是vue-loader的问题

小结

  • 使用routerMapComponents的方式处理路由,后端返回的路由数据上需要标识组件字段,使用此字段能匹配上前端维护的路由-组件列表(routerMapComponents.js)中的组件。使用此方式,只有维护进了路由-组件列表(routerMapComponents.js)中的组件才会被打包。
  • 使用
route.component = function (resolve) {
    require([`../${route.componentPath}.vue`], resolve)
}

方式处理路由,后端返回的路由数据上需要标识组件在前端项目目录中的具体位置(上文一直使用的componentPath字段)。使用此方式,编译时就已经显示import的组件会被单独打包,而其它全部组件会被打包在一起(不管运行时是否使用到相应的组件),404路由对应的组件会被打包两次。

  • 使用
route.component = () => import(`../${route.componentPath}.vue`)

方式处理路由,后端返回的路由数据上也需要标识组件在前端项目目录中的具体位置。使用此方式,所有的组件会被单独打包,不管是否使用。

所以,处理后端返回的路由,推荐使用第一种和第三种方式。

第一种方式,前端需要维护一份路由-组件列表(routerMapComponents.js),当相关人员维护路由的时候,前端开发需要将相应的key给出,当然也可以由维护路由的人确定key后交由前端开发。

第三种方式,前端不需要维护任何东西,只需要告诉维护路由的人相应的组件在前端项目中的路径即可,这可能会导致泄露前端项目结构,因为在打包后的代码总是可以看到的。

总结

菜单与路由完全由后端提供,菜单与路由数据分离,菜单与路由上分别标上权限标识,后端根据用户权限筛选出用户所能访问的菜单与路由,前端拿到路由数据后作相应的处理,使得路由正确的匹配上相应的组件。这应该是一种比较“完美”的vue权限路由实现方案。

有的人可能会说,既然已经前后端分离,为什么还要那么依赖于后端?

菜单与路由不由后端提供,权限过滤的时候,不还是需要后端返回的权限列表,而且权限标识还写死在菜单和路由上。

而菜单与路由完全由后端提供,并不是说前端开发要与后端开发需要更多的交流(扯皮)。菜单与路由可以做相应的维护功能,比如支持批量导出与导入,添加新菜单或路由的时候,在页面功能上进行操作即可。唯一的沟通成本就是维护路由的时候需要知道前端维护组件列表的key或者组件对应的路径,但路由也完全可以由前端开发去维护,权限标识可以待前后端确认后再维护(当然,页面上元素级别的权限控制的权限标识,还是得提前确认)。而如果菜单与路由写死在前端,一开始前后端就得确认相应的权限标识。

demo代码地址

查看原文

赞 5 收藏 3 评论 0

wjkang 发布了文章 · 2018-11-09

以中间件,路由,跨进程事件的姿势使用WebSocket--Node.js篇

上一篇文章介绍了在浏览器端以中间件,路由,跨进程事件的姿势使用原生WebSocket。这篇文章将介绍如何使用Node.js以相同的编程模式来实现WebSocket服务端。

Node.js中比较流行的两个WebSocket库分别是socket.iows。其中socket.io已经实现了跨进程事件,广播,群发等功能,并且服务端与浏览器端是配套的,在不支持WebSocket技术的浏览器会降级为使用ajax轮询。所以。这里选择使用相对而言较为底层或原始的ws,在其基础上实现文章标题所提到的编程模式。

WS

使用ws简简单单就可以启动一个WebSocket服务:

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');
});

上面的wss支持的事件有connection,close,error,headers,listening,ws支持的事件有message,close,error。更多详情可以这里

中间件

对ws进行封装,上面提到的事件:WSS的connection,ws的message,close,error。分别提供注册中间件的接口

class EasySocket {
    constructor() {
        this.connectionMiddleware = [];
        this.closeMiddleware = [];
        this.messageMiddleware = [];
        this.errorMiddleware = [];

        this.connectionFn = Promise.resolve();
        this.closeFn = Promise.resolve();
        this.messageFn = Promise.resolve();
        this.errorFn = Promise.resolve();
    }
    connectionUse(fn, runtime) {
        this.connectionMiddleware.push(fn);
        if (runtime) {
            this.connectionFn = compose(this.connectionMiddleware);
        }
        return this;
    }
    closeUse(fn, runtime) {
        this.closeMiddleware.push(fn);
        if (runtime) {
            this.closeFn = compose(this.closeMiddleware);
        }
        return this;
    }
    messageUse(fn, runtime) {
        this.messageMiddleware.push(fn);
        if (runtime) {
            this.messageFn = compose(this.messageMiddleware);
        }
        return this;
    }
    errorUse(fn, runtime) {
        this.errorMiddleware.push(fn);
        if (runtime) {
            this.errorFn = compose(this.errorMiddleware);
        }
        return this;
    }
    
}

通过xxxUse注册相应的中间件。 xxxMiddleware中就是相应的中间件。xxxFn是中间件通过compose处理后的结构。使用runtime参数可以在运行时注册中间件。

再添加一个listen方法,处理相应的中间件并且实例化WebSocket.Server

listen(config) {
        this.socket = new WebSocket.Server(config);
        this.connectionFn = compose(this.connectionMiddleware);
        this.messageFn = compose(this.messageMiddleware);
        this.closeFn = compose(this.closeMiddleware);
        this.errorFn = compose(this.errorMiddleware);
        this.socket.on('connection', (client, req) => {
            let context = { server: this, client, req };
            this.connectionFn(context).catch(error => { console.log(error) });

            client.on('message', (message) => {
                let req;
                try {
                    req = JSON.parse(message);
                } catch (error) {
                    req = message;
                }
                let messageContext = { server: this, client, req }
                this.messageFn(messageContext).catch(error => { console.log(error) })
            });

            client.on('close', (code, message) => {
                let closeContext = { server: this, client, code, message };
                this.closeFn(closeContext).catch(error => { console.log(error) })
            });

            client.on('error', (error) => {
                let errorContext = { server: this, client, error };
                this.errorFn(errorContext).catch(error => { console.log(error) })
            });
        })
    }

使用koa-compose模块处理中间件。注意xxContext传入了哪些东西,后续定义中间件的时候都可以使用。

compose的作用可看这篇文章 傻瓜式解读koa中间件处理模块koa-compose

使用:

import EasySocket from 'easy-socket-node';

const config = {
    port: 3001,
    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.
        //clientMaxWindowBits: 10,       // 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.
    }
}
const easySocket = new EasySocket();
//使用中间件获取token
easySocket
    .connectionUse((context,next)=>{
       console.log("new Connected");
       let location = url.parse(context.req.url, true);
       let token=location.query.token;
       if(!token){
           client.send("invalid token");
           client.close(1003, "invalid token");
           return;
       }
       context.client.token=token;
       next();
    });
easySocket
    .listen(config)

console.log('Now start WebSocket server on port ' + config.port + '...')

使用messageUse可以注册多个处理消息的中间件,比如

 easySocket.messageUse((context, next) => {
    //群聊处理中间件
    if (context.req.action === 'roomChatMessage') {
      //可以在这里持久化消息,将消息发送给其它群聊客户端
      console.log(context.req);
    }
    next();
  })
  .messageUse((context, next) => {
    //私聊处理中间件
    if (context.req.action === 'privateChatMessage') {
      //可以在这里持久化消息,将消息发送给私聊客户端
      console.log(context.req);
    }
    next();
  })

每个中间件都要判断context.req.action,而这个context.res就是浏览器端或客户端发送的数据。怎么消除这个频繁的if判断呢? 我们实现一个简单的消息处理路由。

路由

定义消息路由中间件

messageRouteMiddleware.js

export default (routes) => {
    return async (context, next) => {
        if (routes[context.req.action]) {
            await routes[context.req.action](context,next);
        } else {
            console.log(context.req)
            next();
        }
    }
}

定义路由

router.js

export default {
    roomChatMessage:function(context,next){
        //可以在这里持久化消息,将消息发送给其它群聊客户端,以及其它业务逻辑
        console.log(context.req);
        next();
    },
    privateChatMessage:function(context,next){
        //可以在这里持久化消息,将消息发送给私聊客户端,以及其它业务逻辑
        console.log(context.req);
        next();
    }
}

使用:

easySocket.messageUse(messageRouteMiddleware(router))

跨进程事件

上一篇文章已经介绍了跨进程事件,这里直接说实现。

使用Node的原生事件模块

import compose from './compose';
const WebSocket = require('ws');
var EventEmitter = require('events').EventEmitter;
export default class EasySocket extends EventEmitter {
    constructor() {
        ...
        this.remoteEmitMiddleware = [];

        ...
        this.remoteEmitFn = Promise.resolve();
    }
    ...
    remoteEmitUse(fn, runtime) {
        this.remoteEmitMiddleware.push(fn);
        if (runtime) {
            this.remoteEmitFn = compose(this.remoteEmitMiddleware);
        }
        return this;
    }
    listen(config) {
        this.socket = new WebSocket.Server(config);
        ...
        this.remoteEmitFn = compose(this.remoteEmitMiddleware);

        ...
    }
    emit(event, args, isLocal = false) { 
        let arr = [event, args];
        if (isLocal) {
            super.emit.apply(this, arr);
            return this;
        }
        let evt = {
            event: event,
            args: args
        }
        let remoteEmitContext = { server: this, event: evt };
        this.remoteEmitFn(remoteEmitContext).catch(error => { console.log(error) })
        return this;
    }
}

最后

源码地址:easy-socket-node

基于easy-socket-nodeeasy-socket-browser一个完整例子:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
</body>
<script data-original="https://unpkg.com/easy-socket-browser@1.1.1/lib/easy-socket.min.js"></script>
<script>
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
</body>
<script data-original="https://unpkg.com/easy-socket-browser@1.1.1/lib/easy-socket.min.js"></script>
<script>
    var client = new EasySocket({
        name: 'demo',
        autoReconnect: true,
        pingMsg: '{"type":"event","event":"ping","args":"ping"}'//模拟emit 消息体
    });
    client.openUse((context, next) => {
        console.log("open");
        next();
    })
        .closeUse((context, next) => {
            console.log("close");
            next();
        }).errorUse((context, next) => {
            console.log("error", context.event);
            next();
        }).messageUse((context, next) => {
            if (context.res.type === 'event') {
                context.client.emit(context.res.event, context.res.args, true);
            }
            next();
        })
        .reconnectUse((context, next) => {
            console.log('正在进行重连')
            next();
        })
        .remoteEmitUse((context, next) => {
            let client = context.client;
            let event = context.event;
            if (client.socket.readyState !== 1) {
                console.log("连接已断开");
            } else {
                client.socket.send(JSON.stringify({
                    type: 'event',
                    event: event.event,
                    args: event.args
                }));
                next();
            }
        });


    client.connect('ws://localhost:3001');
    var msg = 1;
    setInterval(() => {
        client.emit('chatMessage', msg++)
    }, 3000);
    client.on("serverMessage", (data) => {
        console.log("serverMessage:" + data)
    });

</script>

</html>

</script>

</html>

server.js

var EasySocket = require('easy-socket-node').default;
var config = {
    port: 3001,
    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.
        //clientMaxWindowBits: 10,       // 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.
    }
}

var remoteEmitMiddleware = (context, next) => {
    var server = context.server;
    var event = context.event;
    for (let client of server.clients.values()) {
        client.readyState == 1 && client.send(makeEventMessage(event));
    }
}
function makeEventMessage(event) {
    return JSON.stringify({
        type: 'event',
        event: event.event,
        args: event.args
    })
}
var messageRouteMiddleware = (routes) => {
    return (context, next) => {
        if (context.req.type === 'event') {
            if (routes[context.req.event]) {
                routes[context.req.event](context, next);
            } else {
                context.server.emit(context.req.event, context.req.args);//将会直接触发remoteEmitMiddleware 中间件的调用
                next();
            }
        } else {
            next();
        }
    }
}
var router = {
    chatMessage: (context, next) => {
        var req = context.req;
        context.server.emit('serverMessage', req.args);
    }
}
var server = new EasySocket();
server
    .connectionUse((context, next) => {
        context.server.clients.set(1, context.client)
        console.log('new connection')
    })
    .closeUse((context, next) => {
        console.log('close')
    })
    .messageUse(messageRouteMiddleware(router))
    .remoteEmitUse(remoteEmitMiddleware)
    .listen(config)

console.log('Now start WebSocket server on port ' + config.port + '...')

运行过程,可以停止后端服务,然后再启动,测下心跳重连

实现的聊天室例子:online chat demo

聊天室前端源码:lazy-mock-im

聊天室服务端源码:lazy-mock

查看原文

赞 0 收藏 0 评论 0

wjkang 发布了文章 · 2018-11-05

以中间件,路由,跨进程事件的姿势使用WebSocket

通过参考koa中间件,socket.io远程事件调用,以一种新的姿势来使用WebSocket。

浏览器端

浏览器端使用WebSocket很简单

// 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);
});

MDN关于WebSocket的介绍

能注册的事件有onclose,onerror,onmessage,onopen。用的比较多的是onmessage,从服务器接受到数据后,会触发message事件。通过注册相应的事件处理函数,可以根据后端推送的数据做相应的操作。

如果只是写个demo,单单输出后端推送的信息,如下使用即可:

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

实际使用过程中,我们需要判断后端推送的数据然后执行相应的操作。比如聊天室应用中,需要判断消息是广播的还是私聊的或者群聊的,以及是纯文字信息还是图片等多媒体信息。这时message处理函数里可能就是一堆的if else。那么有没有什么别的优雅的姿势呢?答案就是中间件与事件,跨进程的事件的发布与订阅。在说远程事件发布订阅之前,需要先从中间件开始,因为后面实现的远程事件发布订阅是基于中间件的。

中间件

前面说了,在WebSocket实例上可以注册事件有onclose,onerror,onmessage,onopen。每一个事件的处理函数里可能需要做各种判断,特别是message事件。参考koa,可以将事件处理函数以中间件方式来进行使用,将不同的操作逻辑分发到不同的中间件中,比如聊天室应用中,聊天信息与系统信息(比如用户登录属于系统信息)是可以放到不同的中间件中处理的。

koa提供use接口来注册中间件。我们针对不同的事件提供相应的中间件注册接口,并且对原生的WebSocket做封装。

export default class EasySocket{
    constructor(config) {
       this.url = config.url;
       this.openMiddleware = [];
       this.closeMiddleware = [];
       this.messageMiddleware = [];
       this.errorMiddleware = [];
       
       this.openFn = Promise.resolve();
       this.closeFn = Promise.resolve();
       this.messageFn = Promise.resolve();
       this.errorFn = Promise.resolve();
    }
    openUse(fn) {
        this.openMiddleware.push(fn);
        return this;
    }
    closeUse(fn) {
        this.closeMiddleware.push(fn);
        return this;
    }
    messageUse(fn) {
        this.messageMiddleware.push(fn);
        return this;
    }
    errorUse(fn) {
        this.errorMiddleware.push(fn);
        return this;
    }
}

通过xxxUse注册相应的中间件。 xxxMiddleware中就是相应的中间件。xxxFn 中间件通过compose处理后的结构

再添加一个connect方法,处理相应的中间件并且实例化原生WebSocket

connect(url) {
        this.url = url || this.url;
        if (!this.url) {
            throw new Error('url is required!');
        }
        try {
            this.socket = new WebSocket(this.url, 'echo-protocol');
        } catch (e) {
            throw e;
        }

        this.openFn = compose(this.openMiddleware);
        this.socket.addEventListener('open', (event) => {
            let context = { client: this, event };
            this.openFn(context).catch(error => { console.log(error) });
        });

        this.closeFn = compose(this.closeMiddleware);
        this.socket.addEventListener('close', (event) => {
            let context = { client: this, event };
            this.closeFn(context).then(() => {
            }).catch(error => {
                console.log(error)
            });
        });

        this.messageFn = compose(this.messageMiddleware);
        this.socket.addEventListener('message', (event) => {
            let res;
            try {
                res = JSON.parse(event.data);
            } catch (error) {
                res = event.data;
            }
            let context = { client: this, event, res };
            this.messageFn(context).then(() => {

            }).catch(error => {
                console.log(error)
            });
        });

        this.errorFn = compose(this.errorMiddleware);
        this.socket.addEventListener('error', (event) => {
            let context = { client: this, event };
            this.errorFn(context).then(() => {

            }).catch(error => {
                console.log(error)
            });
        });
        return this;
    }

使用koa-compose模块处理中间件。注意context传入了哪些东西,后续定义中间件的时候都已使用。

compose的作用可看这篇文章 傻瓜式解读koa中间件处理模块koa-compose

然后就可以使用了:

new EasySocket()
  .openUse((context, next) => {
    console.log("open");
    next();
  })
  .closeUse((context, next) => {
    console.log("close");
    next();
  })
  .errorUse((context, next) => {
    console.log("error", context.event);
    next();
  })
  .messageUse((context, next) => {
    //用户登录处理中间件
    if (context.res.action === 'userEnter') {
      console.log(context.res.user.name+' 进入聊天室');
    }
    next();
  })
  .messageUse((context, next) => {
    //创建房间处理中间件
    if (context.res.action === 'createRoom') {
      console.log('创建房间 '+context.res.room.anme);
    }
    next();
  })
  .connect('ws://localhost:8080')

可以看到,用户登录与创建房间的逻辑放到两个中间件中分开处理。不足之处就是每个中间件都要判断context.res.action,而这个context.res就是后端返回的数据。怎么消除这个频繁的if判断呢? 我们实现一个简单的消息处理路由。

路由

定义消息路由中间件

messageRouteMiddleware.js

export default (routes) => {
    return async (context, next) => {
        if (routes[context.req.action]) {
            await routes[context.req.action](context,next);
        } else {
            console.log(context.req)
            next();
        }
    }
}

定义路由

router.js

export default {
    userEnter:function(context,next){
        console.log(context.res.user.name+' 进入聊天室');
        next();
    },
    createRoom:function(context,next){
        console.log('创建房间 '+context.res.room.anme);
        next();
    }
}

使用:

new EasySocket()
  .openUse((context, next) => {
    console.log("open");
    next();
  })
  .closeUse((context, next) => {
    console.log("close");
    next();
  })
  .errorUse((context, next) => {
    console.log("error", context.event);
    next();
  })
  .messageUse(messageRouteMiddleware(router))//使用消息路由中间件,并传入定义好的路由
  .connect('ws://localhost:8080')

一切都变得美好了,感觉就像在使用koa。想一个问题,当接收到后端推送的消息时,我们需要做相应的DOM操作。比如路由里面定义的userEnter,我们可能需要在对应的函数里操作用户列表的DOM,追加新用户。这使用原生JS或JQ都是没有问题的,但是如果使用vue,react这些,因为是组件化的,用户列表可能就是一个组件,怎么访问到这个组件实例呢?(当然也可以访问vuex,redux的store,但是并不是所有组件的数据都是用store管理的)。

我们需要一个运行时注册中间件的功能,然后在组件的相应的生命周期钩子里注册中间件并且传入组件实例

运行时注册中间件,修改如下代码:

messageUse(fn, runtime) {
        this.messageMiddleware.push(fn);
        if (runtime) {
            this.messageFn = compose(this.messageMiddleware);
        }
        return this;
    }

修改 messageRouteMiddleware.js

export default (routes,component) => {
    return async (context, next) => {
        if (routes[context.req.action]) {
            context.component=component;//将组件实例挂到context下
            await routes[context.req.action](context,next);
        } else {
            console.log(context.req)
            next();
        }
    }
}

类似vue mounted中使用

mounted(){
  let client = this.$wsClients.get("im");//获取指定EasySocket实例
  client.messageUse(messageRouteMiddleware(router,this),true)//运行时注册中间件,并传入定义好的路由以及当前组件中的this
}

路由中通过 context.component 即可访问到当前组件。

完美了吗?每次组件mounted 都注册一次中间件,问题很大。所以需要一个判断中间件是否已经注册的功能。也就是一个支持具名注册中间件的功能。这里就暂时不实现了,走另外一条路,也就是之前说到的远程事件的发布与订阅,我们也可以称之为跨进程事件。

跨进程事件

看一段socket.io的代码:

Server (app.js)

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');
app.listen(80);
function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}
io.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

Client (index.html)

<script data-original="/socket.io/socket.io.js"></script>
<script>
  var socket = io('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

注意力转到这两部分:

服务端

  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });

客户端

  var socket = io('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });

使用事件,客户端通过on订阅'news'事件,并且当触发‘new’事件的时候通过emit发布'my other event'事件。服务端在用户连接的时候发布'news'事件,并且订阅'my other event'事件。

一般我们使用事件的时候,都是在同一个页面中on和emit。而socket.io的神奇之处就是同一事件的on和emit是分别在客户端和服务端,这就是跨进程的事件。

那么,在某一端emit某个事件的时候,另一端如果on监听了此事件,是如何知道这个事件emit(发布)了呢?

没有看socket.io源码之前,我设想应该是emit方法里做了某些事情。就像java或c#,实现rpc的时候,可以依据接口定义动态生成实现(也称为代理),动态实现的(代理)方法中,就会将当前方法名称以及参数通过相应协议进行序列化,然后通过http或者tcp等网络协议传输到RPC服务端,服务端进行反序列化,通过反射等技术调用本地实现,并返回执行结果给客户端。客户端拿到结果后,整个调用完成,就像调用本地方法一样实现了远程方法的调用。

看了socket.io emit的代码实现后,思路也是大同小异,通过将当前emit的事件名和参数按一定规则组合成数据,然后将数据通过WebSocket的send方法发送出去。接收端按规则取到事件名和参数,然后本地触发emit。(注意远程emit和本地emit,socket.io中直接调用的是远程emit)。

下面是实现代码,事件直接用的emitter模块,并且为了能自定义emit事件名和参数组合规则,以中间件的方式提供处理方法:

export default class EasySocket extends Emitter{//继承Emitter
    constructor(config) {
       this.url = config.url;
       this.openMiddleware = [];
       this.closeMiddleware = [];
       this.messageMiddleware = [];
       this.errorMiddleware = [];
       this.remoteEmitMiddleware = [];//新增的部分
       
       this.openFn = Promise.resolve();
       this.closeFn = Promise.resolve();
       this.messageFn = Promise.resolve();
       this.errorFn = Promise.resolve();
       this.remoteEmitFn = Promise.resolve();//新增的部分
    }
    openUse(fn) {
        this.openMiddleware.push(fn);
        return this;
    }
    closeUse(fn) {
        this.closeMiddleware.push(fn);
        return this;
    }
    messageUse(fn) {
        this.messageMiddleware.push(fn);
        return this;
    }
    errorUse(fn) {
        this.errorMiddleware.push(fn);
        return this;
    }
    //新增的部分
    remoteEmitUse(fn, runtime) {
        this.remoteEmitMiddleware.push(fn);
        if (runtime) {
            this.remoteEmitFn = compose(this.remoteEmitMiddleware);
        }
        return this;
    }
    connect(url) {
       ...
       //新增部分
       this.remoteEmitFn = compose(this.remoteEmitMiddleware);
    }
    //重写emit方法,支持本地调用以远程调用
    emit(event, args, isLocal = false) {
        let arr = [event, args];
        if (isLocal) {
            super.emit.apply(this, arr);
            return this;
        }
        let evt = {
            event: event,
            args: args
        }
        let remoteEmitContext = { client: this, event: evt };
        this.remoteEmitFn(remoteEmitContext).catch(error => { console.log(error) })
        return this;
    }
}

下面是一个简单的处理中间件:

client.remoteEmitUse((context, next) => {
    let client = context.client;
    let event = context.event;
    if (client.socket.readyState !== 1) {
      alert("连接已断开!");
    } else {
      client.socket.send(JSON.stringify({
        type: 'event',
        event: event.event,
        args: event.args
      }));
      next();
    }
  })

意味着调用

client.emit('chatMessage',{
    from:'admin',
    masg:"Hello WebSocket"
});

就会组合成数据

{
    type: 'event',
    event: 'chatMessage',
    args: {
        from:'admin',
        masg:"Hello WebSocket"
    }
}

发送出去。

服务端接受到这样的数据,可以做相应的数据处理(后面会使用nodejs实现类似的编程模式),也可以直接发送给别的客户端。客户受到类似的数据,可以写专门的中间件进行处理,比如:

client.messageUse((context, next) => {
    if (context.res.type === 'event') {
      context.client.emit(context.res.event, context.res.args, true);//注意这里的emit是本地emit。
    }
    next();
})

如果本地订阅的chatMessage事件,回到函数就会被触发。

在vue或react中使用,也会比之前使用路由的方式简单

mounted() {
   let client = this.$wsClients.get("im");
   client.on("chatMessage", data => {
      let isSelf = data.from.id == this.user.id;
      let msg = {
        name: data.from.name,
        msg: data.msg,
        createdDate: data.createdDate,
        isSelf
      };
      this.broadcastMessageList.push(msg);
    });
}

组件销毁的时候移除相应的事件订阅即可,或者清空所有事件订阅

destroyed() {
    let client = this.$wsClients.get("im");
    client.removeAllListeners();
}

心跳重连

核心代码直接从websocket-heartbeat-js copy过来的(用npm包,还得在它的基础上再包一层),相关文章 初探和实现websocket心跳重连

核心代码:

    heartCheck() {
        this.heartReset();
        this.heartStart();
    }
    heartStart() {
        this.pingTimeoutId = setTimeout(() => {
            //这里发送一个心跳,后端收到后,返回一个心跳消息
            this.socket.send(this.pingMsg);
            //接收到心跳信息说明连接正常,会执行heartCheck(),重置心跳(清除下面定时器)
            this.pongTimeoutId = setTimeout(() => {
                //此定时器有运行的机会,说明发送ping后,设置的超时时间内未收到返回信息
                this.socket.close();//不直接调用reconnect,避免旧WebSocket实例没有真正关闭,导致不可预料的问题
            }, this.pongTimeout);
        }, this.pingTimeout);
    }
    heartReset() {
        clearTimeout(this.pingTimeoutId);
        clearTimeout(this.pongTimeoutId);
    }

最后

源码地址:easy-socket-browser

nodejs实现的类似的编程模式(有空再细说):easy-socket-node

实现的聊天室例子:online chat demo

聊天室前端源码:lazy-mock-im

聊天室服务端源码:lazy-mock

查看原文

赞 2 收藏 2 评论 0

认证与成就

  • 获得 284 次点赞
  • 获得 6 枚徽章 获得 0 枚金徽章, 获得 3 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-09-01
个人主页被 1.8k 人浏览