tnbapp/src/views/home/MessageStream2.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 }}</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 = 'EventSource'
    // this.init()
  },
  methods: {
    clear() {
      this.dataList = []
    },
    onSubmit() {
      this.$notify({
        message: this.text,
        type: 'info',
        duration: 1000
      })
      this.text = ''
    },
    init() {
      var list = this.dataList
      if (typeof (EventSource) !== 'undefined') {
        const url = process.env.VUE_APP_SERVER_URL + '/times'
        const source = new EventSource(url)
        source.addEventListener('test', function(e) {
          console.log(e)
        })
        source.onmessage = function(event) {
          console.log(event)
          list.push(event.data)
        }
      } else {
        console.log('抱歉，你的浏览器不支持 server-sent 事件...')
      }
    }
  }
}
</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>