tnbapp/src/views/home/MessageStream.vue

<template>
  <el-row class="movie-list">
    <el-col :md="18">
      <div class="movie-list" style="height: 70vh;">
        <!-- 注意需要给 el-scrollbar 设置高度，判断是否滚动是看它的height判断的 -->
        <el-scrollbar style="width: 100%; height: 100%;">
          <el-row class="movie-list">
            <div
              v-for="(item, index) in dataList"
              :key="index"
              :md="6"
              :sm="12"
              :xs="12"
            >
              <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
                <el-card class="box-card">
                  <el-row>
                    <el-col :md="20">
                      <el-row>
                        <div style="padding: 14px">
                          <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.content }}</span>
                        </div>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-card>
              </el-row>
            </div>
          </el-row>
        </el-scrollbar>
      </div>
    </el-col>
    <el-col :md="6">
      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-col>
          <el-button
            size="mini"
            type="danger"
            class="el-icon-delete"
            @click="clear"
          >清空</el-button>
        </el-col>
      </el-row>
      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <el-input
            v-model="text"
            type="textarea"
            :rows="3"
            placeholder="有什么新鲜事想分享给大家?"
          />
          <el-row style="text-align: right">
            <el-button
              size="mini"
              type="submit"
              class="el-icon-message"
              @click="onSubmit"
            >发送</el-button>
          </el-row>
        </el-card>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'MessageStream',
  filters: {
    ellipsis(value) {
      if (!value) return ''
      const max = 50
      if (value.length > max) {
        return value.slice(0, max) + '...'
      }
      return value
    }
  },
  data() {
    return {
      dataList: [],
      text: '',
      websocket: null
    }
  },
  created() {
    document.title = 'MessageStream'
    this.initWebSocket()
  },
  methods: {
    clear() {
      this.dataList = []
    },
    onSubmit() {
      this.$notify({
        message: this.text,
        type: 'info',
        duration: 1000
      })
      this.text = ''
    },
    initWebSocket: function() {
      var url = 'wss:' + process.env.VUE_APP_SERVER_URL + '/ws/log?token=1234567890'
      this.websock = new WebSocket(url)
      this.websock.onopen = this.websocketOnopen
      this.websock.onerror = this.websocketOnerror
      this.websock.onmessage = this.websocketOnmessage
      this.websock.onclose = this.websocketOnclose
    },
    websocketOnopen: function() {
      console.log('WebSocket连接成功')
      // 心跳检测重置
      // this.heartCheck.reset().start();
    },
    websocketOnerror: function(e) {
      console.log('WebSocket连接发生错误')
      this.reconnect()
    },
    websocketOnmessage: function(e) {
      const evtData = JSON.parse(e.data)
      const payload = evtData.payload
      this.dataList.push(payload)
    },
    websocketOnclose: function(e) {
      console.log('connection closed (' + e.code + ')')
      this.reconnect()
    },
    websocketSend(text) { // 数据发送
      try {
        this.websock.send(text)
      } catch (err) {
        console.log('send failed (' + err.code + ')')
      }
    },
    reconnect() {
      const that = this
      if (that.lockReconnect) return
      that.lockReconnect = true
      // 没连接上会一直重连，设置延迟避免请求过多
      setTimeout(function() {
        console.info('尝试重连...')
        that.initWebSocket()
        that.lockReconnect = false
      }, 5000)
    }
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px) {
  .movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
}

.movie-list {
  padding-top: 15px;
  padding-left: 6%;
  padding-right: 6%;
}
</style>