奔霸

基于Vue.js的多页应用开发

2018-03-13T19:07:00+08:00

使用Vue搭建单页应用简化了前端开发了复杂度，开发人员以关注数据为主避免了直接的DOM操作，Vue提供的组件（类似的技术HTML5 Custom Elements现在浏览器的支持还很有限）可以很好的进行业务封装。使用基于Webpack的Vue脚手架开发应用，开发时是的ES6语法打包会转为ES5（大部分浏览器已经支持）的js代码。这里介绍下项目开发环境和提供的功能包括以下部分：

安装环境
依赖管理
开发环境数据对接
饿了么组件
RESTful操作
PDF预览支持
多页面支持
全局Bus插件
WebSocket支持
桌面通知支持
元素已读
提供唯一标识支持
默认图片指令
优化打包文件大小

安装环境

首先安装Node.js环境，再安装vue-cli用于配置脚手架，具体命令如下：

$ npm install -g vue-cli
$ vue init webpack my-project

在安装过程需要进行Vue允许环境的选择Runtime + Compiler和Runtime-only，第一个比较大因为要支持字符串模版，如果你的项目中只使用渲染函数作为模版则可以选择后面一个。接下来配置代码检查工具ESLint在多个协作开发的时候统一代码风格是必须的这里选择了Standard。再来的单元测试也需要配置下建议使用Jest（早期的版本只有Karma）。最后添加端到端的测试Nightwatch（可以粗略的理解为集成测试，早期版本使用的是PhantomJS集成的WebKit版本偏低可能不适用于使用了浏览器新特性的项目）

依赖管理

使用npm进行依赖管理，由于国内访问npm有点慢所以最好加上国内镜像这里选择淘宝提供的镜像。添加方式有两种：在安装时显示添加镜像配置npm install --registry=https://registry.npm.taobao.org或者直接修改默认的地址npm config set registry https://registry.npm.taobao.or

$ cd my-project
$ npm install --registry=https://registry.npm.taobao.org
$ npm run dev

开发环境数据对接

由于本项目的请求是需要携带用户信息的，脚手架默认提供的代理修改配置后需要重启才生效麻烦了点。这里进行改造通过后端提供的OAuth 2直接在浏览器上完成用户的切换（对于要测试不同用户的不同数据时很简便了）

OAuth2服务端使用Spring Boot搭建，通过@EnableOAuth2Client和@EnableAuthorizationServer启用服务，启动后需要进行测试可以使用PostmanAPI测试工具提供的测试方法，具体可参考Spring Boot and OAuth2

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.security.oauth</groupId>
    <artifactId>spring-security-oauth2</artifactId>
</dependency>
<dependency><!-- 存储OAuth2数据 -->
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>

Node环境下使用simple-oauth2与服务端通信，在build/dev-server.js（新版本的脚手架中已不存在本类了，可以在build/webpack.dev.conf.js的devServer配置添加before方法参看DevServer）中添加。具体的流程是先通过OAuth2获取Access Token然后在代理中修改请求的路径附加上access_token这样每个请求就有用户标识了。

var sessionStore = new session.MemoryStore()
var sessionOptions = {
  resave: false,
  saveUninitialized: true,
  secret: 'keyboard cat',
  cookie: {},
  store: sessionStore
}
app.use(session(sessionOptions)) // 开启session支持

var useOauthInDev = process.env.OAUTH === 'true' // 通过环境变量控制是否开启OAuth2
if (useOauthInDev) {
  // 从session中获取OAuth2信息
  var getOauth2data = function (session) {
    var oauth2data = session ? session.oauth : null
    if (!oauth2data) {
      console.error('oauth2 data not found');
      return
    }
    if (!oauth2data.token) {
      console.error('oauth2 data token not found');
      return
    }
    return oauth2data
  }

  if (config.devo.proxyTable) {
    proxyTable = config.devo.proxyTable
  }
  Object.keys(proxyTable).forEach(function (context) {
    var options = proxyTable[context]
    options.onProxyReq = function (proxyReq, req, res) {
    var oauth2data = getOauth2data(req.session)
    if (oauth2data) {
        // 在代理地址上附上OAuth2的access_token
        proxyReq.path = proxyReq.path + (proxyReq.path.indexOf('?') > 0 ? '&' : '?') + 'access_token=' + oauth2data.token.access_token
        if (oauth2data.headers) {
        Object.keys(oauth2data.headers).forEach(k => {
            proxyReq.setHeader(k, oauth2data.headers[k])
        })
        }
      }
    }
  })

  // 初始化 OAuth2
  var oauth2 = require('simple-oauth2').create(config.devo.oauth);

  // 处理OAuth2服务器回调并请求access token，在代理请求中使用
  app.get('/oauth_callback', (req, res) => {
    var oauth2data = req.session.oauth
    var headers = req.query.headers
    if (headers) {
      try {
        oauth2data.headers = JSON.parse(headers)
      } catch (e) {
        console.log('set user header error', e)
      }
    }
    var code = req.query.code
    if (!code) {
      res.end()
      return
    }
    oauth2data.code = code;
    var tokenConfig = {
      code: code,
      redirect_uri: oauth2data.redirect_uri
    };

    // 获取access token
    oauth2.authorizationCode.getToken(tokenConfig, (error, result) => {
      if (error) {
        console.error('Access Token Error', error.message);
        return res.json('Authentication failed');
      }

      console.log('The resulting token: ', result);
      var token = oauth2.accessToken.create(result);
      oauth2data.token = token.token

      // 处理完成后返回原始页面
      res.redirect(req.session.originalUrl || '/')
    });
  });

  // 退出时顺带退出服务器上的用户
  app.get('/logout', (req, res) => {
    req.session.oauth = null;
    let host = config.devo.oauth.auth.tokenHost
    let url = host + '/logout?redirect=' + encodeURIComponent(req.query.redirect)
    res.redirect(url);
  });

  // 判断是否存在OAuth2授权信息，如果没有进行授权
  app.use((req, res, next) => {
    if (req.url !== '/__webpack_hmr' && req.url.indexOf('/dev/') !== 0
        && (req.url === '/' || /^.*?\/\w+$/.test(req.url))) {
      var oauth2data = req.session.oauth
      if (!oauth2data) {
        oauth2data = {}
        req.session.oauth = oauth2data
      }
      if (!oauth2data.code) {
        // 记录原始页面用户OAuth2处理完后跳转
        req.session.originalUrl = req.originalUrl
        // 拼接OAuth2回调地址
        oauth2data.redirect_uri = req.protocol + '://' + req.get('host') + '/oauth_callback'
        var authorizationUri = oauth2.authorizationCode.authorizeURL({
          redirect_uri: oauth2data.redirect_uri,
          scope: 'app',
          state: 'nodejsvue'
        });
        res.redirect(authorizationUri) // 无授权码时重定向到OAuth2服务器
        return
      }
    }

    next()
  })
}

饿了么组件

项目启动时使用的是饿了么的1.X版本。使用了自定义主题需要进行附加的配置，由于想避免污染全局命令就没有使用全局安装主题生成工具npm i element-theme -g而是采用安装到开发依赖中npm i element-theme -D，默认主题是使用npm i element-theme-default -D安装到开发依赖中。由于没有在全局安装element-theme因此需要向package.json文件中添加scripts配置"et": "et",这样可以使用npm run et -- -i代替官方的et -i初始化变量文件，为了规划好路径向package.json添加了配置:

{
  "element-theme": {
    "browsers": [
      "ie > 9",
      "last 2 versions"
    ],
    "out": "./src/assets/element/theme",
    "config": "./src/assets/element/element-variables.css",
    "minimize": false
  }
}

接着在src/main.js中引入Element

import Element from 'element-ui'
import '@/assets/element/theme/index.css'

// 引入“饿了么”界面组件
Vue.use(Element)

RESTful操作

使用axios来访问后端API，选择这个的原因是它支持Promise和可以在node.js环境下使用。但是考虑到后期可能存在切换为Fetch API时比较方便点，而且封装成RESTful将于后端提供的API保持一致的概念，还可以提供了统一的异常处理。提供get、post、del，patch方法。由于axios对location.search部分没有处理，因此再引入qs来处理：

qs.stringify({ a: { b: 'c' } }, { allowDots: true, indices: false })

PDF预览支持

PDF预览功能使用的是PDF.js，通过npm install pdfjs-dist -D添加依赖，由于PDF.js需要Web Workers API来处理内容，因此在build/webpack.prod.conf.js中添加worker-loader插件，这样可以按照统一的资源规划：

new webpack.LoaderOptionsPlugin({
  options: {
    worker: {
      output: {
        // https://github.com/webpack-contrib/worker-loader/pull/22
        filename: utils.assetsPath('js/[hash].worker.js')
      }
    }
  }
})

接着在代码中引入，参考Setup PDF.js in a website：

import 'pdfjs-dist/webpack' // 自动配置worker
import 'pdfjs-dist/web/pdf_viewer.css'
import { PDFJS } from 'pdfjs-dist/web/pdf_viewer'

let pdfViewer = new PDFJS.PDFViewer({})

多页面支持

脚手架默认提供的是单页应用支持，考虑到注册页面并不需要太多的组件如果都和在一个页面中的话会延长显示的时间，因此考虑提供多页面支持这样打包后的js文件会小很多加载速度也更快。要添加多页面的功能需要开发环境和正式环境的支持。

开发环境

开发环境下要保证当通过浏览器刷新页面时返回的HTML时满足要求的数据，这里是通过URL路径前缀来区别不同的页面请求的（如：/aaa/bbb ---> aaa.html、/bbb/abc ---> bbb.html），因此需要的修改DevServer添加自定义的代码，其中DevServer内部使用Express作为服务器开发过程中主要利用了app.use中间件来完成相应的功能。

首先添加获取多页面信息的工具类，由于不止一个地方需要使用到这个方法所以将这个方法添加util.js中具体代码如下：

// 转换正则特殊字符
exports.regexEscape = function (s) {
  return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
}

// 获取目录中的文件路径
exports.getFiles = function (dir, regex, files_) {
  files_ = files_ || []
  if (!fs.existsSync(dir)) {
    return files_
  }
  var files = fs.readdirSync(dir)
  for (var i in files) {
    var name = dir + '/' + files[i]
    if (fs.statSync(name).isDirectory()) {
      exports.getFiles(name, regex, files_)
    } else if (!regex || regex.test(name)) {
      files_.push(name)
    }
  }
  return files_
}

// 获取多页面实体
exports.getEntries = function (multiPageRoot) {
  if (!multiPageRoot) {
    return []
  }
  var root = path.resolve(__dirname, '../')
  var cut = 0
  if (multiPageRoot.indexOf(root) === 0) {
    cut = root.length
  }
  // 提供.html和.js的支持，.html文件对应与入口的index.html，.js对应于启动的main.js
  var fileList = exports.getFiles(multiPageRoot, new RegExp(`^${exports.regexEscape(multiPageRoot)}\/[^/]+\.(js|html)$`))
  var entries = fileList.filter(f => /\.js$/.test(f)).map(f => {
    var name = f.replace(/^.+?([^/]+)\.js$/, '$1')
    return {
      name,
      path: cut > 0 ? '.' + f.substring(cut) : f
    }
  })
  var tmps = fileList.filter(f => /\.html$/.test(f)).reduce((r, f) => {
    var name = f.replace(/^.+?([^/]+)\.html$/, '$1')
    r[name] = f
    return r
  }, {})
  entries.forEach(en => {
    en.filename = en.name + '.html',
    en.template = tmps[en.name] || 'index.html'
  })
  return entries
}

然后在build/dev-server.js（新版本的脚手架中已不存在本类了，可以在build/webpack.dev.conf.js的devServer配置添加before方法参看DevServer）中添加请求地址转换代码：

if (config.multiPageRoot) {
  var utils = require('./utils')
  // 获取多页面的信息
  var entries = utils.getEntries(config.multiPageRoot)
  if (entries.length > 0) {
    var paths = entries.reduce((r, en) => {
      r[en.name] = `/${en.filename}`
      return r
    }, {})
    var regex = /^\/(.+?)([\/\?].*)?$/
    app.use((req, res, next) => {
      var match = regex.exec(req.url) // 获取多页面前缀如： /xxx/yyy?aa=bb ---> xxx
      if (match && match[1]) {
        var url = paths[match[1]]
        if (url) {
          // 拼接出新的地址如：/xxx.html?aa=bb
          var idx = req.url.indexOf('?')
          req.url = idx > 0 ? url + req.url.substring(idx) : url
        }
      }
      next()
    })
  }
}

接着在开发环境配置webpack.dev.conf.js中添加HtmlWebpackPlugin插件用于生成html文件，代码如下：

var pages = ['app']
if (config.multiPageRoot) {
  var entries = utils.getEntries(config.multiPageRoot)
  pages.push(...entries.map(en => en.name))
  baseWebpackConfig.plugins = []
  entries.forEach(function (en) {
    var name = en.name
    baseWebpackConfig.entry[name] = en.path
    baseWebpackConfig.plugins.push(new HtmlWebpackPlugin({
      filename: en.filename,
      template: en.template,
      excludeChunks: pages.filter(p => p !== name),
      inject: true
    }))
  })
}

还得在默认的HtmlWebpackPlugin中添加配置excludeChunks: pages.filter(p => p !== 'app'),确保每个HTML文件只包含当前页面需要的js。

相应的还需要的在生产环境配置webpack.prod.conf.js中配置相应的信息，别忘了在默认的HtmlWebpackPlugin中添加excludeChunks: pageNames,，代码如下：

var pageEntries = []
var pageNames = []
if (config.multiPageRoot) {
  pageEntries = utils.getEntries(config.multiPageRoot)
  pageNames = pageEntries.map(en => en.name)
}

if (pageEntries.length > 0) {
  var pns = ['app', ...pageNames]
  pageEntries.forEach(function (en) {
    var name = en.name
    webpackConfig.entry[name] = en.path
    webpackConfig.plugins.push(new HtmlWebpackPlugin({
      filename: en.filename,
      template: en.template,
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      excludeChunks: pns.filter(p => p !== name),
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }))
  })
}

