用js写一个zookeeper简易web控制台

使用node.js下的zookeeper客户端访问组件库，写一个 web的控制台，非常简单。比起java的ZooInspector，还有其他一些node下的zk的web控制台，有哪些优势？轻量，部署依赖少，可以单机，可以扔在服务器上多用户访问；依赖少，早起一些node下的zk的控制台，使用了node-zookeeper，这是是一个包装c实现库；这里使用了node-zookeeper-client库，这是一个纯js的zk客户端组件库，更为轻量。

使用express搭建web服务

环境安装，库安装略过；
app.js

const express = require('express')
const bodyParser = require('body-parser')
const api = require('./src/api')

const port = 8123

app = express()
app.use(bodyParser.json({limit: '50mb'}))
app.use(express.static('public'))
app.use('/api', api)


app.listen(port, '127.0.0.1', () => console.log(`Server running: http://localhost:${port}`))

访问zk的API

const express = require('express')
const zookeeper = require('node-zookeeper-client')
const Long = require('long')
const router = express.Router()

let zkConnections = {};

router.post('/zk', async (req, res) => {
    switch(req.body.act){
        case 'connect': {
            let client = await zkClient(req.body.address)
            zkListChildren(client, '/', res)
            break
        }
        case 'list': {
            let client = await zkClient(req.body.address)
            zkListChildren(client, req.body.path, res)
            break
        }
        case 'getData': {
            let client = await zkClient(req.body.address)
            zkGetData(client, req.body.path, res)
            break
        }
        case 'addNode': {
            let client = await zkClient(req.body.address)
            zkAddNode(client, req.body.path, res)
            break
        }
        case 'removeNode': {
            let client = await zkClient(req.body.address)
            zkRemoveNode(client, req.body.path, res)
            break
        }
        case 'setData':
            let client = await zkClient(req.body.address)
            zkSetData(client, req.body.path, req.body.data, res)
            break
        default:
            res.send('')
    }
})

async function zkClient(address){
    let client = zkConnections[address]
    if(client){
        let state = client.getState()
        if(state === zookeeper.State.SYNC_CONNECTED){
            return Promise.resolve(client)
         }else{
             client.close()
             delete zkConnections[address]
             return await zkClient(address)
         }
    }else{
        client = zookeeper.createClient(address)
        zkConnections[address] = client
        console.log('new connetion: %s', address)
        client.connect()
        client.on('state', state => {
            console.log(state)
        })
        return new Promise((resolve, reject) => {
            client.once('connected', ()=>{
                resolve(client)
            })
        })
    }
}

function zkGetData(client, path, res) {
    client.getData(path, (err, data, stat) => {
        if(err){
            console.log('%s', err)
        }
        let s = {}
        stat.specification.forEach(i => {
            s[i.name] = i.type === 'long' ? Long.fromBytes(stat[i.name]).toString() : stat[i.name] 
        });
        res.send({data: (data && data.length > 0) ? data.toString('utf8') : '', stat: s})
    })
}

function zkListChildren(client, path, res) {
    client.getChildren(path, (err, children, stat) => {
        if(err){
            console.log('%s', err)
        }
        res.send(children)
    })
}

function zkRemoveNode(client, path, res) {
    client.remove(path, -1, (err)=>{
        if(err){
            console.log('%s', err)
            res.send('fail')
        }else{
            res.send('success')
        }
    })
}

function zkAddNode(client, path, res){
    client.create(path, null, null, zookeeper.CreateMode.PERSISTENT, (err) =>{
        if(err){
            console.log('%s', err)
            res.send('fail')
        }else{
            res.send('success')
        }
    })
}

function zkSetData(client, path, data, res){
    client.setData(path, Buffer.from(data), -1, (error, stat) => {
        if (error) {
            console.log(error.stack);
            res.send('fail')
        }else{
            res.send('success')
        }
    })
}

module.exports = router

使用Vue.js搭建前端

这里vue使用简单的方式，可以参考不使用Webpack的Vue传统前端使用方式（一）。

说说主要的几个点。

使用CDN引入js库

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js" integrity="sha256-ngFW3UnAN0Tnm76mDuu7uUtYEcG3G5H1+zioJw3t+68=" crossorigin="anonymous"></script>

使用了以下前端组件：

• boostrap前端css/html框架
• nanoscroller 滚动条
• vue 前端mvvm框架
• axios http请求库

使用js加载js

这个方法可以实现使用js加载js到html中，而且是同步的；

async function loadjs(src) {
  if(src instanceof Array){
    return Promise.all(src.map(i => loadjs(i)))
  }
  let script = document.createElement('script')
  script.setAttribute('type', 'text/javascript')
  script.src = src;
  document.getElementsByTagName('body')[0].appendChild(script)
  return new Promise(resolve => {
    script.onload = () => {
      return resolve('ok')
    }
  })
}

用法:

await loadjs([
  'js/vue_com.js',
  'js/vue_zk.js'
])

vue实现tree组件

Vue.component('tree', {
  template: `
    <ul v-show="show">
      <li v-for="node in nodes">
        <span :class="[node.leaf ? 'leaf' : (node.show ? 'down-arrow' : 'right-arrow'), 'hand']" @click="loadAndToggleExpand(node)"></span>
        <a href="javascript:;" @click="nodeClick($event, node)">{{node.text}}</a>
        <tree :nodes="node.children" :show="node.show" @nodeClick="childNodeClick" @load="childNodeLoad">
      </li>
    </ul>
  `,
  props: ['nodes', 'show'],
  data(){
    return {}
  },
  methods:{
    loadAndToggleExpand(node){
      if(node.show === null){
        this.$emit('load', node)
      }else{
        node.show = !node.show
      }
    },
    nodeClick(e, node){
      this.$emit('nodeClick', node)
    },
    childNodeClick(node){
      this.$emit('nodeClick', node)
    },
    childNodeLoad(node){
      this.$emit('load', node)
    }
  }
  
});

主界面及操作表单

详细代码不贴了，可以直接访问仓库： https://github.com/ccor/zk-browser

主界面主要是左侧树形目录，右侧的数据显示和操作区；

主要实现了经典的程序员的四门功课：增删改查。一般来说，基本够用了。