src/doc/compile_smartperf.html

<!DOCTYPE html>
<html>
<head>
    <title>compile_smartperf</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <style>
       code[class*="font-"],
        pre[class*="font-"] {
            text-align: left;
            color: #333333;
            background: none;
            word-spacing: normal;
            white-space: pre;
            word-break: normal;
            word-wrap: normal;
            line-height: 1.5;
            -moz-hyphens: none;
            -ms-hyphens: none;
            -o-tab-size: 8;
            tab-size: 8;
            -moz-tab-size: 8;
            -webkit-hyphens: none;
            hyphens: none;
            font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
        }

        pre[class*="font-"] {
            border-radius: 3px;
            background: #F5F5F5;
            padding: 0.8em;
            overflow: auto;
        }

        :not(pre) > code[class*="font-"] {
            white-space: normal;
            background: #F5F5F5;
            padding: 0.2em;
            border-radius: 0.3em;
        }


        .temporary.cdata {
            color: #183690;
        }

        .temporary.comment,
        .temporary.blockquote {
            color: #969897;
        }

        .temporary.doctype,
        .temporary.punctuation,
        .temporary.variable,
        .temporary.macro.property {
            color: #333333;
        }


        .temporary.string,
        .temporary.url,
        .temporary.regex,
        .temporary.attr-value {
            color: #183690;
        }

        .temporary.operator,
        .temporary.important,
        .temporary.keyword,
        .temporary.rule,
        .temporary.builtin {
            color: #a71d5c;
        }

        .temporary.atrule,
        .temporary.constant,
        .temporary.symbol,
        .temporary.command,
        .temporary.property,
        .temporary.number,
        .temporary.boolean,
        .temporary.entity,
        .temporary.code {
            color: #0086b2;
        }

        .temporary.tag,
        .temporary.selector,
        .temporary.prolog {
            color: #63a35e;
        }

        .temporary.entity {
            cursor: help;
        }

        .temporary.title,
        .temporary.title .temporary.punctuation {
            font-weight: bold;
            color: #1d3e89;
        }

        .temporary.list {
            color: #ed6a48;
        }

        .temporary.function,
        .temporary.namespace,
        .temporary.pseudo-element,
        .temporary.class,
        .temporary.class-name,
        .temporary.pseudo-class,
        .temporary.id,
        .temporary.url-reference .temporary.variable,
        .temporary.attr-name {
            color: #795da2;
        }

        .temporary.inserted {
            color: #55a535;
            background-color: #eaffee;
        }

        .temporary.bold {
            font-weight: bold;
        }

        .temporary.deleted {
            color: #bd2c08;
            background-color: #ffecea;
        }

        .font-json .temporary.property {
            color: #183690;
        }

        .temporary.italic {
            font-style: italic;
        }

        .font-markup .temporary.tag .temporary.punctuation {
            color: #333333;
        }

        .font-yaml .temporary.atrule {
            color: #63a35a;
        }

        code.font-css,
        .font-css .temporary.function {
            color: #0086b8;
        }

        code.font-yaml {
            color: #183690;
        }

        .font-ruby .temporary.function {
            color: #333333;
        }

        .font-markdown .temporary.url {
            color: #795da2;
        }

        .font-makefile .temporary.variable {
            color: #183690;
        }

        .font-makefile .temporary.builtin {
            color: #0086b3;
        }

        .font-makefile .temporary.symbol {
            color: #795da2;
        }

        .font-bash .temporary.keyword {
            color: #0086b3;
        }

        pre[data-wire] {
            padding: 1em 0 1em 2em;
            position: relative;
        }

        pre[data-wire] .line-highlight-wrapper {
            background-color: transparent;
            top: 2px;
            left: 2px;
            display: block;
            width: 100%;
            position: absolute;
        }

        pre[data-wire] .line-highlight {
            position: absolute;
            left: 2px;
            right: 2px;
            pointer-events: none;
            margin-top: 3em;
            background: hsla(25, 10%, 55%,.06);
            background: linear-gradient(to right, hsla(25, 10%, 40%,.2) 80%, hsla(23, 24%, 52%,0));
            line-height: inherit;
            white-space: pre;
        }

        pre[data-wire] .line-highlight:before,
        pre[data-wire] .line-highlight[data-end]:after {
            content: attr(data-start);
            position: absolute;
            background-color: hsla(22, 25%, 54%,.5);
            min-width: 2em;
            padding: 0 .6em;
            top: 0.5em;
            left: 0.4em;
            color: hsl(22, 23%, 90%);
            vertical-align: 0.3em;
            border-radius: 10px;
            text-shadow: none;
            box-shadow: 0 2px white;
            font: bold 60%/1.6 sans-serif;
            text-align: center;
        }

        pre[data-wire] .line-highlight[data-end]:after {
            bottom: 0.6em;
            content: attr(data-end);
            top: auto;
        }

       body > :first-child {
           margin-top: 0;
       }

        body {
            font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
            line-height: 1.6;
            color: #333333;
            background-color: #FFFFFF;
            font-size: 16px;
            overflow: initial;
            word-wrap: break-word;
            box-sizing: border-box;
        }

        body h1, body h2, body h3, body h4, body h5{
            line-height: 1.2;
            margin-bottom: 16px;
            margin-top: 1em;
            color: #000000;
        }

        body h1 {
            font-weight: 300;
            font-size: 2.25em;
            padding-bottom: 0.3em
        }

        body h2 {
            font-weight: 400;
            padding-bottom: 0.3em;
            font-size: 1.75em;
        }

        body h3 {
            font-weight: 500;
            font-size: 1.5em;
        }

        body h4 {
            font-weight: 600;
            font-size: 1.25em;
        }

        body h5 {
            font-weight: 600;
            font-size: 1.1em;
        }

       body strong {
           color: #000000;
       }

        body h1, body h2, body h3, body h4, body h5 {
            font-weight: 600;
        }

        body del {
            color: #5c5c5c;
        }

        body a:not([href]) {
            text-decoration: none;
            color: inherit;
        }

        body a {
            text-decoration: none;
            color: #08c;
        }

        body a:hover {
            color: #00a3f5;
            text-decoration: none;
        }

       body > p {
           margin-bottom: 16px;
           margin-top: 0;
           word-wrap: break-word;
       }

        body img {
            max-width: 100%;
        }

        body > ul, body > ol {
            margin-bottom: 16px;
        }

        body ul, body ol {
            padding-left: 2em;
        }

        body ul ul, body ul ol, body ol ol, body ol ul {
            margin-top: 0;
            margin-bottom: 0;
        }

       body ul.no-list, body ol.no-list {
           padding: 0;
           list-style-type: none;
       }

       body li.task-list-item {
           list-style: none;
       }

        body li {
            margin-bottom: 0;
        }

       body .task-list-item-checkbox {
           vertical-align: middle;
           margin: 0 .2em .25em -1.8em;
       }

        body li > p {
            margin-bottom: 0;
            margin-top: 0;
        }

        body .task-list-item-checkbox:hover {
            cursor: pointer;
        }

        body blockquote {
            color: #5c5c5c;
            margin: 16px 0 0 0;
            font-size: inherit;
            padding: 0 15px;
            background-color: #f0f0f0;
            border-left: 4px solid #d6d6d6;
        }

        body blockquote > :first-child {
            margin-top: 0;
        }

        body blockquote > :last-child {
            margin-bottom: 0;
        }

        body hr {
            margin: 32px 0 0 0;
            height: 4px;
            border: 0 none;
            background-color: #d6d6d6;
        }

        body table {
            display: block;
            width: 100%;
            margin: 10px 0 15px 0;
            border-collapse: collapse;
            border-spacing: 0;
            word-break: normal;
            overflow: auto;
            word-break: keep-all;
        }

        body table th {
            font-weight: bold;
            color: #000000;
        }

        body table td, body table th {
            padding: 6px 13px 0 0;
            border: 1px solid #d6d6d6;
        }

        body dl {
            padding: 0;
        }

       body dl dd {
           padding: 0 16px 0 0;
           margin-bottom: 16px;
       }

        body dl dt {
            margin-top: 16px;
            font-size: 1em;
            padding: 0;
            font-style: italic;
            font-weight: bold;
        }

        body code {
            color: #000000;
            font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
            font-size: .85em !important;
            background-color: #f0f0f0;
            padding: 0.2em 0 0 0;
            border-radius: 3px;
        }

        body code::before, body code::after {
            content: "\00a0";
            letter-spacing: -0.2em;
        }

        body pre > code {
            font-size: .85em !important;
            padding: 0;
            margin: 0;
            background: transparent;
            word-break: normal;
            white-space: pre;
            border: 0;
        }

        body .highlight {
            margin-bottom: 16px;
        }

        body .highlight pre, body pre {
            border: #d6d6d6;
            font-size: 0.85em !important;
            line-height: 1.45;
            border-radius: 3px;
            padding: 1em;
            overflow: auto;
        }

        body .highlight pre {
            word-break: normal;
            margin-bottom: 0;
        }

        body pre code, body pre tt {
            background-color: transparent;
            padding: 0;
            margin: 0;
            display: inline;
            max-width: initial;
            overflow: initial;
            line-height: inherit;
            word-wrap: normal;
            border: 0;
        }

        body pre code:before, body pre tt:before, body pre code:after, body pre tt:after {
            content: normal;
        }

        body p, body blockquote, body ul, body ol, body dl, body pre {
            margin-top: 0;
            margin-bottom: 16px;
        }

        body kbd {
            border: 1px solid #d6d6d6;
            border-bottom: 2px solid #c7c7c7;
            padding: 2px 4px;
            background-color: #f0f0f0;
            border-radius: 3px;
            color: #000000;
        }

        @media print {
            body {
                background-color: #FFFFFF;
            }

            body h1, body h2, body h3, body h4, body h5{
                page-break-after: avoid;
                color: #000000;
            }

            body blockquote {
                color: #5c5c5c;
            }

            body pre {
                page-break-inside: avoid;
            }

            body table {
                display: table;
            }

            body img {
                display: block;
                max-width: 100%;
                max-height: 100%;
            }

            body pre, body code {
                white-space: pre;
                word-wrap: break-word;
            }
        }

        .md-preview {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

        .md-preview, .md-preview {
            page-break-before: always;
        }

        .md-preview pre.figure-numbers {
            position: relative;
            padding-left: 3.8em;
            counter-reset: linenumber;
        }

        .md-preview pre.figure-numbers > code {
            position: relative;
        }

        .md-preview pre.figure-numbers .figure-numbers-rows {
            top: 1em;
            font-size: 100%;
            left: 0;
            width: 3em;
            position: absolute;
            pointer-events: none;
            letter-spacing: -1px;
            border-right: 1px solid #999;
            -webkit-user-select: none;
            user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

       .md-preview pre.figure-numbers .figure-numbers-rows > span:before {
           content: counter(linenumber);
           color: #999999;
           display: block;
           text-align: right;
           padding-right: 0.8em;
       }

        .md-preview pre.figure-numbers .figure-numbers-rows > span {
            display: block;
            pointer-events: none;
            counter-increment: linenumber;
        }

        .md-preview:not([for="preview"]) .code-block .btn-group {
            display: none;
        }

        .md-preview:not([for="preview"]) .code-block .status {
            display: none;
        }

        .md-preview:not([for="preview"]) .code-block .output-div {
            margin-bottom: 16px;
        }

        .scrollbar-type::-webkit-scrollbar {
            width: 8px;
        }

        .scrollbar-type::-webkit-scrollbar-track {
            background-color: transparent;
            border-radius: 10px;
        }

        .scrollbar-type::-webkit-scrollbar-thumb {
            border-radius: 5px;
            border: 4px solid rgba(150, 150, 150, 0.66);
            background-clip: content-box;
            background-color: rgba(150, 150, 150, 0.66);
        }

        body[for="native-export"]:not([data-display-mode]) {
            position: relative;
            top: 0;
            left: 0;
            margin: 0;
            padding: 0;
            overflow: auto;
            width: 100%;
            height: 100%;
        }

        body[for="native-export"]:not([data-display-mode]) .md-preview {
            position: relative;
            top: 0;
        }


       @media screen and (max-width: 450px) {
           body[for="native-export"]:not([data-display-mode]) .md-preview {
               font-size: 14px !important;
               padding: 1em;
           }
       }

       @media print {
           body[for="native-export"]:not([data-display-mode]) #sidebarButton {
               display: none;
           }
       }

        @media screen and (min-width: 914px) {
            body[for="native-export"]:not([data-display-mode]) .md-preview {
                padding: 2em calc(50% - 457px + 2em);
            }
        }

        @media screen and (max-width: 914px) {
            body[for="native-export"]:not([data-display-mode]) .md-preview {
                padding: 2em;
            }
        }

        body[for="native-export"]:not([data-display-mode]) #sidebarButton {
            position: fixed;
            bottom: 8px;
            left: 8px;
            font-size: 28px;
            cursor: pointer;
            color: inherit;
            text-align: center;
            opacity: 0.4;
            z-index: 99;
            width: 32px;
        }

        body[for="native-export"]:not([data-display-mode])[sidebarToc] #sidebarButton {
            opacity: 1;
        }

        body[for="native-export"]:not([data-display-mode])[sidebarToc] .md-sidebar-toc {
            position: fixed;
            top: 0;
            left: 0;
            padding: 32px 0 48px 0;
            width: 300px;
            height: 100%;
            font-size: 14px;
            box-shadow: 0 0 4px rgba(150, 150, 150, 0.33);
            box-sizing: border-box;
            overflow: auto;
            background-color: inherit;
        }

        body[for="native-export"]:not([data-display-mode])[sidebarToc] .md-sidebar-toc::-webkit-scrollbar {
            width: 8px;
        }

        body[for="native-export"]:not([data-display-mode])[sidebarToc] .md-sidebar-toc::-webkit-scrollbar-track {
            background-color: transparent;
            border-radius: 10px;
        }

        body[for="native-export"]:not([data-display-mode])[sidebarToc] .md-sidebar-toc::-webkit-scrollbar-thumb {
            background-color: rgba(150, 150, 150, 0.66);
            border-radius: 5px;
            border: 4px solid rgba(150, 150, 150, 0.66);
            background-clip: content-box;
        }

        body[for="native-export"]:not([data-display-mode])[sidebarToc] .md-sidebar-toc a {
            text-decoration: none;
        }

       body[for="native-export"]:not([data-display-mode])[sidebarToc] .md-sidebar-toc li {
           margin-bottom: 0.8em;
       }

        body[for="native-export"]:not([data-display-mode])[sidebarToc] .md-sidebar-toc ul {
            margin-top: 0.8em;
            padding: 0 1.6em 0 0;
        }

        body[for="native-export"]:not([data-display-mode])[sidebarToc] .md-sidebar-toc ul {
            list-style-type: none;
        }

        body[for="native-export"]:not([data-display-mode])[sidebarToc] .md-preview {
            padding: 2em calc(50% - 457px - 150px);
            margin: 0;
            box-sizing: border-box;
            left: 300px;
            width: calc(100% - 300px);
        }

        @media screen and (max-width: 450px) {
            body[for="native-export"]:not([data-display-mode])[sidebarToc] .md-preview {
                width: 100%;
            }
        }

       @media screen and (max-width: 1274px) {
           body[for="native-export"]:not([data-display-mode])[sidebarToc] .md-preview {
               padding: 2em;
           }
       }

        body[for="native-export"]:not([data-display-mode]):not([sidebarToc]) .md-preview {
            transform: translateX(-50%);
            left: 50%;
        }

        body[for="native-export"]:not([data-display-mode]):not([sidebarToc]) .md-sidebar-toc {
            display: none;
        }
    </style>