最后在config/index.js中配置下module.exports.multiPageRoot所在的目录multiPageRoot: path.resolve(__dirname, '../src/pages'),这样就可以在指定目录下新建多页面文件（.html或者.js），这里没有需要对html内容做些修改因此自己复用了/index.html文件只需添加对的js文件，例如新建一个注册页面src/pages/register.js代码如下：

import 'es6-promise/auto'

import Vue from 'vue'
import App from '@/views/register/Index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

在执行命令npm run build后可以看到dist目录中多出了register.html文件，目录结构如下：

$ tree -L 2 dist
dist
├── index.html
├── register.html
└── static
    ├── css
    ├── img
    └── js

正式环境

如果后端使用的是nginx可以通过配置location来实现。

location /static/ {
    root html/vue;
    access_log off;
    autoindex_exact_size off;
    charset utf-8,gbk;
}

location /register { # 支持Vue Router的mode: 'history'
    root html/vue;
    try_files /register.html 404;
}

location / {
    root html/vue;
    try_files /index.html 404;
}

如果后端使用的是Spring的话，通过WebMvcConfigurerAdapter添加ResourceHandler来实现资源文件的请求支持。

/**
 * 设置处理静态资源
 *
 * Created by rjf on 17/7/1.
 */
public class StaticResourceConfiguration extends WebMvcConfigurerAdapter {

    @Autowired
    ObjectProvider<StaticResourceProperties> appPropertiesObjectProvider;
    @Autowired
    ObjectProvider<ResourceProperties> resourcePropertiesObjectProvider;

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        StaticResourceProperties staticResourceProperties = appPropertiesObjectProvider.getIfAvailable();
        if (staticResourceProperties == null) {
            return;
        }
        Map<String, String> urlViewMapping = staticResourceProperties.getUrlViewMapping();
        if (!urlViewMapping.isEmpty()) { // 用于支持Vue Router的mode: 'history'
            for (Map.Entry<String, String> entry : urlViewMapping.entrySet()) {
                registry.addViewController(entry.getKey()).setViewName(entry.getValue());
            }
        }
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        StaticResourceProperties staticResourceProperties = appPropertiesObjectProvider.getIfAvailable();
        if (staticResourceProperties == null) {
            return;
        }
        ResourceProperties resourceProperties = resourcePropertiesObjectProvider.getIfAvailable();
        String[] staticLocations = resourceProperties == null ? new String[0] : resourceProperties.getStaticLocations();
        Map<String, String> staticPathPatterns = staticResourceProperties.getStaticPathPatterns();
        Map<String, String> staticPathCacheControl = staticResourceProperties.getStaticPathCacheControl();
        Map<String, String> staticPathCachePeriod = staticResourceProperties.getStaticPathCachePeriod();
        Pattern pattern = Pattern.compile("^\\w+:.+"); // 格式如：/static/**: static/
        for (Map.Entry<String, String> entry : staticPathPatterns.entrySet()) {
            ResourceHandlerRegistration registration = null;
            if (pattern.matcher(entry.getValue()).matches()) { // 存在自定义的静态资源路径
                registration = registry.addResourceHandler(entry.getKey()).addResourceLocations(entry.getValue());
            } else if (staticLocations.length > 0) { // spring.resources.staticLocations配置的静态资源路径
                String[] sls = new String[staticLocations.length];
                for (int i = 0; i < staticLocations.length; i++) {
                    String path = staticLocations[i];
                    if (!path.endsWith("/")) {
                        path =  path + "/";
                    }
                    sls[i] = path + (entry.getValue().startsWith("/") ? entry.getValue().substring(1) : entry.getValue());
                }
                registration = registry.addResourceHandler(entry.getKey()).addResourceLocations(sls);
            }
            if (registration != null) { // 设置静态资源的缓存策略
                String cacheControlStr = staticPathCacheControl.get(entry.getKey());
                if (cacheControlStr != null && !(cacheControlStr = cacheControlStr.trim()).isEmpty()) {
                    registration.setCacheControl(new RawCacheControl(cacheControlStr));
                }
                String cachePeriodStr = staticPathCachePeriod.get(entry.getKey());
                if (cachePeriodStr != null && !(cachePeriodStr = cachePeriodStr.trim()).isEmpty()
                        && cachePeriodStr.matches("^\\d+$")) {
                    registration.setCachePeriod(Integer.parseInt(cachePeriodStr));
                }
            }
        }
    }

    @Bean
    public StaticResourcPathControllerAdvice pathControllerAdvice() {
        StaticResourceProperties properties = appPropertiesObjectProvider.getIfAvailable();
        return properties == null
                ? new StaticResourcPathControllerAdvice(false, null)
                : new StaticResourcPathControllerAdvice(properties.isNotFoundToIndex(), properties.getIndexPath());
    }

    private static class RawCacheControl extends CacheControl {
        ...
    }

}

/**
 * 配置信息
 *
 * Created by rjf on 17/7/1.
 */
public class StaticResourceProperties {

    private String title;
    private boolean notFoundToIndex;
    private String indexPath = "/index.html";
    private Map<String, String> staticPathPatterns = new HashMap<>();
    private Map<String, String> staticPathCachePeriod = new HashMap<>();
    private Map<String, String> staticPathCacheControl = new HashMap<>();
    private Map<String, String> urlViewMapping = new HashMap<>();

    // getter and setter
}

/**
 * 处理异常
 *
 * Created by rjf on 17/6/30.
 */
@ControllerAdvice
public class StaticResourcPathControllerAdvice {

    private String indexPath;
    private boolean notFoundToIndex;

    public StaticResourcPathControllerAdvice(boolean notFoundToIndex, String indexPath) {
        this.notFoundToIndex = notFoundToIndex;
        this.indexPath = indexPath;
    }

    @ExceptionHandler({
            NoHandlerFoundException.class,
            NoSuchRequestHandlingMethodException.class
    })
    public void notFoundPath(Throwable ex, HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
        if (notFoundToIndex) {
            request.getRequestDispatcher(indexPath).forward(request, response);
        } else {
            response.sendError(HttpStatus.NOT_FOUND.value());
        }
    }

}

然后就可以在配置文件中添加静态资源的信息：

demo:
  notFoundToIndex: true
  indexPath: /index.html
  staticPathPatterns:
    /static/**: static/
    /index.html: /
    /register.html: /
  urlViewMapping:
    /register/**: /register.html
  staticPathCacheControl:
    /index.html: max-age=3600, no-transform, public
  staticPathCachePeriod:
    /index.html: 0

全局Bus插件

提供Bus是为了减少组件间不必要的耦合，虽然可以直接在Vue实例的原型中设置Vue.prototype.$bus = new Vue()但是考虑到使用这种方式事件需要自己手动移除这样会加大内存泄漏的风险，因此才封装了全局Bus插件在Vue生命周期的销毁之前阶段进行事件的移除，具体代码如下：

// 全局Bus插件
export default {
  install (Vue, options) {
    function Bus () {
      this.cbs = []
    }
    Object.assign(Bus.prototype, {
      _origin_bus: new Vue(),
      $emit (event, ...args) {
        this._origin_bus.$emit(event, ...args)
      },
      $on (event, callback) {
        this._origin_bus.$on(event, callback)
        this.cbs.push([event, callback])
      },
      $once (event, callback) {
        this._origin_bus.$once(event, callback)
        this.cbs.push([event, callback])
      },
      $off (...args) {
        // 参考api的事件移除策略 https://cn.vuejs.org/v2/api/#vm-off-event-callback
        if (args.length > 0) {
          this._origin_bus.$off(...args)
          let [event, fn] = args
          let es = Array.isArray(event) ? event.map(e => [e, fn]) : args
          for (let x = 0, l = es.length; x < l; x++) {
            let ecb = es[x]
            let cb
            let i = this.cbs.length
            while (i--) {
              cb = this.cbs[i]
              if (cb[1] === ecb[1] || cb[0] === ecb[0]) {
                this.cbs.splice(i, 1)
                break
              }
            }
          }
        } else {
          for (let i = 0, l = this.cbs.length; i < l; i++) {
            this._origin_bus.$off(...this.cbs[i])
          }
          this.cbs = []
        }
      }
    })
    
    // 向原型中添加$bus属性
    Object.defineProperty(Vue.prototype, '$bus', {
      get () {
        if (!this._bus) {
          this._bus = new Bus()
        }
        return this._bus
      }
    })
    
    // 混入清理事件
    Vue.mixin({
      beforeDestroy () {
        if (this._bus) {
          this._bus.$off()
        }
      }
    })
  }
}

WebSocket支持

为了方便的往浏览器推送信息在项目中添加WebSocket，而且通过Can I use查询到IE 10以上都支持。结合之前的全局Busthis.$bus.$emit(msg.type, msg.data, 'websocket')后业务组件就可以实现服务器数据推送引发组件显示效果变化的能力。考虑到存在网络变化的存在需要进行WebSocket的重连，这个功能是通过W3C的Online and offline eventsAPI实现。当太久时间没有向后台发起请求会导致Session过期，因此需要在WebSocket中添加心跳this.socket.send('heartbeat')维持Session。详细代码如下：

export default {
  data () {
    return {
      socket: null,
      datas: []
    }
  },
  created () {
    this.initWebSocket()
    this.$bus.$on('websocket:send', (userId, msg) => {
      this.sendWsMsg(userId, msg)
    })
    window.addEventListener('online', this.reinitWebSocketOnOnline)
  },
  destroyed () {
    window.removeEventListener('online', this.reinitWebSocketOnOnline)
  },
  methods: {
    recevieWsMsg (msg) {
      // 转发数据到Bus中
      this.$bus.$emit(msg.type, msg.data, 'websocket')
    },
    sendWsMsg (userId, msg) {
      let data = JSON.stringify({
        type: 'msg',
        data: {
          toUser: userId,
          content: msg
        }
      })
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        this.socket.send(data)
      } else {
        this.datas.push(data)
        this.reinitWebSocketOnOnline()
      }
    },
    reinitWebSocketOnOnline () {
      if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
        console.log('reinit WebSocket on online event')
        this.initWebSocket()
      }
    },
    initWebSocket () {
      if (this.socket) {
        this.socket.close()
        this.socket = null
      }
      this.socket = new WebSocket(`ws://${location.host}/ws`)
      this.socket.addEventListener('open', (event) => {
        let il = setInterval(() => {
          if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.send('heartbeat') // 发送心跳
          } else {
            clearInterval(il)
          }
        }, 1 * 60 * 1000)
        for (const data of this.datas) {
          this.socket.send(data)
        }
        this.datas = []
      })
      this.socket.addEventListener('message', (event) => {
        try {
          this.recevieWsMsg(JSON.parse(event.data))
        } catch (e) {
          console.error('websocket message json error', e)
        }
      })
      this.socket.addEventListener('close', (event) => {
        this.socket = null
      })
      this.socket.addEventListener('error', (event) => {
        if (window.navigator.onLine) {
          setTimeout(() => { // 开启重连
            console.log('try to reinit WebSocket on error')
            this.initWebSocket()
          }, 1 * 60 * 1000)
        }
      })
    }
  }
}

桌面通知支持

由于Web应用存在一个问题当从应用所在的Tab切换到其他Tab或者浏览器不活跃时通知等信息将不被用户感知，因此需要桌面通知进行提醒。这里使用了Web NotificationsAPI来完成通知的功能，其中还需要处理应用处于活跃时不进行桌面通知的发送这个利用了Document.hiddenAPI（不完美的方案，当浏览器处于不活跃且未被最小化时无效，以后可以结合W3C的其他API进行改进）。关键代码如下：

function sendBrowserNotify (msg, userName, userImg) {
  let n = new Notification(msg.fromUser ? userName : '系统', {
    icon: msg.fromUser ? userImg : null,
    body: '你有新消息',
    tag: 'notify'
  })
  n.onshow = function () { // 通知显示5秒后关闭
    setTimeout(n.close.bind(n), 5000)
  }
  n.onclick = () => { // 点击通知跳转的浏览器中
    window.focus()
    this.goTo(msg)
  }
}

if (this.documentHidden) { // 页面是否隐藏
  if (window.Notification && Notification.permission === 'granted') {
    sendBrowserNotify(msg, userName, userImg)
  } else if (window.Notification && Notification.permission !== 'denied') {
    getNotificationPermission(status => {
      if (status === 'granted') {
        sendBrowserNotify(msg, userName, userImg)
      }
    })
  }
  // 发送浏览器通知后，不再需要显示本地的通知
  return
}

元素已读

对于动态类信息经常需要有已读的功能来确认信息是否被看过，通常的是否在信息体被点击后主动发起请求。但是这种方式不适合于简单的列表数据，因此这里通过判断HTML元素是否在可视区内来表示本条信息是否被阅读过（对于已读表示不严格的业务可以使用）。本功能利用Element.getBoundingClientRect()API获取位置信息跟容器位置进行比较从而确定指定元素是否在可视区域内，当触发DOMContentLoaded，load，resize，scroll事件时进行判断，由于事件的触发可能会非常频繁但是判断逻辑可以适当延迟，这时可以配置节流函数（可以参考requestAnimationFrame + customEvent和throttle-debounce）。

// 判断元素 el 是否在容器元素 container 中，支持是否部分 partInView 在容器中
export function isElementInContainerView (el, container, partInView, rect) {
  let vheight = container.clientHeight
  let vwidth = container.clientWidth
  let crect = container.clientRect || container.getBoundingClientRect()
  rect = rect || el.getBoundingClientRect()
  let nr = {}
  nr.top = Math.floor(rect.top - crect.top)
  nr.left = Math.floor(rect.left - crect.left)
  nr.bottom = Math.floor(rect.bottom - crect.top)
  nr.right = Math.floor(rect.right - crect.left)
  nr.width = Math.floor(rect.width)
  nr.height = Math.floor(rect.height)
  return isElementInViewport(null, partInView, nr, vheight, vwidth)
}

// 判断元素是否在可视区内 代码参考 https://stackoverflow.com/a/7557433/5628
export function isElementInViewport (el, partInView, rect, vheight, vwidth) {
  rect = rect || el.getBoundingClientRect()
  vheight = vheight || window.innerHeight || document.documentElement.clientHeight
  vwidth = vwidth || window.innerWidth || document.documentElement.clientWidth
  if (partInView) {
    return (rect.bottom >= 0 && rect.right >= 0 &&
      rect.top <= vheight && rect.left <= vwidth)
  }
  return (rect.top >= 0 && rect.left >= 0 &&
      rect.bottom <= vheight &&
      rect.right <= vwidth
  ) ||
    (rect.top <= 0 && rect.height > vheight && rect.top + rect.height > vheight) ||
    (rect.left <= 0 && rect.width > vwidth && rect.left + rect.width > vwidth)
}

// 提供一个便捷的方法，当元素 el 可视状态发生变化时调用 callback
export function onVisibilityChange (el, callback) {
  var oldVisible
  return function () {
    var visible = isElementInViewport(el)
    if (visible !== oldVisible) {
      if (typeof callback === 'function') {
        callback(visible, oldVisible)
      }
      oldVisible = visible
    }
  }
}

提供唯一标识支持

当需要判断Vue组件实例是否一样时，可以给每个实例添加一个ID标识，虽然Vue内部存在_uid但是官方表示_uid是内部使用的属性不建议在应用中使用，因此本项目使用插件创建$_uid来使用。具体代码如下：

export default {
  install (Vue, options) {
    let uid = 0
    Vue.mixin({
      beforeCreate () {
        // 添加组件唯一标识
        this.$_uid = uid.toString()
        uid += 1
      }
    })
  }
}

默认图片指令

项目中存在很多标签经常出现图片地址错误或者图片丢失了导致页面上显示出错，现在通过捕获元素的error事件然后将地址替换为预先定义好的默认图片地址或者错误图片地址，利用Vue的自定义指令可以很方便进行配置。指令代码如下：

export const errorImg = {
  bind (el, binding, vnode, oldVnode) {
    let ei = el['@@errorImg'] = {
      type: 'error',
      getSrc () {
        let src
        if (binding.arg === 'user') {
          src = require('../assets/img/user.png')
        } else if (binding.arg === 'group') {
          src = require('../assets/img/group.jpg')
        } else if (binding.arg === 'video') {
          src = require('../assets/img/video.png')
        } else {
          src = require('../assets/img/def.png')
        }
        return src
      },
      listener () {
        let src = ei.getSrc()
        if (src) {
          el.imgUrl = el.src
          el.src = src
        }
      }
    }
    if (!el.src) {
      el.src = ei.getSrc()
    }
    el.addEventListener(ei.type, ei.listener)
  },
  update (el, binding, vnode, oldVnode) {
    if (!el.src) {
      let ei = el['@@errorImg']
      if (ei) {
        el.src = ei.getSrc()
      }
    }
  },
  unbind (el) {
    let ei = el['@@errorImg']
    if (ei) {
      el.removeEventListener(ei.type, ei.listener, false)
      delete el['@@errorImg']
    }
  }
}

// 注册自定义指令
Vue.directive('errorImg', errorImg)

注册好自定义指令后使用上很简单，例如<img :src="userImg" v-error-img:user>当userImg地址无法访问时就会替换为预先设置的assets/img/user.png

优化打包文件大小

默认情况下所有的js会打包的app.xxx.js中，如果没有进行优化配置的话（未进行Gzip压缩）可能大小是M单位的而普通的js这只有K大小，这样首次加载特别慢。为了解决这个问题可以先通过运行命令（使用到webpack-bundle-analyzer插件）npm run build --report查看各个依赖的大小（如下图）结合项目的功能缩减大小。

找到可以动态导入的依赖后使用Webpack提供的动态导入功能例如：const SwiperComponent = () => import(/* webpackChunkName: "swiper" */ './Swiper.vue')将生成多个js/[id].[chunkhash].js文件。再在webpack.prod.conf.js中添加插件new webpack.HashedModuleIdsPlugin()避免模块未变化时hash发生变化参考webpack缓存

