tnbapp/src/views/admin/backend/AdminBackendLog.vue

<template>
  <el-container>
    <el-header height="220">
      <el-row style="margin-top: 10px">
        <span>
          <span v-if="wsStatus" style="color: green">WebSocket 已连接</span>
          <span v-if="!wsStatus" style="color: red">WebSocket 未连接</span>
        </span>
        <el-select
          v-model="queryInfo.logType"
          placeholder="选择日志类型"
          style="margin-left: 5px"
          @change="onSelectChange"
        >
          <el-option label="访问日志" value="1" />
          <el-option label="运行日志" value="2" />
        </el-select>
        <el-select
          v-model="queryInfo.logType"
          placeholder="选择应用"
          style="margin-left: 5px"
          @change="onSelectChange"
        >
          <el-option label="content-192.168.0.111" value="1" />
          <el-option label="content-192.168.0.112" value="2" />
        </el-select>
      </el-row>
    </el-header>
    <el-main>
      <div style="height: 60vh;">
        <el-scrollbar ref="myScrollbar" style="width: 100%; height: 100%;">
          <div v-for="(item, index) in dataList" :key="index">
            <el-row>
              <span>{{ item.timestamp }}</span>
              <span>{{ item.message }}</span>
            </el-row>
          </div>
        </el-scrollbar>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'AdminBackendLog',
  data() {
    return {
      queryInfo: {
        logType: '1',
        pn: 1
      },
      dataList: [],
      logFormat: {
        timestamp: null,
        message: ''
      },
      ws: null,
      wsStatus: false,
      reconnectLock: false
    }
  },
  created() {
    this.initWebSocket()
    document.title = 'BackendLog'
    // this.addData()
  },
  methods: {
    onSelectChange() {
      this.$message.info(this.queryInfo.logType)
    },
    addData() {
      const that = this
      setInterval(function() {
        that.dataList.push({
          timestamp: new Date(),
          message: 'abcdefg'
        })

        // 滚动条始终保持在底部
        that.$nextTick(() => {
          that.$refs['myScrollbar'].wrap.scrollTop = that.$refs['myScrollbar'].wrap.scrollHeight
        })
      }, 500)
    },
    initWebSocket() {
      if ('WebSocket' in window) {
        const wsUrl = 'ws://localhost:6007/logws/pull/runtime?app=tnb&host=localhost'
        const wsUrl1 = 'ws://localhost:6007/logws/pull/access?app=tnb&host=localhost'
        this.ws = new WebSocket(wsUrl1)
        const that = this
        this.ws.onopen = function() {
          that.setOnline()
          console.log('websocket connected...')
        }
        this.ws.onclose = function() {
          that.setOffline()
          console.log('websocket connection closed...')
          that.reconnect()
        }
        this.ws.onerror = function() {
          that.setOffline()
          console.log('websocket connection error...')
          that.reconnect()
        }
        this.ws.onmessage = function(evt) {
          const message = JSON.parse(evt.data)
          that.processMessage(message)
        }
      } else {
        // 浏览器不支持 WebSocket
        this.$message.error('您的浏览器不支持 WebSocket!')
      }
    },
    setOnline() {
      this.wsStatus = true
    },
    setOffline() {
      this.wsStatus = false
    },
    sendMessage(message) {
      this.ws.send(message)
    },
    processMessage(message) {
      const requestId = message.requestId
      const requestTime = message.requestTime
      const remoteAddr = message.remoteAddr
      const requestMethod = message.requestMethod
      const requestUrl = message.requestUrl
      const statusCode = message.statusCode
      const executeTime = message.consumeTime
      const targetRoute = message.targetRoute
      const targetService = message.targetService

      this.dataList.push({
        timestamp: requestTime,
        message: requestUrl
      })
    },
    reconnect() {
      if (this.reconnectLock) return

      this.reconnectLock = true
      const that = this
      setTimeout(function() {
        console.log('websocket reconnecting...')
        that.initWebSocket()
        that.reconnectLock = false
      }, 5000)
    }
  }
}
</script>

<style>
/deep/ .el-scrollbar__wrap {
  overflow: scroll;
  height: 100% !important;
  overflow-x: hidden !important;
}
</style>