</head>
<body for="native-export" id="body">
<div class="mume md-preview  ">
    <h1 class="mume-header fontColor" >SmartPerf 编译指导</h1>

    <h2 class="mume-header fontColor">1. 编译环境搭建:</h2>

    <pre class="font-text fontColor light">  注意:在linux编译环境安装时以root或者其他 sudo 用户身份运行下面的命令
</pre>
    <h3 class="mume-header fontColor" >1.1 node 环境安装:</h3>

    <h5 class="mume-header fontColor">
        1.1.1 下载Node js安装包(windows推荐, linux跳过此步骤)</h5>

    <pre class="font-text fontColor light">       从网站 下载node js安装包 https://nodejs.org/en/download/current/
</pre>
    <h5 class="mume-header fontColor">1.1.2 安装nodejs.</h5>

    <ul class="fontColor">
        <li>ubuntu 20.04 与Debian 11系统中, 直接用apt-get安装,命令如下:</li>
    </ul>
    <pre class="font- light" data-info data-role="codeBlock"><code class="fontColor">  先切换到 root用户下 sudo su
    apt-get update
    apt-get install nodejs npm
</code></pre>
    <ul class="fontColor">
        <li>centos 系统中 使用yum 安装，命令如下：</li>
    </ul>
    <pre class="font- light" data-info data-role="codeBlock"><code class="fontColor">  先切换到 root用户下 sudo su
    sudo yum -y install nodejs npm
