可以直接进入webviz网站： https://webviz.io/，不过存在网络问题，建议本地构建，然后进行开发使用

安装

1.nvm安装：

#预备工作
sudo apt-get update
sudo apt-get install build-essential libssl-dev

#获取脚本并安装
#方法一
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
#方法二
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

#更换源为淘宝镜像
#方法一（临时）
NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
#方法二（永久）
#在 ~/.bashrc 中添加下列语句
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

2.安装nodejs：建议安装node10和node11，高版本不支持

#查看可安装的node版本
nvm ls-remote
#安装指定版本的node
nvm install 10.19.0
#查看当前的node版本
nvm current
#查看已安装的node版本
nvm list
#选择需要的node版本
nvm use 10.19.0

3.换源

#更换npm源为淘宝的源
npm config set registry https://registry.npm.taobao.org
#检查是否配置成功
npm config get registry

4.本地构建

克隆项目：
git clone https://github.com/cruise-automation/webviz.git
进入项目：
cd webviz/
安装依赖：
#建议先手动安装node-sass
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm install node-sass
#安装项目依赖
npm run bootstrap
#编译项目
npm run build
#运行项目
npm run docs

分析webviz源码

目前只看了\packages@cruise-automation\rpc\src\index.html，源码中调用了ros的topic通信方式，采用了promise做topic的异步操作