参考

基于Vue.js的多页应用开发 was originally published by Ruanjf at 奔霸 on March 13, 2018.

基于Spring Cloud的分布式微服务化项目搭建

2018-02-28T21:18:00+08:00

本项目使用Spring Cloud的Camden.SR7版本。主要包含以下部分：

服务发现微服务
配置微服务
客户端负载均衡
熔断
路由
网关微服务
多租户
分布式追踪
Docker集成

前期准备

本项目使用到了Spring Cloud、Spring Boot、Maven、Git其中Maven由于工程管理，Git用于存储配置。

工程搭建

创建一个Maven POM文件添加Spring Boot和Spring Cloud依赖的公共POMdemo-parent用于复用配置，POM文件如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.4.5.RELEASE</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.runjf.springcloud</groupId>
    <artifactId>demo-parent</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>pom</packaging>

    <properties>
        <java.version>1.8</java.version><!-- 指定Java版本 -->
        <spring.boot.version>1.4.5.RELEASE</spring.boot.version>
        <spring.cloud.version>Camden.SR7</spring.cloud.version>
    </properties>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>${spring.cloud.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies>
        <dependency><!-- 统一配置 -->
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-config</artifactId>
        </dependency>
        <dependency><!-- 服务发现客户端 -->
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-eureka</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin><!-- spring boot 插件用于打包可执行jar -->
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

由于每个工程都会包含配置和服务发现因此在pom文件中添加了spring-cloud-starter-config和spring-cloud-starter-eureka依赖，接着创建Maven工程添加parent配置：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <groupId>com.runjf.springcloud</groupId>
        <artifactId>demo-parent</artifactId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.runjf.springcloud</groupId>
    <artifactId>demo-xxx</artifactId>

</project>

工程结构如下：

demo-xxx
├── pom.xml
├── src
│   ├── main
│   │   ├── docker
│   │   │   └── Dockerfile
│   │   ├── java
│   │   │   └── com
│   │   │       └── runjf
│   │   │           └── springcloud
│   │   │               └── xxx
│   │   │                   └── Application.java
│   │   └── resources
│   │       ├── application.yml
│   │       └── bootstrap.yml
│   └── test
└── target

配置文件

由于Spring Cloud基于Spring Boot搭建的因此这里先介绍一些使用到的功能：

启动应用，其中SpringApplication.run用于启动应用@SpringBootApplication用于启用相关配置具体查看这里

  package com.runjf.springboot.demo;
        
  import org.springframework.boot.SpringApplication;
  import org.springframework.boot.autoconfigure.SpringBootApplication;
        
  @SpringBootApplication
  public class Application {
        
      public static void main(String[] args) {
          SpringApplication.run(Application.class, args);
      }
        
  }

配置读取，Spring Boot应用默认会依次查找当前目录（Application.class所在目录）下/config子目录、当前目录、classpath下/config子目录和classpath根目录下的application.properties或者application.yml配置文件，具体代码在org.springframework.boot.context.config.ConfigFileApplicationListener中。

由于Spring Cloud通过org.springframework.cloud.bootstrap.BootstrapApplicationListener启动初始化上下文，并设置spring.config.name配置文件名称为bootstrap因此有了配置文件bootstrap.properties或者bootstrap.yml，默认bootstrap配置优先级较高无法被本地配置覆盖。

为了更好的区别服务发现中注册的每个微服务，我们通过spring.appliction.name=demo-xxx给每个微服务一个特定的名字

想要使用Spring Cloud首先要选定一种服务优先启动（服务发现优先、配置管理优先）方式，选择不同的方式将导致微服务的启动顺序有所不同相应的配置有所变化。当使用服务发现优先时可以把配置管理微服务注册到服务发现微服务这样其他的微服务只需服务发现微服务地址而不用关心配置管理微服务地址（可以通过服务发现获取）。当使用配置管理优先时需要在每个微服务中配置配置管理微服务地址，再在配置仓库中设置服务发现微服务的地址。Spring Cloud默认为配置管理优先，本架构使用服务发现优先因此需要在bootstrap.yml中配置spring.cloud.config.discovery.enabled=true

服务发现微服务

服务发现包含两个部分：

服务端，用于提供提供服务发现和注册
客户端，用于获取其他应用的注册信息和把本应用注册到服务端

服务端创建

创建Maven工程demo-discovery用于启动服务发现微服务，参考前面的工程搭建然后在pom文件中添加spring-cloud-starter-eureka-server依赖结果如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <groupId>com.runjf.springcloud</groupId>
        <artifactId>demo-parent</artifactId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.runjf.springcloud</groupId>
    <artifactId>demo-discovery</artifactId>

    <dependencies>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-eureka-server</artifactId>
        </dependency>
    </dependencies>

</project>

首先添加配置信息，服务发现的启动方式有两种：独立方式、多实例互相注册方式，具体的配置信息可参考org.springframework.cloud.netflix.eureka.EurekaClientConfigBean。这里使用独立方式，配置信息application.yml如下:

server:
  port: 8761 # 指定微服务的端口

eureka:
  client:
    registerWithEureka: false # 不需要在服务发现中注册
    fetchRegistry: false # 不需要获取其他服务发现中的注册信息
    serviceUrl:
      defaultZone: ${SPRING_DISCOVERY_URI:http://localhost:8761/eureka/}
  instance:
    preferIpAddress: true # 使用ip代替hostname

其中添加SPRING_DISCOVERY_URI是为了启动时方便设置地址。

然后在Application.java中加入@EnableEurekaServer注解用于启动服务发现

@EnableEurekaServer // 启动服务发现服务
@SpringBootApplication
public class Application {
    
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
    
}

启动好服务后就可以通过http://localhost:8761/查看信息了

客户端配置

其他工程需要通过@EnableDiscoveryClient结合@SpringBootApplication或者直接使用@SpringCloudApplication启用服务发现并在bootstrap.yml中配置服务发现服务端的地址。入口代码如下：

@EnableDiscoveryClient
@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

修改配置文件bootstrap.yml中添加服务发现服务端的地址

eureka:
  client:
    serviceUrl:
      defaultZone: ${SPRING_DISCOVERY_URI:http://localhost:8761/eureka/}

由于已在demo-parent中添加了spring-cloud-starter-eureka依赖所以pom无需做修改。

配置微服务

配置管理也包含两个部分：

服务端，用于提供配置一般使用Git作为配置的存储，不过也可以使用其他存储
客户端，用于获取当前应用的配置信息

服务端创建

创建Maven工程demo-config用于启动配置微服务，参考前面的工程搭建然后在pom文件中添加spring-cloud-config-server依赖结果如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <groupId>com.runjf.springcloud</groupId>
        <artifactId>demo-parent</artifactId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.runjf.springcloud</groupId>
    <artifactId>demo-config</artifactId>

    <dependencies>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-config-server</artifactId>
        </dependency>
        <dependency><!-- 接收配置文件变化 -->
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-config-monitor</artifactId>
        </dependency>
    </dependencies>

</project>

接着修改配置bootstrap.yml添加本微服务名称、服务发现地址和配置存储地址，这里使用Git作为后端存储由于Git默认没有提供图形界面不好管理所以使用Gitlab的Docker镜像搭建。配置如下：

spring:
  application:
    name: demo-config
  cloud:
    config:
      server:
        git:
#         本地文件配置方式（Linux）file://${user.home}/config-repo
#                     (Windows) file:///${user.home}/config-repo
          uri: ${SPRING_CONFIG_GIT_URI:http://gitlab.local/demo/config.git}

eureka:
  client:
    serviceUrl:
      defaultZone: ${SPRING_DISCOVERY_URI:http://localhost:8761/eureka/}

然后在application.yml中添加微服务端口server.port: 8888，再在Application.java中加入@EnableConfigServer注解用于启动服务发现

@EnableConfigServer // 启动配置服务
@SpringBootApplication
public class Application {
    
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
    
}

由于之前在pom中添加了spring-cloud-config-monitor依赖现在可以通过Gitlab的Webhooks触发配置修改的更新，这样就可以通过浏览器修改配置。如果配置更新后想通知其他应用可以添加spring-cloud-starter-bus-amqp依赖（这个利用的Spring Cloud Bus提供的支持）

客户端配置

修改配置文件bootstrap.yml中添加配置微服务配置，由于配置服务已注册到了服务发现所以只要在配置文件中配置配置服务的名称demo-config和设置服务发现优先

spring:
  cloud:
    config:
      discovery:
        enabled: true # discovery first
        serviceId: demo-config

由于已在demo-parent中添加了spring-cloud-starter-config依赖所以pom无需做修改。

客户端通过spring.application.name读取配置文件（例如：demo-xxx.yml），如果配置仓库中存在application.yml则会作为共享配置。启动应用后会看到如下日志信息：

b.c.PropertySourceBootstrapConfiguration : Located property source: CompositePropertySource [name='configService', propertySources=[MapPropertySource [name='configClient'], MapPropertySource [name='http://gitlab.local/demo/config.git/demo-xxx.yml'], MapPropertySource [name='http://gitlab.local/demo/config.git/application.yml']]]

客户端负载均衡

通过客户端负载均衡进行微服务间的通信由于我们的应用对外提供的都是RESTful风格的api所以可以直接使用RestTemplate结合@LoadBalanced实现客户端负载均衡。这个是利用了RestTemplate可以自动配置使用Ribbon，其中spring-cloud-starter-ribbon依赖已由spring-cloud-starter-eureka提供了就不用显示添加了。现在Spring默认已经不创建RestTemplateBean了因此需要在Application.java中显示添加配置Bean，代码如下：

@LoadBalanced
@Bean
public RestTemplate restTemplate() {
    return new RestTemplate();
}

如果想自定义RestTemplate的参数（如：访问超时、读取超时等）可以使用构造方法RestTemplate(ClientHttpRequestFactory requestFactory)例如：

PoolingHttpClientConnectionManager connectionManager = new PoolingHttpClientConnectionManager(30, TimeUnit.SECONDS);
connectionManager.setDefaultMaxPerRoute(20);
connectionManager.setMaxTotal(100);
CloseableHttpClient httpClient = HttpClients.createMinimal(connectionManager);
HttpComponentsClientHttpRequestFactory requestFactory = new HttpComponentsClientHttpRequestFactory(httpClient);
RestTemplate restTemplate = new RestTemplate(requestFactory);

具体的使用String str = restTemplate.getForObject("http://demo-xxx/data", String.class);，其中使用微服务名称（通过spring.application.name设置，本例子中的demo-xxx）代替具体的域名或者ip，负载均衡的RestTemplate支持配置失败重试可以通过spring.cloud.loadbalancer.retry.enabled=true启用该功能，具体的配置项可以参看org.springframework.cloud.config.client.RetryProperties。微服务名称到具体ip的切换是通过org.springframework.cloud.netflix.ribbon.RibbonLoadBalancerClient

熔断

熔断用于当请求链（一个请求会依次调用多个服务）中的某个微服务无响应或者超过指定的请求时间（特定策略）的微服务进行下线。添加仪表盘可以查看实时的请求情况（采样部分数据）

配置

首先需要在pom文件中添加spring-cloud-starter-hystrix依赖，然后在需要使用熔断的Bean的方法中添加@HystrixCommand注解用于启用熔断，如果需要整合多个微服务的熔断采样信息可以添加spring-cloud-netflix-hystrix-stream和spring-cloud-starter-stream-*依赖，具体配置如下：

<dependency><!-- 熔断器 -->
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-hystrix</artifactId>
</dependency>
<dependency><!-- 熔断器 输出统计数据 -->
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-netflix-hystrix-stream</artifactId>
</dependency>
<dependency><!-- 流相关 可用于汇总统计数据 -->
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-stream-rabbit</artifactId>
</dependency>

在Bean添加熔断注解：

@Component
public class StoreIntegration {

    @HystrixCommand(fallbackMethod = "defaultStores")
    public Object getStores(Map<String, Object> parameters) {
        //do stuff that might fail
    }

    public Object defaultStores(Map<String, Object> parameters) {
        return /* something useful */;
    }
}

如果想进行熔断的配置可以在application.yml文件中添加如下配置：

# 熔断开启线程超时（默认是启用的）
hystrix.command.default.execution.timeout.enabled: true
# 熔断处理请求的线程超时时间为10秒
hystrix.command.default.execution.isolation.thread.timeoutInMilliseconds: 10000
# getStores方法的特定配置，熔断处理请求的线程超时时间为30秒
hystrix.command.getStores.execution.isolation.thread.timeoutInMilliseconds: 30000

可以在getStores方法中使用RestTemplate这时需要注意熔断配置和HttpClient配置的结合（例如：超时时间等）

然后在Application.java文件中添加@EnableCircuitBreaker结合@SpringBootApplication或者直接使用@SpringCloudApplication开启熔断支持，启用后获取Hystrix数据的方式有两种：

通过HystrixStreamEndpoint提供一个地址/hystrix.stream用来获取数据
通过Spring Cloud Stream来传递数据

Hystrix仪表盘创建

Hystrix仪表盘用于可视化显示每个熔断器的运行情况。启动一个仪表盘需要在pom.xml中添加spring-cloud-starter-hystrix-dashboard依赖和在Application.java中添加注解@EnableHystrixDashboard。当想合并多个微服务中的Hystrix数据时可以在pom.xml中添加spring-cloud-starter-turbine-stream依赖、在Application.java中添加注解@EnableTurbineStream和在application.yml中配置服务信息。

启动Hystrix仪表盘后可以通过http://hostname:port/hystrix访问，然后在页面中填入已开启熔断支持的微服务的地址http://app_hostname:port/hystrix.stream即可看到Hystrix数据的图标了。

网关微服务

用来统一对外提供服务，集成了用户权限校验、路由（基于反向代理）等。

微服务创建

创建Maven工程demo-gateway用于启动配置微服务，参考前面的工程搭建然后在pom文件中添加spring-cloud-starter-zuul依赖结果如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <groupId>com.runjf.springcloud</groupId>
        <artifactId>demo-parent</artifactId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.runjf.springcloud</groupId>
    <artifactId>demo-gateway</artifactId>

    <dependencies>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-zuul</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>commons-logging</groupId>
                    <artifactId>commons-logging</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>com.netflix.netflix-commons</groupId>
            <artifactId>netflix-commons-util</artifactId>
        </dependency>
    </dependencies>

</project>

接着修改配置bootstrap.yml添加本微服务名称、服务发现地址。配置如下：

spring:
  application:
    name: demo-gateway
  cloud:
    config:
      discovery:
        enabled: true # discovery first
        serviceId: demo-config

eureka:
  client:
    serviceUrl:
      defaultZone: ${SPRING_DISCOVERY_URI:http://localhost:8761/eureka/}

添加启动入口Application.java

@EnableZuulProxy
@SpringCloudApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

由于本项目是网页应用如果存在多个地址会导致js跨域问题（当然也可以通过配置允许跨域的Header）和需要传递用户标识，所以这里使用的是@EnableZuulProxy否则可以使用@EnableZuulServer。

路由

接下来可以进行后端应用的路由配置，设置指定前缀的路径将路由到指定的微服务上，在application.yml中配置如下：

zuul:
  routes:
    abc:
      path: /abc/** # 指定前缀的路径
      stripPrefix: true # 访问后端时是否要包含前缀/abc
      serviceId: demo-abc # 对应的后端微服务
  ignored-headers: userid,keyabc # 忽略前端传递的Header

其中stripPrefix的配置依赖于后端微服务是否包含ContextPath（默认为空），可以通过server.contextPath配置Spring Boot 2.0以后的配置为server.servlet.contextPath。serviceId则是通过spring.application.name进行配置。

如果向后端发起请求时有添加自定义的Header，为了安全考虑应该添加zuul.ignored-headers使前端传递的Header无效化。

由于Zuul包含了熔断和负载均衡所以可以针对性的进行配置。对于熔断配置有：

# 熔断是否开启全局线程超时
hystrix.command.default.execution.timeout.enabled: true
# 熔断处理请求的全局线程超时时间为1秒
hystrix.command.default.execution.isolation.thread.timeoutInMilliseconds: 1000

hystrix:
  command:
    demo-abc:
      # demo-abc微服务熔断处理请求的全局线程超时时间5秒
      execution.isolation.thread.timeoutInMilliseconds: 5000
      threadPoolKeyOverride: demo-abc
  threadpool:
    demo-abc: # demo-abc微服务特定的线程池配置
      coreSize: 11 # 30 rps * 0.2 seconds = 6 + 5 = 11

对于负载均衡配置有：

# 读取超时时间
ribbon.ReadTimeout: 6000 
# demo-abc微服务负载均衡特定配置
demo-abc:
  ribbon:
    MaxTotalConnections: 200 # 最大连接数
    MaxConnectionsPerHost: 50 # 每个host最大连接数
    ConnectTimeout: 2000 # 连接超时时间
    ReadTimeout: 5000 # 读取超时时间

如果还有前置的反向代理，则前置反向代理的读取超时时间应该要大于或者等于负载均衡中配置的最大读取超时时间，例如还有前置反向代理服务器Nginx则需要在nginx.conf中配置超时时间proxy_read_timeout 60s;

用户权限校验

通过集成Shiro进行权限校验，校验通过后会在请求Header中添加用户标识符方便后端微服务获取用户信息。

分布式追踪

使用Spring Cloud Sleuth进行请求链路的追踪，通过Zipkin查看采样数据。首先在微服务的pom.xml中添加spring-cloud-starter-sleuth依赖如果想通过Stream的方式传递数据可以再添加spring-cloud-sleuth-stream和spring-cloud-starter-stream-rabbit（如果之前的Hystrix已添加则可忽略）依赖。然后创建Zipkin服务端添加如下依赖：

<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-sleuth</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-sleuth-zipkin-stream</artifactId>
</dependency>
<dependency>
    <groupId>io.zipkin.java</groupId>
    <artifactId>zipkin-autoconfigure-ui</artifactId>
    <version>1.31.3</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>

其中zipkin-autoconfigure-ui提供了UI界面方便查看数据，spring-boot-starter-jdbc和mysql-connector-java用来存储追踪的采样数据ZipkinServerConfiguration默认的存储zipkin.storage.type是在内存中使用一段时间后会把内存占满因此建议改用外部存储。默认的采样百分比为10%在application.yml中可以配置spring.sleuth.sampler.percentage也可以自己创建Bean提供采样策略替换SleuthStreamAutoConfiguration中默认配置。

接下来在Application.java中添加注解@EnableZipkinStreamServer用于启动Zipkin服务，用浏览器打开服务的地址就可以看到界面了。

由于项目中使用了WebSocket和JMS这部分追踪数据不是必须的因此添加如下配置

spring:
  sleuth:
    integration: # 关闭 Trace Messaging指定MQ队列
      enabled: false
      patterns: demo-*,topic://demo- # 或者指定队列不采集
      websockets:
        enabled: false
    scheduled: # 关闭定时
      enabled: false

多租户

通过EclipseLink提供的多租户功能并扩展JpaTransactionManager和代理EntityManagerFactory从而提供了EclipseLink需要的租户标识eclipselink.tenant-id。

Docker集成

Spring Boot提供的打包插件spring-boot-maven-plugin支持将所有依赖和到一个jar中，这样很方便的启动一个微服务只需要在命令行下执行java -jar demo-xxx-1.0.jar即可。为了简化部署考虑通过将微服务打包为Docker镜像连java环境也可以一并包含了，只要通过简单的docker run rjf/demo-xxx。

为了达到这个目的首先需要在pom.xml添加Docker插件docker-maven-plugin并配置Dockerfile位置<dockerDirectory>、镜像名称<imageName>、打包参数<buildArgs>以及一些需要包含的资源<resources>。<buildArgs>用于将参数传递给Dockerfile比如jar包的名称以及版本号等

<properties>
    <docker.image.prefix>rjf</docker.image.prefix>
    <docker.app.pkg>${project.build.finalName}.jar</docker.app.pkg>
</properties>

<plugin>
    <groupId>com.spotify</groupId>
    <artifactId>docker-maven-plugin</artifactId>
    <version>0.4.13</version>
    <configuration>
        <buildArgs>
            <APP_NAME>${project.artifactId}</APP_NAME>
            <APP_VERSION>${project.version}</APP_VERSION>
            <APP_PKG>${docker.app.pkg}</APP_PKG>
        </buildArgs>
        <imageName>${docker.image.prefix}/${project.artifactId}</imageName>
        <dockerDirectory>src/main/docker</dockerDirectory>
        <resources>
            <resource>
                <targetPath>/</targetPath>
                <directory>${project.build.directory}</directory>
                <include>${docker.app.pkg}</include>
            </resource>
        </resources>
    </configuration>
</plugin>

然后在src/main/docker文件夹中新建文件Dockerfile，其中HEALTHCHECK用于检查微服务是否启动完成配合Docker Compose（需要在docker-compose.yml中指定version: '2.1'以上版本）的depends_on下的配置condition: service_healthy可以实现按照指定顺序启动微服务，内容如下：

FROM frolvlad/alpine-oraclejdk8:slim
VOLUME /tmp
ARG APP_PKG
ARG APP_NAME
ARG APP_VERSION
ENV APP_NAME ${APP_NAME}
ENV APP_VERSION ${APP_VERSION}
ENV JAVA_OPTS ""
ADD ${APP_PKG} app.jar
RUN sh -c 'touch /app.jar'
HEALTHCHECK --interval=1m --timeout=10s \
  CMD wget -qO- "http://localhost:8761/info" || exit 1
CMD exec java $JAVA_OPTS -Djava.security.egd=file:/dev/./urandom -jar /app.jar

其中最后的CMD命令未使用CMD ["param1","param2"]是因为两原因：

避免启动后的PID1被sh占用，通过pstree -s <pid>查看可以看出───docker-containe───entrypoint.sh───java───137*[{java}]和───docker-containe───java───63*[{java}]的区别，其中多了entrypoint.sh这样会存在当传递信号时未被真正的java进程接收并处理的问题。
当使用docker exec命令时正常可以执行，否则需要添加Shell脚本文件entrypoint.sh并在中其中处理参数exec "$@"。

接下来打开终端进入到工程目录执行mvn package生成jar文件，然后执行mvn docker:build构建Docker镜像。如果Docker服务在远程则可以通过export DOCKER_HOST=tcp://192.168.1.123:2375 && mvn docker:build进行远程构建。

构建完成后执行docker run --rm rjf/demo-xxx即可启动微服务，如果不想执行默认的java进程可以在后面添加要执行的命令即可，例如想执行ls命令可以用docker run --rm -it rjf/demo-xxx ls

参考

基于Spring Cloud的分布式微服务化项目搭建 was originally published by Ruanjf at 奔霸 on February 28, 2018.

JVM Instrument使用介绍

2018-02-25T21:38:00+08:00

本文介绍如何使用JVM Attach API在应用运行中修改代码(本文通过jar的方式，如需C\C++的请参考这里，避免应用需要重启启动。使用方式有两种：

命令行接口，在应用启动时添加-javaagent:参数
VM 启动后启动代理，在应用启动后获取进程ID(pid)，通过Attach API动态加载代码

以下代码在Oracle Java虚拟机环境中使用，主要利用Instrumentation.redefineClasses(ClassDefinition… definitions)实现代码的热更新。为了简化所以代码都整合到一个jar中，具体工程详见GitHub。

先决条件

已安装JDK 6以上版本
已安装Maven
（可选）JAVA环境变量classpath已设置tools.jar，如未设置环境变量可参考这里或者在命令行中通过-cp显示设置

打包jar

如果觉得打包太过麻烦，可跳过打包环节直接下载jar

创建一个Maven工程在pom.xml文件中添加tools.jar依赖（由于Maven中默认不包含），依赖中的toolsjar与系统有关系需要使用<profiles>

<dependency>
    <groupId>jdk.tools</groupId>
    <artifactId>jdk.tools</artifactId>
    <version>system</version>
    <scope>system</scope>
    <systemPath>${toolsjar}</systemPath>
</dependency>

...

<profiles>
    <profile>
        <id>windows_profile</id>
        <activation>
            <os>
                <family>windows</family>
            </os>
        </activation>
        <properties>
            <toolsjar>${java.home}/lib/tools.jar</toolsjar>
        </properties>
    </profile>
    <profile>
        <id>Macos_profile</id>
        <activation>
            <os>
                <family>mac</family>
            </os>
        </activation>
        <properties>
            <toolsjar>${java.home}/../lib/tools.jar</toolsjar>
        </properties>
    </profile>
</profiles>

在pom.xml的maven-jar-plugin中添加<Can-Redefine-Classes>true</Can-Redefine-Classes>代理配置允许重定义此代理所需的类，如未设置会导致出现java.lang.UnsupportedOperationException: redefineClasses is not supported错误，详细信息如下：

Exception in thread "Attach Listener" java.lang.reflect.InvocationTargetException
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:498)
	at sun.instrument.InstrumentationImpl.loadClassAndStartAgent(InstrumentationImpl.java:386)
	at sun.instrument.InstrumentationImpl.loadClassAndCallAgentmain(InstrumentationImpl.java:411)
Caused by: java.lang.UnsupportedOperationException: redefineClasses is not supported in this environment
	at sun.instrument.InstrumentationImpl.redefineClasses(InstrumentationImpl.java:156)
	at com.runjf.test.jvm.instrument.Util.redefineClasses(Util.java:41)
	at com.runjf.test.jvm.instrument.AgentMain.agentmain(AgentMain.java:19)
	... 6 more
Agent failed to start!

创建一个主类com.runjf.test.jvm.instrument.Main用于测试动态更新代码是否生效。该类的执行逻辑为：打印指定类的指定方法，然后休眠指定的秒数，重复指定的次数。当执行代理后发现先后两次的打印结果不一样则说明动态加载生效了，main的默认打印Demo 1, ret: 1，设置代理后打印Demo 2, ret: 2，结果类似：

Demo 1, ret: 1
AgentMain done: Demo,/Demo.class.2
Demo 2, ret: 2

命令行接口

新建一个类com.runjf.test.jvm.instrument.Premain添加一个静态方法public static void premain(String agentArgs, Instrumentation inst);或者public static void premain(String agentArgs);用于启动时代理的入口，在pom.xml的maven-jar-plugin中添加<Premain-Class>com.runjf.test.jvm.instrument.Premain</Premain-Class>代理类配置

VM 启动后启动代理

新建一个类com.runjf.test.jvm.instrument.AgentMain添加一个静态方法public static void agentmain(String agentArgs, Instrumentation inst);或者public static void agentmain(String agentArgs);用于启动代理的入口，在pom.xml的maven-jar-plugin中添加<Agent-Class>com.runjf.test.jvm.instrument.AgentMain</Agent-Class>代理类配置。再添加一个类com.runjf.test.jvm.instrument.AgentAttach用于调用Attach API启动代理。

    public static void main(String[] args) throws IOException, AttachNotSupportedException, AgentLoadException,
            AgentInitializationException {
        String jarFileName = args[0];
        String processId = args[1];
        VirtualMachine virtualMachine = VirtualMachine.attach(processId);
        try {
            virtualMachine.loadAgent(jarFileName, args[2]);
        } finally {
            virtualMachine.detach();
        }
        System.out.println("AgentAttach done: " + Arrays.toString(args));
    }

需要传入的参数分别为：包含代理代码的jar、已启动的Java进程号和代理启动需要的参数(动态加载的类名,Class所在位置。例如：Demo,/Demo.class.2)

接下来进入jvm-instrument文件夹执行mvn package命令生成jvm-instrument-1.0-SNAPSHOT.jar

执行测试命令

进入target文件夹，执行下面两种测试

命令行接口

首先，执行命令java -jar jvm-instrument-1.0-SNAPSHOT.jar 6 10 Demo getInt观察默认的结果，每隔10秒打印一次Demo.getInt方法共重复6次，控制台打印结果如下。
```
  14203@rjf-mba.local
  [6, 10, Demo, getInt]
  Demo 1, ret: 1
  Demo 1, ret: 1
  Demo 1, ret: 1
  Demo 1, ret: 1
  Demo 1, ret: 1
  Demo 1, ret: 1
```
然后，在命令中添加代理配置java -javaagent:jvm-instrument-1.0-SNAPSHOT.jar=Demo,/Demo.class.2 -jar jvm-instrument-1.0-SNAPSHOT.jar 6 10 Demo getInt，控制台打印结果如下：
```
  14255@rjf-mba.local
  [6, 10, Demo, getInt]
  Demo 2, ret: 2
  Demo 2, ret: 2
  Demo 2, ret: 2
  Demo 2, ret: 2
  Demo 2, ret: 2
  Demo 2, ret: 2
```
需要注意下javaagent的参数传递格式-javaagent:<jarpath>[=<选项>]
VM 启动后启动代理

首先，启动默认的jarjava -jar jvm-instrument-1.0-SNAPSHOT.jar 6 10 Demo getInt控制台打印结果如下：
```
  10153@rjf-mba.local
  [6, 10, Demo, getInt]
  Demo 1, ret: 1
```
注意，接下来的一步需要tools.jar有些同学的classpath并为包含该jar，可以在命令中显示指定(如：java -cp /Library/Java/JavaVirtualMachines/jdk1.8.0_152.jdk/Contents/Home/lib/tools.jar)或者在classpath中添加jar路径(如：CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/jre/lib/rt.jar)。

然后，新开一个终端进入到target文件夹执行java -cp /Library/Java/JavaVirtualMachines/jdk1.8.0_152.jdk/Contents/Home/lib/tools.jar:jvm-instrument-1.0-SNAPSHOT.jar:. com.runjf.test.jvm.instrument.AgentAttach jvm-instrument-1.0-SNAPSHOT.jar 10153 Demo,/Demo.class.2来启动代理，其中10153为之前启动的java应用进程号，控制台打印结果如下：
```
  AgentAttach done: [jvm-instrument-1.0-SNAPSHOT.jar, 10153, Demo,/Demo.class.2]
```
现在回到前一个终端可以看到(可能需要等几秒)如下信息则说明动态加载生效了
```
  10153@rjf-mba.local
  [6, 10, Demo, getInt]
  Demo 1, ret: 1
  Demo 1, ret: 1
  AgentMain done: Demo,/Demo.class.2
  Demo 2, ret: 2
```

参考文档

JVM Instrument使用介绍 was originally published by Ruanjf at 奔霸 on February 25, 2018.

安装Shadowsocks服务器

2018-02-24T21:58:00+08:00

# 创建文件夹并进入
mkdir /opt/shadowsocks && cd "$_"
# 下载程序
wget https://github.com/shadowsocks/shadowsocks-go/releases/download/1.2.1/shadowsocks-server.tar.gz
# 解压程序
tar zxvf shadowsocks-server.tar.gz
# 下载配置
wget https://github.com/shadowsocks/shadowsocks-go/raw/master/config.json
# 或者添加配置
tee -a config.json << EOF
{
    "server":"127.0.0.1",
    "server_port":9100,
    "local_port":1080,
    "local_address":"127.0.0.1",
    "password":"R3NRbdcyq",
    "method": "aes-128-cfb",
    "timeout":600
}

EOF


# 启动测试，可用后按Ctrl + C停止程序
./shadowsocks-server


# 安装服务
tee -a /etc/systemd/system/shadowsocks.service << EOF
[Unit]
Description=Shadowsocks Server.
After=network.target

[Service]
ExecStart=/opt/shadowsocks/shadowsocks-server -c /opt/shadowsocks/config.json
Restart=on-failure
RestartSec=42s

[Install]
WantedBy=multi-user.target

EOF


# 设置权限
chmod 664 /etc/systemd/system/shadowsocks.service
# 重新加载服务配置
systemctl daemon-reload
# 启动服务
systemctl start shadowsocks.service
# 查看服务状态
systemctl status shadowsocks.service
# 开启服务自启动
systemctl enable shadowsocks.service

参考 shadowsocks-server shadowsocks-go

安装Shadowsocks服务器 was originally published by Ruanjf at 奔霸 on February 24, 2018.

在Docker内定位使用CPU过高的Java进程

2018-01-04T14:33:00+08:00

当访问应用需要很长时间才响应时可以登录到系统上使用top命令查看CPU使用情况，如果发现CPU使用过高则可以通过下面所讲的方法定位问题。本文将介绍如何定位Docker内使用CPU过高的Java进程

首先，通过top命令找到CPU使用过高的进程（如：7152），如下信息已忽略top的头信息

 PID USER      PR  NI    VIRT    RES    SHR S %CPU %MEM     TIME+ COMMAND
root      20   0 1668880 308248   4640 S  1.3 16.4   8:14.01 java
root      20   0  129848   7080   1708 S  0.3  0.4 153:43.35 AliYunDun
root      20   0  166704   4548    440 S  0.3  0.2  30:11.21 ilogtail
root      20   0  134896   2788      0 S  0.3  0.1   1:16.78 docker-containe

确定进程信息

判断该进程是否在Docker容器中（如果有在则找出对于的容器）有两种方式

使用cat /proc/7152/cgroup查看打印内容是否包含:/docker/。原理是Docker使用了Linux cgroups

memory:/docker/b7a84996139a834966df09d10b8a50082b5043153f633f5f5fd2638de0ebc206
hugetlb:/docker/b7a84996139a834966df09d10b8a50082b5043153f633f5f5fd2638de0ebc206
cpuset:/docker/b7a84996139a834966df09d10b8a50082b5043153f633f5f5fd2638de0ebc206
cpuacct,cpu:/docker/b7a84996139a834966df09d10b8a50082b5043153f633f5f5fd2638de0ebc206
perf_event:/docker/b7a84996139a834966df09d10b8a50082b5043153f633f5f5fd2638de0ebc206
freezer:/docker/b7a84996139a834966df09d10b8a50082b5043153f633f5f5fd2638de0ebc206
devices:/docker/b7a84996139a834966df09d10b8a50082b5043153f633f5f5fd2638de0ebc206
net_prio,net_cls:/docker/b7a84996139a834966df09d10b8a50082b5043153f633f5f5fd2638de0ebc206
blkio:/docker/b7a84996139a834966df09d10b8a50082b5043153f633f5f5fd2638de0ebc206
pids:/docker/b7a84996139a834966df09d10b8a50082b5043153f633f5f5fd2638de0ebc206
name=systemd:/docker/b7a84996139a834966df09d10b8a50082b5043153f633f5f5fd2638de0ebc206

如果有打印docker信息则可以通过docker inspect --format ' b7a849961查询到容器的名称，其中b7a849961为容器id的前几个字符

使用pstree -s 7152查看打印的进程树是否包含docker-containe，显示信息如下：
```
  systemd(1)───docker(1101)───docker-containe(1447)───docker-containe(7088)───entrypoint.sh(7099)───java(7152)─┬─{java}(7177)
```
其中只显示了第一行，后面包含多个线程未显示出来如果有包含docker-containe则可以通过docker ps -q | xargs docker inspect --format ' ' |grep 7099显示出容器名称，其中7099为容器进程ID

如果是非Docker容器进程则可以通过ps -ef |grep 7152查看进程启动信息，以确定具体的应用。

确定进程中的线程CPU使用情况

通过top -H -p 7152，如下信息已忽略top的头信息

  PID USER      PR  NI    VIRT    RES    SHR S %CPU %MEM     TIME+ COMMAND
root      20   0 1669908 308540   4580 S  4.7 16.4   0:00.43 java
root      20   0 1669908 308540   4580 S  0.3 16.4   0:16.46 java
root      20   0 1669908 308540   4580 S  0.3 16.4   0:13.82 java
root      20   0 1669908 308540   4580 S  0.0 16.4   0:00.01 java
root      20   0 1669908 308540   4580 S  0.0 16.4   0:16.04 java

或者ps -To pcpu,tid,pid,user 7152 |sort -r -k1 |more

%CPU   TID   PID USER
3  7234  7152 root
0  8715  7152 root
0  8650  7152 root
0  8563  7152 root
0  8558  7152 root

找出CPU使用过高的线程ID（如：7234）。

注意，如果是在Docker中的容器的话需要进入到对应的容器中否则执行出来的线程ID将不对应，无法匹配后续的信息。可以通过docker exec -it b7a849961 ps -ef列出容器内部的进程列表（由于容器基本上是单进程或者少数几个进程可以很方便的辨认出对于的需要查看的进程），打印信息如下：

UID        PID  PPID  C STIME TTY          TIME CMD
root         1     0  0 Mar02 ?        00:00:00 /bin/sh /sbin/entrypoint.sh
root         5     1  0 Mar02 ?        00:08:44 /usr/lib/jvm/java-7-openjdk-amd6
root        90     0  0 16:16 ?        00:00:00 ps -ef

通过观察发现进程号为5因此修改上面的命令为docker exec -it b7a849961 top -H -p 5或者docker exec -it b7a849961 ps -To pcpu,tid,pid,user 5 |sort -r -k1 |more这时可打印类似上面的结果

%CPU   TID   PID USER
3    26     5 root
0    66     5 root
0    65     5 root
0    63     5 root
0    62     5 root
0    56     5 root
0     5     5 root
0    54     5 root

这时可找出CPU使用过高的线程ID（如：26）。

进行Jvm线程Dump

通过Jvm线程Dump可以查出线程对应的Class，从而达到定位Java代码的作用

这里介绍两种进行线程Dump的方法

通过jstack命令，使用jstack -l <pid>将结果输出到控制台，如果想将内容保存到文件中请使用jstack -l <pid> > jstack_$(date "+%Y%m%d%H%M%S").txt，其中<pid>为进程ID。如果机器只安装了jre可能不存在jstack命令，那你可以通过下面的方式。
通过kill命令，使用kill -3 <pid>将结果输出到默认的日志文件中，如果在Docker容器内日志可能被接管了，这时可以通过docker logs b7a849961查看如果想输出到文件中可以使用docker logs b7a849961 >& b7a849961_$(date "+%Y%m%d%H%M%S").log

打印的日志信息如下：

"org.springframework.jms.listener.DefaultMessageListenerContainer#0-1" prio=10 tid=0x00007f0ad4baa800 nid=0x1a runnable [0x00007f0aae3e8000]
   java.lang.Thread.State: RUNNABLE
	at org.apache.qpid.amqp_1_0.client.Receiver.receive(Receiver.java:264)
	at org.apache.qpid.amqp_1_0.jms.impl.MessageConsumerImpl.receive0(MessageConsumerImpl.java:306)
	at org.apache.qpid.amqp_1_0.jms.impl.MessageConsumerImpl.receiveImpl(MessageConsumerImpl.java:275)
	at org.apache.qpid.amqp_1_0.jms.impl.MessageConsumerImpl.receive(MessageConsumerImpl.java:258)
	at org.apache.qpid.amqp_1_0.jms.impl.MessageConsumerImpl.receive(MessageConsumerImpl.java:58)
	at org.springframework.jms.listener.AbstractPollingMessageListenerContainer.receiveMessage(AbstractPollingMessageListenerContainer.java:413)
	at org.springframework.jms.listener.AbstractPollingMessageListenerContainer.doReceiveAndExecute(AbstractPollingMessageListenerContainer.java:293)
	at org.springframework.jms.listener.AbstractPollingMessageListenerContainer.receiveAndExecute(AbstractPollingMessageListenerContainer.java:246)
	at org.springframework.jms.listener.DefaultMessageListenerContainer$AsyncMessageListenerInvoker.invokeListener(DefaultMessageListenerContainer.java:1142)
	at org.springframework.jms.listener.DefaultMessageListenerContainer$AsyncMessageListenerInvoker.executeOngoingLoop(DefaultMessageListenerContainer.java:1134)
	at org.springframework.jms.listener.DefaultMessageListenerContainer$AsyncMessageListenerInvoker.run(DefaultMessageListenerContainer.java:1031)
	at java.lang.Thread.run(Thread.java:745)

接下来将上一节中获取到线程ID26转化为16进制数（如果需要将16进制转为10进制可以使用echo $((16#1a))），可以使用命令echo "obase=16;ibase=10;26" | bc | tr '[:upper:]' '[:lower:]'得到结果1a。通过查找之前保存的日志中的nid=0x1a可以找到对应的线程所执行的代码以及线程的状态，如果在Linux下可以使用命令grep -n -A 15 nid=0x1a jstack_20180104112345.txt快速定位到对应的线程。

Windows下操作

查看CPU，可以使用任务管理器
查看线程，可以使用Process Explorer，如图
进制转换，可以使用计算器（快捷键Win + R启动运行窗口然后输入calc，接着依次按下Alt、V、S切换到科学型）

参考

线程Dump

Process Explorer

在Docker内定位使用CPU过高的Java进程 was originally published by Ruanjf at 奔霸 on January 04, 2018.

macOS配置

2017-11-22T23:08:00+08:00

由于近期重装升级了新的系统macOS High Sierra，这里记录下系统配置和软件安装

系统配置

# 键盘长按支持
defaults write -g ApplePressAndHoldEnabled 0
# 修改系统截图位置
defaults write com.apple.screencapture location ~/Pictures/ScreenShots; killall SystemUIServer

安装命令行工具参考

# open a dialog for installation of the command line developer tools
install-command-line-tools-mac-os-x/
xcode-select --install

设置代理，方便下载（如果有代理的话）

export http_proxy=http://127.0.0.1:1087;export https_proxy=http://127.0.0.1:1087;
# 或者
export ALL_PROXY=socks5://127.0.0.1:1086

必备软件

安装Oh My ZSH!

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

安装brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install wget

安装brew第三方包Homebrew-Cask 不清楚Cask的可以看这里

brew tap caskroom/cask
brew tap caskroom/versions # 支持安装特定版本

安装Quick Look插件参考

brew cask install qlcolorcode qlstephen qlimagesize webpquicklook suspicious-package qlvideo provisionql

安装rlwrap解决命令行下运行的命令无法使用键盘上下键问题

brew install rlwrap

安装tree用于树形方式显示目录

brew install tree

开发工具

安装wrk压力测试工具

brew install wrk

安装wireshark网络封包分析工具

brew cask install wireshark

# 或者
brew install wireshark --with-qt
brew cask install wireshark-chmodbpf

安装Steel Bank Common Lisp

brew install sbcl
# 可以在命令行包裹rlwrap使用，在.zshrc中添加
tee -a ~/.zshrc << EOF

# 包裹Steel Bank Common Lisp以便支持键盘上下键
alias sbcl="rlwrap sbcl"
EOF

安装Java开发环境参考

brew cask install java
# 或者安装JDK8，安装之前确保已经安装了caskroom/versions，如果没有可以通过brew tap caskroom/versions进行安装
brew cask install java8

如果觉得下载太慢可以在外部下载后拷贝的Cask缓存文件夹，通过 brew cask info java8查看Java版本信息，进行手动下载

java8: 1.8.0_152-b16,aa0333dd3019491ca4f6ddbe78cdb6d0
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Not installed
From: https://github.com/caskroom/homebrew-versions/blob/master/Casks/java8.rb
==> Name
Java Standard Edition Development Kit
==> Artifacts
JDK 8 Update 152.pkg (Pkg)
==> Caveats

通过以下命令将下载好的dmg安装包拷贝到Cask缓存文件夹

cp ~/Downloads/jdk-8u152-macosx-x64.dmg `brew --cache`/Cask/`brew cask info java8 |grep java8: | sed -E "s/: /--/"`.dmg
brew cask install java8

安装Apache Maven

brew install maven

安装Node.js开发环境，使用nvm进行管理参考安装Oh My ZSH! zsh-nvm插件

# 下载插件
git clone https://github.com/lukechilds/zsh-nvm ~/.oh-my-zsh/custom/plugins/zsh-nvm

# 添加插件到zsh配置中
perl -0777 -pe 's/^(plugins=\(\n(\s|.)*?)\)$/\1  zsh-nvm\n)\n#延迟加载zsh-nvm插件\nexport NVM_LAZY_LOAD=true\n/m' -i ~/.zshrc

# 更新nvm插件
nvm upgrade
# 安装Node.js https://github.com/creationix/nvm#usage
nvm install 8.9
# 设置默认Node.js版本
nvm alias default 8.9
# 使用特定版本
nvm use 6.12

yarn依赖管理，并配置淘宝NPM镜像

brew install yarn --without-node
yarn config set registry https://registry.npm.taobao.org # 注册模块镜像
yarn config set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node源码镜像
yarn config set chromedriver_cdnurl http://npm.taobao.org/mirrors/chromedriver  # chromedriver 镜像
yarn config set phantomjs_cdnurl http://npm.taobao.org/mirrors/phantomjs # phantomjs 镜像
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ # electron 镜像
yarn config set selenium_cdnurl http://npm.taobao.org/mirrors/selenium # Selenium 镜像
yarn config set sass_binary_site http://npm.taobao.org/mirrors/node-sass # node-sass 镜像

安装nginx使用homebrew nginx扩展仓库

# 添加扩展仓库
brew tap homebrew/nginx

# 查看安装配置选项
brew options nginx-full
brew info nginx-full

# 安装
brew install nginx-full --with-flv --with-gunzip --with-gzip-static --with-http2 --with-mp4 --with-realip --with-status --with-sub --with-cache-purge-module --with-echo-module --with-lua-module --with-mp4-h264-module --with-subs-filter-module

安装MySQL

brew install mysql

安装Alfred QRCode Python依赖

sudo easy_install pip
# 使用--user可以避免sudo
pip install --user pillow
pip install --user qrcode

安装golang开发环境

brew instal go
# 在.zshrc中添加
tee -a ~/.zshrc << EOF

# 添加golang path
export PATH=$PATH:/usr/local/opt/go/libexec/bin
EOF

# 安装Debug环境delve https://github.com/derekparker/delve
# 参考 https://github.com/go-delve/homebrew-delve/issues/19#issuecomment-330442033
brew install go-delve/delve/delve
cd $HOME/Library/Caches/Homebrew
tar xf delve-*.gz
# go into directory ( mine is delve-1.0.0-rc.2 )
sh scripts/gencert.sh # 需要输入密码
brew install go-delve/delve/delve

macOS配置 was originally published by Ruanjf at 奔霸 on November 22, 2017.

Dnsmasq安装配置

2016-09-01T19:18:00+08:00

为了避免在内网环境下每台机子都要修改hosts文件添加域名，所以通过在路由器上配置自己搭建的DNS服务从而不用在每台机子上配置了，特别是通过移动设备访问内网应用时就方便多了（如iOS在未越狱时想修改比较困难）。这里选用Dnsmasq作为DNS服务器

安装Dnsmasq

# Ubuntu/Debian
$ apt-get install dnsmasq
# Centos/RHEL
$ yum install dnsmasq

配置Dnsmasq

注：本机IP地址为192.168.16.189

安装完后通过新建配置文件/etc/dnsmasq.d/address.conf这样可以避免修改默认配置。主要配置有：

配置上游DNS，这个值可以是由路由器提供（可能内网有做其他网络配置）
配置DNS监听地址，可以配置上本机127.0.0.1和IP地址192.168.16.189
配置泛域名解析ip，默认支持子域名，配置格式如：address=/work.net/192.168.16.11

如果/etc/hosts中有配置也会被DNS服务器获取

完整配置如下：

# 上游DNS
server=192.168.18.1
# 本机和局域网dns可用
listen-address=127.0.0.1,192.168.16.189

address=/work.net/192.168.16.189
address=/22.work.net/192.168.16.22
address=/33.work.net/192.168.16.33

如果本机上装了Docker，容器中的应用也需要配置hosts的话还需要添加DNS服务器地址nameserver 192.168.16.189到/etc/resolv.conf中。

配置完后可通过dnsmasq --test测试配置文件是否有错误，然后通过systemctl start dnsmasq.service启动服务。

如果机子有启用防火墙的话，需要配置服务允许通过防火墙

$ firewall-cmd --zone=public --add-service=dns --permanent # 允许dns通过防火墙
$ firewall-cmd --reload # 重新载入以生效

接着通过dig测试DNS服务是否可用（最好在局域网中的其他机器上也进行测试）

$ dig @127.0.0.1 22.work.net
$ dig @192.168.16.189 22.work.net
$ nslookup 22.work.net

测试完成后添加开机自启服务systemctl enable dnsmasq.service

路由器配置

登录路由器http://192.168.1.1/（有些ip可能会不一样），找到网络配置修改首选DNS服务器地址为Dnsmasq安装的机子

参考

Dnsmasq

利用Dnsmasq部署DNS服务

Dnsmasq安装配置 was originally published by Ruanjf at 奔霸 on September 01, 2016.

npm添加二进制文件镜像地址

2016-04-02T15:42:00+08:00

由于国内访问Amazon S3比较慢，导致通过npm下载二进制文件依赖时会中断或者直接下不动，所以需要在npm命令后面加上--{module_name}_binary_host_mirror，其中module_name存在于package.json中。每个模块名称又不一样（例如：sqlite3的模块名为node_sqlite3）这时可以通过npm view sqlite3 binary或者指定版本npm view sqlite3@3.1.3 binary查询到模块名称而不需要去仓库查看打印结果如下：

$ npm view sqlite3@3.1.3 binary
{ module_name: 'node_sqlite3',
  module_path: './lib/binding/{node_abi}-{platform}-{arch}',
  host: 'https://mapbox-node-binary.s3.amazonaws.com',
  remote_path: './{name}/v{version}/{toolset}/',
  package_name: '{node_abi}-{platform}-{arch}.tar.gz' }

找到模块名称后组成--node_sqlite3_binary_host_mirror，再添加上淘宝 NPM 镜像组合成完整的命令npm install sqlite3 --node_sqlite3_binary_host_mirror=https://npm.taobao.org/mirrors。需要注意的是镜像地址的路径host、remote_path和package_name组合以后的地址是否正确。

如果在安装依赖时遇到node-gyp权限的问题可以加上--unsafe-perm配置

参考

npm添加二进制文件镜像地址 was originally published by Ruanjf at 奔霸 on April 02, 2016.

Linux下添加开机自启服务

2016-03-20T21:33:00+08:00

本文使用Systemd配置自启动服务，操作系统为Centos 7

编写配置文件

配置文件可以通过拷贝现有的/usr/lib/systemd/system/xxxx.service或者新建文件。这里使用新建文件/etc/systemd/system/intellij.service的方式：

[Unit]
Description=IntelliJ IDEA License Server.
After=network.target

[Service]
ExecStart=/root/IntelliJIDEALicenseServer/IntelliJIDEALicenseServer_linux_386 -p 10170 -u idea
Restart=on-failure
RestartSec=42s

[Install]
WantedBy=multi-user.target

启用服务

修改文件的权限chmod 664 /etc/systemd/system/intellij.service，接着重新加载配置systemctl daemon-reload，然后启动服务systemctl start intellij.service再通过systemctl status intellij.service查看服务状态是否正常如果非active的话可以通过journalctl -u intellij.service查看日志信息。最后通过systemctl enable intellij.service加入开机自启。

防火墙配置

如果有启用防火墙则还需下面配置

firewall-cmd --zone=public --add-port=10170/tcp --permanent # 允许10170通过防火墙
firewall-cmd --reload # 重新载入以生效

参考

CREATING AND MODIFYING SYSTEMD UNIT FILES

Linux下添加开机自启服务 was originally published by Ruanjf at 奔霸 on March 20, 2016.

CentOS 7 防火墙配置

2016-01-29T20:54:00+08:00

本文主要介绍两种防火墙的配置方式：基于端口和基于服务。

基于端口

  firewall-cmd --zone=public --add-port=9090/tcp --permanent # 允许9090通过防火墙

基于服务

由于防火墙中的服务跟系统的服务没有直接关系因此需要通过firewall-cmd --get-services |grep xxx查询防火墙内置的服务，如果有存在则可以通过firewall-cmd --zone=public --add-service=xxx --permanent允许xxx服务（可以放行多个端口）通过防火墙

最后重新载入firewall-cmd --reload以生效配置

参考：

RHEL 7

CentOS 7 下使用 Firewall

Linux防火墙配置(iptables, firewalld)

How To Set Up a Firewall Using FirewallD on CentOS 7

CentOS 7 防火墙配置 was originally published by Ruanjf at 奔霸 on January 29, 2016.

配置Tocmat成window的服务

2015-11-22T16:21:00+08:00

缘由

由于机子存在断电的情况，重启后对应的因为又未重启如Tomcat。因此需要进行自启动配置
在配合Jenkins进行项目部署时需要先停止tomcat，再进行启动

添加启动方式

有两种方式可以实现自启动

Windows任务计划
注册成服务

使用Windows任务计划的方式

打开cmd命令行窗口，可以通过快捷键Win + r再输入cmd按回车即可。在开的界面中输入如下内容：

SCHTASKS /Create /RU SYSTEM /SC ONSTART /TN Tomcat9180Gateway /TR "D:\apache-tomcat-6.0.36-gateway\bin\start.bat"

其中Tomcat9180Gateway是任务计划的名称，"D:\apache-tomcat-6.0.36-gateway\bin\start.bat"是应用的启动地址

使用注册Windows服务的方式

首先还是要打开cmd命令行窗口，然后进入到Tocmat所在目录。也可以进入到所在文件夹按住Shift后右键可以看到一个命令行的选项，点击即可
进入到bin目录中，输入service.bat install gateway其中gateway是服务名称。注册成功后命令行窗口会提示The service 'gateway' has been installed。

需要注意的问题是，如果发现bin目录中没有service.bat，这大概就是你的Tomcat包下的不对了，apache官网提供了多种方式的包。需要选择有包含附加命令的

配置Tocmat成window的服务 was originally published by Ruanjf at 奔霸 on November 22, 2015.

在谷歌浏览器(Chrome)中运行安卓应用(APK)

2015-03-15T20:22:00+08:00

介绍

平常我们的Android APK只能在手机或者Pad上运行。由于谷歌提供了能在ChromeOS下运行APK后，外国一个牛人就把它改造成在Chrome下就可以运行了。考虑下电脑上都跑着APK，逆天了。

运行先决条件

安装依赖扩展应用

下载地址在这里，这个是64版本的。可能有些应用已经默认是64的了（又是苹果开的先河呵呵了）因此大家还是下64位的吧。真想要32位的这里也双手奉上。
接下来就是打开谷歌浏览器的扩展应用，点击链接或者复制这个chrome://extensions/到浏览器的地址栏。快捷键ctrl + L，OSX下cmd + L。先勾上开发者模式在页面顶部的右边
然后先下载解压到一个文件夹，再到扩展应用中选择刚才解压到的文件夹。就可以看到如下图的界面

安卓APK转化为扩展应用

到终端或者命令行界面下下安装打包工具npm install chromeos-apk -g。未安装过nodejs环境的，请移步到nodejs与npm安装

接下来到APK所在的目录下执行命令chromeos-apk --name duokan DkReader_3.4.1_02112111_Duokan.apk。运行结果如下

rjf-mba:chrome-apk $ chromeos-apk --name duokan DkReader_3.4.1_02112111_Duokan.apk
Directory " com.duokan.reader.android " created. Copy that directory onto your Chromebook and use "Load unpacked extension" to load the application.

执行命令后将产生一个文件夹，最后在扩展应用添加该文件夹

运行扩展应用

在扩展应用中点击对应应用的启动链接（蓝色链接地址）效果如下：

附加说明

在生成的扩展应用对应的manifest.json中添加"resize": "scale"配置即可实现应用窗口大小可变功能
转换扩展命令chromeos-apk支持参数--tablet，以实现作为Pad应用（窗口大）。如，chromeos-apk --tablet --name duokan DkReader_3.4.1_02112111_Duokan.apk

参考chromeos-apk

在谷歌浏览器(Chrome)中运行安卓应用(APK) was originally published by Ruanjf at 奔霸 on March 15, 2015.

Windows环境下node-webkit应用打包

2015-03-07T20:05:00+08:00

使用流程

创建两个bat文件package_gateway-nw.bat和build_gateway-nw.bat，文件内容文章下面介绍
将package_gateway-nw.bat文件放于node-webkit应用的源码文件夹，用于打包源码
将build_gateway-nw.bat文件放于node-wekbit运行目录下，运行环境下载地址
执行build_gateway-nw.bat,进行打包和生成可执行文件。

批处理逻辑

build_gateway-nw.bat内部使用call调用package_gateway-nw.bat生成文件xxx.nw到build_gateway-nw.bat文件所在的文件夹
使用系统的copy命令进行生成可执行程序以xxx.exe
使用7z进行压缩生成xxx.zip，方便拷贝

压缩应用代码

压缩的批处理文件package_gateway-nw.bat内容如下：

@rem 打包使用zip格式，生成xxx.nw的文件名，
del gateway-nw.nw
"D:\Program Files\7-Zip\7z.exe" a -tzip gateway-nw.nw -x!.git -x!html "%~dp0"\*

使用来7z进行压缩，其中需要提下的是

-x!xxx 这个是7z压缩的附加指令，用于排除需要的xxx文件
%~dp0 这个表示当前批处理文件所在目录，这个bat文件和源码放一起

生成可执行文件

压缩的批处理文件build_gateway-nw.bat内容如下：

del gateway-nw.nw
del gateway-nw-ia32.exe
del gateway-nw-win-ia32.zip

@rem 打包工程操作 使用call 确保环境
call ..\gateway-nw\package_gateway-nw.bat

@rem 生成exe
copy /b nw.exe+gateway-nw.nw gateway-nw-ia32.exe
del gateway-nw.nw

@rem 打包可用的zip
"D:\Program Files\7-Zip\7z.exe" a -tzip gateway-nw-win-ia32.zip -x!pdf.dll -x!nwsnapshot.exe -x!nw.exe -x!
build_gateway-nw.bat "%~dp0"\*

其中需要提下的是

call Windows下系统命令用于调用build_gateway-nw.bat，使用独立的运行环境
coyp Windows下的系统命令用于生成执行文件

参考nwjs

Windows环境下node-webkit应用打包 was originally published by Ruanjf at 奔霸 on March 07, 2015.

Chrome Debugger 那些你应该知道的功能

2013-12-30T21:55:00+08:00

做前端开发应该都了解浏览器，这里主要介绍Chrome全文参考chrome-developer-tools javascript-debugging。如果有Eclipse Debug的经验应该很好理解。Chrome Debugger还可以用于调试nodejs应用这个以后写文章介绍

基础调试

格式化压缩的代码Pretty print see
运行到指定行Continue to Here see
条件断点

首先设置一个断点，然后右键该断点选择Edit breakpoint在弹出的输入框中填写具体的条件即可
在异常的行触发断点 see
动态修改内容 see

在Sources界面内选择某个js文件直接修改，然后使用Ctrl + S或者Cmd + S。这样即可及时生效
异常栈查看 see

在右下角有一个打叉的小图标（以js出错为前提）。点击可以查看详细的栈信息，如需查找对于的代码请先点击左边的小三角形图标在展开的栈中点击靠右边的js文件名。如果在代码中像打印栈可以通过console.log(e.stack)，打印当前代码调用栈可以通过console.trace()
断言console.assert(var1 !== undefined, "no var1")
Source Maps 用于关联源码位置 see

HTML相关调试

DOM变化断点 see

切换到Elements界面，右键需要监控的元素选择Break on...(就的版本可能不需要这个) –> Break on Subtree Modifications。这样元素的内部发生变化时会触发断点
XMLHttpRequest(平常是由JavaScript发起的请求)请求中断

在Sources界面的右边找到XHR Breakpoint添加URL中包含的字符，这样在发送请求时会触发断点
事件断点（鼠标事件、键盘事件等）

在Sources界面的右边找到Event Listener Breakpoint勾选需要的事件，这样在发生事件时会触发断点

Chrome Debugger 那些你应该知道的功能 was originally published by Ruanjf at 奔霸 on December 30, 2013.

Linux下监控进程状态

2013-07-17T21:03:00+08:00

写什么脚本都是有原因的，由于在写的时候没找到好用的监控工具，不过后面发现了nmon，脚本中有些东西还是可以记下来的，这边就大概介绍下

用法

# 进入到脚本所在目录
cd /root/monitoring/
# 运行脚本
nohup monitoring.sh &
# 当然也可以一步合成
cd /root/monitoring/ && nohup monitoring.sh &

其中有几个文件需要注意：

config.ini记录了一些配置信息，原始是用来监控java的情况的（ps：本人从事j2ee的开发因此才监控与web容器相关的信息）
monitoring.sh监控程序主体

单次监控记录结果如下：

[2012-10-01 00:02:20] cpu=0 mem=8.6 netstat_p=13 netstat_t=41 netstat_a=450 lsof_p=436 lsof_a=6346
# 这里详细介绍下各项的含义（注：记录的信息都是针对监控进程当时的瞬间信息，下面就不在重复）
# cpu cpu的使用情况
# mem 内存的使用情况
# netstat_p 进程相关的网络连接数(相对于WEB应用这个还是挺重要的指标)
# netstat_t [TCP](http://zh.wikipedia.org/zh/TCP)相关的网络连接数
# netstat_a 总的网络连接数
# lsof_p 进程的文件打开数（被这货坑过一次，程序的各项指标正常但是无法访问，这个下次发文细讲）
# lsof_a 系统总的文件打开数

配置说明

这边列出几点可能需要修改的配置，配置文件修改后自动识别，并将在下次执行监控是生效，无需重新启动

# 监控程序(默认监听init)
p_name=java

# 监控时间间隔（单位秒）
s_time=900

# 监控cpu上限（cpu使用率参考top）
max_cpu=49

# 监控内存上限（mem使用百分比参考top）
max_mem=40

# 监控连接数（程序的）
max_netstat=400

# 文件打开最大数
max_lsof=10000

有价值的地方

$(cd "$(dirname "$0")"; pwd)获得脚步所在的目录
${#runs[@]}获取数组runs的长度，可用于累加赋值runs[${#runs[@]}]=$value
for i in $(seq ${#runs[@]})执行命令并返回结果给for

源代码如下：（or 这里）

Linux下监控进程状态 was originally published by Ruanjf at 奔霸 on July 17, 2013.

获取git两次commit变化的文件

2013-07-15T22:24:00+08:00

由于在网络上无法找到git两次提交变化的文件（用svn相对就简单多了），于是萌生了自己写个脚本实现该功能。至于为啥要这么用呢，为了这货jenkins

用法

# 工程根路径
export wkp="/root/.jenkins/jobs/tw/workspace/"
# 需要提取变化文件的目录（包含子目录，可使用相对路径）
export cpp="WebRoot/"
# 提取的变化文件存放位置（可使用相对路径）
export upn="update_tmp"
sh /root/git-get-pull-files.sh

其中有几个文件需要注意：

update_lastPull记录上次pull的commit SHA hash，update_lastPull文件不存在则默认为全更新
${upn}/delFiles.txt记录已经被删除的文件

运行过程如下：

rjf@rjf-ubuntu:~$ export wkp="/root/.jenkins/jobs/tw/workspace/"
rjf@rjf-ubuntu:~$ export upn="update_tmp"
rjf@rjf-ubuntu:~$ export cpp="WebRoot/"
rjf@rjf-ubuntu:~$ sh /root/git-get-pull-files.sh
update dir WebRoot/
update tmp update_tmp/
update key update_lastPull
update model: true
backup update_tmp to update_tmp_bf8d59381bd6c62b4fa05cf1458e9a5f8d170a6f
create update_tmp/
copy files to update_tmp/
update to commit 34ddb49d49cd82767857c3759a0195a34b0c3deb
rjf@rjf-ubuntu:~$ 

执行逻辑

使用git diff获取变化文件
使用awk拼装复制文件的代码片段
使用eval执行拼装好的代码片段

主要代码片段如下：

#lp  表示最近一次pull的commit id
#cpp 表示需要提取变化文件的目录
#upn 表示变化文件存放位置
#td  临时变量存储代码片段
td=`git diff --diff-filter=[ADM] --name-status $lp -- $cpp | awk '
    {
      if ($1 == "D") { 
        { print "echo "$2" >> "uw"delFiles.txt;" }
      } else {
        { print "mkdir -p \`dirname "uw$2"\`;" }
        { print "\\\cp -f "$2" "uw$2";" }
      } 
    }
' uw="${upn}/"`
eval $td

源代码如下：（or 这里）

获取git两次commit变化的文件 was originally published by Ruanjf at 奔霸 on July 15, 2013.

手动编译Chromium OS系统

2013-05-26T21:34:00+08:00

鉴于Google提供的文档存在很多坑，Google向来简约但是文档也简这就不应该了，其实还提供了一份完整的文档巨长无比。因此有了这篇文章主要目的让大家看完后也可以编译Chromium OS

前提条件

Ubuntu Linux 12.04 版本切记实用
64的系统（为了编译可以快点）这里提供下载
一个可以使用sudo的账户

下载源码

安装必要的软件

 rjf@rjf-ubuntu:~$sudo apt-get install aptitude
 rjf@rjf-ubuntu:~$sudo aptitude install git-core gitk git-gui subversion curl

安装depot_tools到你想要的目录（第一个坑，git提供的https访问不了不知为啥现改为http）

 rjf@rjf-ubuntu:~/chromiumos$git clone http://chromium.googlesource.com/chromium/tools/depot_tools.git
 rjf@rjf-ubuntu:~$vi ~/.bashrc

配置环境

 rjf@rjf-ubuntu:~$vi ~/.bashrc

在其最后添加如下内容到.bashrc

 # depot_tools安装目录
 export PATH="$PATH":/usr/local/depot_tools
 # chromiumos存放目录，最好预留30G以上
 export SOURCE_REPO=${HOME}/chromiumos
 # 后两个选添一个即可想编译32位选择x86-generic、64选择amd64-generic
 export BOARD=x86-generic
 export BOARD=amd64-generic

内容添加完后记得关闭当前shell并打开新的shell进行下面的操作，不然配置不会生效

下载源码这里需要等上较长时间本来话了两个小时，没事可以看片去了

 rjf@rjf-ubuntu:~$cd ${SOURCE_REPO}
 rjf@rjf-ubuntu:~/chromiumos$repo init -u https://git.chromium.org/chromiumos/manifest.git
 rjf@rjf-ubuntu:~/chromiumos$repo sync

编译源码

配置编译环境

rjf@rjf-ubuntu:~/chromiumos$cros_sdk -- ./setup_board --board=${BOARD}

编译包

rjf@rjf-ubuntu:~/chromiumos$cros_sdk -- ./build_packages --board=${BOARD}

编译映像，存放于${SOURCE_REPO}/src/build/images/${BOARD}/latest/chromiumos_image.bin

rjf@rjf-ubuntu:~/chromiumos$cros_sdk -- ./build_image --board=${BOARD}

生成VMware文件与映像存放在同一目录下，对于用虚拟机打开时无网络可在xxx.vmx文件中添加ethernet0.virtualDev = "e1000"。当然也可以选择其他的

rjf@rjf-ubuntu:~/chromiumos$cros_sdk -- ./image_to_vm.sh --board=${BOARD} --format=vmware

生成U盘映像

rjf@rjf-ubuntu:~/chromiumos$cros_sdk -- ./image_to_usb.sh --board=${BOARD}

关键命令整理

sudo apt-get install aptitude
sudo aptitude install git-core gitk git-gui subversion curl
git clone http://chromium.googlesource.com/chromium/tools/depot_tools.git
export PATH="$PATH":/usr/local/depot_tools
export SOURCE_REPO=${HOME}/chromiumos
export BOARD=x86-generic
export BOARD=amd64-generic
cd ${SOURCE_REPO}
repo init -u https://git.chromium.org/chromiumos/manifest.git
repo sync
cros_sdk -- ./setup_board --board=${BOARD}
cros_sdk -- ./build_packages --board=${BOARD}
cros_sdk -- ./build_image --board=${BOARD}
cros_sdk -- ./image_to_vm.sh --board=${BOARD} --format=vmware
cros_sdk -- ./image_to_usb.sh --board=${BOARD}

手动编译Chromium OS系统 was originally published by Ruanjf at 奔霸 on May 26, 2013.

使用YUIDoc生成CoffeeScript的API文档

2013-05-26T20:29:00+08:00

前提环境

生成api文档的程序是基于nodejs编写的，因此需安装nodejs参看这里

安装

npm -g install yuidocjs

使用

/**
* This is the description for my class.
*
* @class MyClass
* @constructor
*/

上面注释为yuidoc提供的文档格式，下面为coffeescript的文档格式。按照下面的格式即可使用yuidoc生产帮助文档

###*
# This is the description for my class.
#
# @class MyClass
# @constructor
###

生成

# 先进入coffeescript源码所在的文件夹
yuidoc --syntaxtype coffee -e .coffee .

生成的文档类似于yuidoc api

使用YUIDoc生成CoffeeScript的API文档 was originally published by Ruanjf at 奔霸 on May 26, 2013.

nodejs与npm安装

2013-05-12T20:12:00+08:00

Mac OS X环境

OSX下使用nvm来管理nodejs的版本所有这里就介绍nvm的安装和使用配置，以及我个人附加的修改

下载

在OSX环境下很方便不需要手动去网站下载软件这步就免了。通过brew进行下载安装，顺便说下这货类似于Linux下的apt-get、yum实在方便，忍不住要吐槽Windows不带这样的。

安装

打开终端执行下面的命令，注意#井号后面的是注释不要连带复制了。

brew install nvm # 安装nvm
source $(brew --prefix nvm)/nvm.sh # 初始化配置
nvm install 0.11 # 安装nodejs的0.11.x版本
nvm use 0.11 # 启用0.11.x版本
npm config set prefix "$NVM_DIR/`nvm current`" # 设置nodejs的安装路径
npm config get prefix # 查看显示的路径是否为你需要安装的nodejs，通常是不会错啦

配置

在shell环境配置中添加下面配置，注本人用的zsh对应的文件为.zshrc,如果用的是bash的话对应的文件就是.bashrc。打开.zshrc在末尾添加如下内容

# 这个是设置了一个别名方便在shell中使用nvm。官方的配置是直接在启动shell的时候执行source，这样导致启动的时候都得执行这个不太有用的命令。本人做的修改是在必要的时候去执行snvm来启用nvm
alias snvm="source $(brew --prefix nvm)/nvm.sh"

# 设置默认的nodejs安装路径
export NODE_HOME="/usr/local/opt/nvm/v0.11.14"
# 帮助文档
export MANPATH="${NODE_HOME}/share/man:$MANPATH"
# 添加到可执行环境变量中
export PATH="$NODE_HOME/bin:$PATH"
＃ 设置别名用于切换nodejs版本后，修改npm中记录的nodejs安装路径
alias snpmp="npm config set prefix $NODE_HOME && npm config get prefix"

#export PATH="${NODE_HOME}/bin:$NODE_HOME/lib/node_modules/npm/bin/node-gyp-bin:$PATH"

测试

rjf-mba:~ $ node -v          
v0.11.13
rjf-mba:~ $ npm -v
1.4.9
rjf-mba:~ $ 

安装后进行测试有出现对应的版本说明nodejs安装成功了可以正常使用啦

Windows环境

下载

nodejs 快捷地址v0.10.5 32-bit、v0.10.5 64-bit

这里提供的是单一exe的版本，当然也可以下载安装版本的
npm 快捷地址npm-1.2.9

npm当然要自己动手下载，用npm install npm是有问题的这时npm命令还不可用

安装

拷贝下载的node.exe到你想安装的地方

建议新建一个node文件夹，然后把node.exe复制到该文件夹
解压npm-xxx.zip的内容到node.exe所在的文件夹

配置

新建NODE_HOME

在环境变量中添加NODE_HOME=C:\Program Files\node其中C:\Program Files\node为node.exe所在的路径
新建NODE_PATH

在环境变量中添加NODE_PATH=%NODE_HOME%\node_modules
添加Path的值

在环境变量Path值得末尾中添加;%NODE_HOME%;

测试

进入cmd命令行

Microsoft Windows [版本 6.2.9200]
(c) 2012 Microsoft Corporation。保留所有权利。

C:\Users\rjf>node -v
v0.10.5

C:\Users\rjf>npm -v
1.2.19

C:\Users\rjf>

如出现v0.10.5则表明nodejs安装成功了。如出现1.2.19则说明npm安装成功了，这时候就可以使用npm install xxx或者npm install -g xxx来安装其他包了

Linux环境

Soon…

nodejs与npm安装 was originally published by Ruanjf at 奔霸 on May 12, 2013.

CoffeeScript 常用语法介绍

2013-05-05T20:45:00+08:00

本篇文章假定大家对CoffeeScript有一点的了解或者Python、Ruby也行

同步查看编译结果

前提已安装nodejs和npm模块

npm install -g coffee-script
rem 该命令会在当前目录生成experimental.js
coffee --watch --compile experimental.coffee

注释添加

# A comment

##
  A multiline comment, perhaps a LICENSE.
###

变量定义

myVariable = "test"

# 对象定义
object2 = one: 1
object2 = one: 1, two: 2
# 多行可不加逗号
object2 = 
  one: 1
  two: 2

# 数组定义
array1 = [1, 2, 3]
# 多行可不加逗号
array1 = [
  1
  2
  3
]

# 定义值为1到5的数组
range = [1..5]
#  编译后的javascript代码为：
# var range;
# range = [1, 2, 3, 4, 5];

# 重新赋值最后三个
range[2..4] = [-2, -3, -4]
my = "my string"[0..2]

firstTwo = ["one", "two", "three"][0..1]
# 编译后的javascript代码为：
# var firstTwo;
# firstTwo = ["one", "two", "three"].slice(0, 2);

# 全局变量定义
# without browsers
exports = @
exports.MyVariable = "foo-bar"

# window in browsers
window.MyVariable = "foo-bar"

别名和存在的操作

@saviour = true
# @代替this. 编译后的javascript代码为：
# this.saviour = true;

User::first = -> @records[0]
# ::代替.prototype. 编译后的javascript代码为：
#User.prototype.first = function() {
#  return this.records[0];
#};

praise if brian?
# 编译后的javascript代码为：
# if (typeof brian !== "undefined" && brian !== null) {
#  praise;
#}

# 注意不带问号的区别
praise if brian
# 编译后的javascript代码为：
# if (brian) {
#  praise;
#}
praise = brian ? "none"
# 不存在赋值"none" 编译后的javascript代码为：
# praise = typeof brian !== "undefined" && brian !== null ? brian : "none";

blackKnight.getLegs()?.kick()
# 如果blackKnight.getLegs()返回值存在则调用kick方法 编译后的javascript代码为：
# var _ref;
# if ((_ref = blackKnight.getLegs()) != null) {
#  _ref.kick();
#}

blackKnight.getLegs().kick?()
# 如果blackKnight.getLegs()返回值存在且是一个方法则调用kick方法 编译后的javascript代码为：
# var _base;
# if (typeof (_base = blackKnight.getLegs()).kick === "function") {
#   _base.kick();
# }

方法定义

# 单行
func = -> "bar"
# 多行
func = ->
  # An extra line
  "bar"
# 编译后的javascript代码为：
#  func = function() {
#    return "bar";
#  };

# 带参数
times = (a, b) -> a * b
# 编译后的javascript代码为：
#  times = function(a, b) {
#    return a * b;
#  };

# 参数带默认值
times = (a = 1, b = 2) -> a * b
# 编译后的javascript代码为：
#  times = function(a, b) {
#    if (a == null) {
#      a = 1;
#    }
#    if (b == null) {
#      b = 2;
#    }
#    return a * b;
#  };

# 数组参数支持其中nums为数组，类似java中的Object...
sum = (nums...) -> 
  result = 0
  nums.forEach (n) -> result += n
  result
# 编译后的javascript代码为：
#  sum = function() {
#    var nums, result;
#
#    nums = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
#    result = 0;
#    nums.forEach(function(n) {
#      return result += n;
#    });
#    return result;
#  };

方法调用

a = "Howdy!"

alert a
# 编译后的javascript代码为：
# alert(a)

alert inspect a
# 编译后的javascript代码为：
# alert(inspect(a))

# 匿名函数参数传递
clickHandler => alert "clicked"
# 编译后的javascript代码为：
#  clickHandler(function() {
#    return alert("clicked");
#  });


# 上下文保持一致免去 self=this的代码
@clickHandler = -> alert "clicked"
element.addEventListener "click", (e) => @clickHandler(e)

#建议括号在参数复杂的情况下不要省略

标识替换

favourite_color = "Blue. No, yel..."
# question中的#{favourite_color}将被替换
question = "Bridgekeeper: What... is your favourite color?
            Galahad: #{favourite_color}
            Bridgekeeper: Wrong!
            "

控制语句

对于表达式参考这里

# 单行
if a then alert a
if a then alert a else alert 'none'
alert a if a
# 多行
if a
	alert a
# 判断包含if in 
words = ["rattled", "roudy", "rebbles", "ranks"]
alert "Stop wagging me" if "ranks" in words 

# 循环
alert "Release #{name}" for name in ["Roger", "Roderick", "Brian"]
for name in ["Roger", "Roderick", "Brian"]
  alert "Release #{name}"

# 带序号表达式中i
for name, i in ["Roger the pickpocket", "Roderick the robber"]
  alert "#{i} - Release #{name}"

# 带过滤条件使用关键字when，以"B"开头
namelist = ["Roger", "Roderick", "Brian"]
alert "Release #{name}" for name in namelist when name[0] is "B"

# 注意when和if的区别
alert "Release #{name}" for name in namelist if namelist

# 遍历对象属性使用关键字of，别跟in混了
names = sam: seaborn, donna: moss
alert "#{first} #{last}" for first, last of names
# 编译后的javascript代码为：
#  names = {
#    sam: seaborn,
#    donna: moss
#  };
#  for (first in names) {
#    last = names[first];
#    alert("" + first + " " + last);
#  }

# 以数组的形式返回循环结果
num = 6
list = while num -= 1
  num + " Brave Sir Robin ran away"

详细查看The Little Book on CoffeeScript Syntax 和官方文档

Classes

定于对象

class Animal

# 包含构造函数
class Animal
  constructor: (name) ->
    @name = name

# 自动赋值实例变量name
class Animal
  constructor: (@name) ->

# 包含实例属性
class Animal
  price: 5
  sell: (customer) ->
  	alert "Give me #{@price} shillings!"

# 使用=>确保this一定指向当前实例，即使存在继承
class Animal
  price: 5
  sell: (customer) =>
    alert "Give me #{@price} shillings!"
# 添加静态属性，使用@或者this
class Animal
  @price: 5
  @sell: (customer) ->
  	alert "Give me #{@price} shillings!"

创建实例

animal = new Animal

继承

class Animal
  constructor: (@name) ->

  alive: ->
    false

class Parrot extends Animal
  constructor: ->
    super("Parrot")

  dead: ->
    not @alive()

Mixins、Extending classes这个得理解才好用，大家还是看原文吧

CoffeeScript 常用语法介绍 was originally published by Ruanjf at 奔霸 on May 05, 2013.