</code></pre>
    <ul class="fontColor">
        <li>
            <p>windows系统中, 用安装包一路next即可:</p>
        </li>
        <li>
            <p>安装完成后运行检查是否安装成功:</p>
        </li>
    </ul>
    <pre class="font- light" data-info data-role="codeBlock"><code class="fontColor">  node -v
  npm -v
</code></pre>
    <p class="fontColor">出现版本号就代表安装成功了.</p>
    <h5 class="mume-header fontColor">1.1.3 安装tsc typeScript 编译器</h5>

    <ul class="fontColor">
        <li>直接使用npm 安装运行命令:</li>
    </ul>
    <pre class="font- light" data-info data-role="codeBlock"><code class="fontColor">npm install -g typescript

备注：如果安装失败可以更换npm源,再次尝试.
    tsc -v
</code></pre>
    <h3 class="mume-header fontColor">1.2 go 编译环境安装:
    </h3>

    <ul class="fontColor">
        <li>ubuntu 环境下直接使用apt安装:</li>
    </ul>
    <pre class="font- light" data-info data-role="codeBlock"><code class="fontColor">   apt-get install golang-go
</code></pre>
    <ul class="fontColor">
        <li>centos 系统中 使用yum 安装，命令如下：</li>
    </ul>
    <pre class="font- light" data-info data-role="codeBlock"><code class="fontColor">先切换到 root用户下 sudo su

  sudo yum -y install go
