添加 MessageStream2.vue 作为 EventSource demo

src/router/index.js

@@ -18,7 +18,7 @@ const ImageIndex = () => import('views/home/Image')
 const ImagePage = () => import('views/home/ImagePage')
 const ArticleIndex = () => import('views/home/Article')
 const ArticlePage = () => import('views/home/ArticlePage')
-const MessageStream = () => import('views/home/MessageStream1')
+const MessageStream = () => import('views/home/MessageStream2')
 const Search = () => import('views/home/Search')
 const DiscoverIndex = () => import('views/home/Discover')
 const BdMap = () => import('views/home/BdMap')

src/views/home/MessageStream1.vue

@@ -82,7 +82,7 @@ export default {
     }
   },
   created() {
-    document.title = 'CommentStream'
+    document.title = 'WebSocket'
     this.initWebSocket()
   },
   methods: {

src/views/home/MessageStream2.vue

@@ -0,0 +1,136 @@
+<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 source = new EventSource('https://reghao.cn/times')
+        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>