</code></pre>
    <ul class="fontColor">
        <li>
            <p>windows 系统请自行下载安装包并完成安装。</p>
        </li>
        <li>
            <p>安装完成后 命令行运行验证是否安装成功：</p>
        </li>
    </ul>
    <pre class="font- light" data-info data-role="codeBlock"><code class="fontColor">    go version
</code></pre>
    <h2 class="mume-header fontColor" >2.
        项目编译:</h2>

    <h4 class="mume-header fontColor"
       >2.1 先下载sql.js的二进制包,:
    </h4>

    <pre class="font-text light fontColor">	从如下 https://github.com/sql-js/sql.js/releases/download/v1.6.2/sqljs-all.zip 获取到sql.js的二进制包.
	将压缩包解压后, 将文件放置到项目third-party 目录下.
</pre>
    <h4 class="mume-header fontColor"
        >
        2.2 先编译获取trace_streamer 的二进制包:</h4>

    <pre class="font-text light fontColor">参照:smartperf/trace_streamer/compile_trace_streamer.md 编译出wasm 、linux、Windows版本的二进制文件
   将获取到二进制文件放入到项目bin目录下,如果项目目录中无bin目录 先创建bin目录.
   然后将trace_streamer的二进制文件放入bin目录中.
</pre>
    <h4 class="mume-header fontColor"
    >
        2.3 代码编译(依赖于上面node环境 和 go环境)</h4>

    <pre class="font-text fontColor light">        1) 在项目目录安装项目依赖:
            npm install
        2) 在项目目录下运行命令:
            npm run compile
编译成功后会有main 可执行文件生成
</pre>
    <h2 class="mume-header fontColor" >3.
        项目部署:
    </h2>

    <pre class="font-text fontColor light">      1. linux 版本部署需要给trace_stream程序赋予执行权限:
          cd dist/bin 目录下,执行 chmod +x trace_streamer_*

       直接运行 ./main 可执行程序,完成项目的部署;
</pre>
    <h2 class="fontColor">4. 访问项目:</h2>
    <pre class="font-text fontColor light">     在浏览器上打开 https://[部署机器ip地址]:9000/application/
   !!! 注意一定是https.

   备注：如果未出现如图所示网页.而是显示 无法访问此网站
        可以在window cmd 里执行telnet [部署机器ip地址] 9000
        如果显示端口连接失败 可能是防火墙未对9000 端口放开即可
</pre>

</div>
<script type="text/javascript">
    window.onload = (() => {
        let isDark = window.location.search;
        if (isDark.indexOf("?") != -1) {
            isDark = isDark.substr(1, isDark.length - 1);
        }
        if (isDark == 'true') {
            document.getElementById("body").setAttribute('style', 'background-color:#272C34;')
            let header = document.getElementsByClassName('fontColor')
            for (let i = 0; i < header.length; i++) {
                header[i].style.color = '#fff';
            }
            let lightBackGround = document.getElementsByClassName('light')
            for (let i = 0; i < lightBackGround.length; i++) {
                lightBackGround[i].style.backgroundColor = '#32373F'
            }
        }
    })
</script>
</body>
</html>