update websocket

src/router/index.js

@@ -14,6 +14,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 ArticleStream = () => import('views/home/ArticleStream')
 const Search = () => import('views/home/Search')
 const UserHome = () => import('views/user/Home')
 const UserVideo = () => import('views/user/Home')
@@ -156,6 +157,11 @@ const routes = [
     name: 'ArticleIndex',
     component: ArticleIndex
   },
+  {
+    path: '/stream',
+    name: 'ArticleStream',
+    component: ArticleStream
+  },
   {
     path: '/article/:articleId',
     name: 'ArticlePage',

src/utils/ws/socket-instance.js

@@ -19,10 +19,12 @@ class SocketInstance {
     this.socket = new WsSocket(
       () => {
         const token = '1234567890'
-        if (token === null || token === '') {
+        if (token === '') {
           return null
         } else {
-          return 'wss://api.reghao.cn/ws/progress?token=' + token
+          var url = 'wss://api.reghao.cn/ws/progress?token=' + token
+          url = 'wss://api.reghao.cn/ws/log?token=' + token
+          return url
         }
       },
       {
@@ -56,26 +58,29 @@ class SocketInstance {
   registerEvents() {
     this.socket.on('heartbeat', data => {})
 
-    this.socket.on('censorVideo', data => {
-      console.log('----------')
-      console.log(data)
-      Notification({
-        title: '友情提示',
-        message: data,
-        type: 'warning',
-        duration: 3000
-      })
+    this.socket.on('event_error', data => {
     })
 
-    this.socket.on('event_error', data => {
+    this.socket.on('event_content', (payload, data) => {
+      /* const title = payload.title
+      const content = payload.content
+      this.sendNotification(title, content)*/
       Notification({
-        title: '友情提示',
-        message: data.message,
-        type: 'warning'
+        title: payload.title,
+        message: payload.content.substring(0, 30),
+        type: 'warning',
+        duration: 5000
       })
     })
   }
 
+  /* sendNotification(title, content) {
+    new Notification(title, {
+      body: content,
+      icon: 'https://pic1.zhuanstatic.com/zhuanzh/50b6ffe4-c7e3-4317-bc59-b2ec4931f325.png'
+    })
+  }*/
+
   /**
    * 聊天发送数据
    *

src/utils/ws/ws-socket.js

@@ -100,7 +100,6 @@ class WsSocket {
 
     this.config.reconnect.setTimeout = setTimeout(() => {
       this.connection()
-
       console.log(`网络连接已断开，正在尝试重新连接...`)
     }, this.config.reconnect.time)
   }
@@ -112,7 +111,6 @@ class WsSocket {
    */
   onParse(evt) {
     const { event, payload } = JSON.parse(evt.data)
-
     return {
       event: event,
       payload: payload,
@@ -127,9 +125,7 @@ class WsSocket {
    */
   onOpen(evt) {
     this.lastTime = new Date().getTime()
-
     this.events.onOpen(evt)
-
     this.ping()
   }
 
@@ -140,11 +136,8 @@ class WsSocket {
    */
   onClose(evt) {
     this.events.onClose(evt)
-
     this.connect.close()
-
     this.connect = null
-
     evt.code === 1006 && this.reconnect()
   }
 
@@ -167,10 +160,7 @@ class WsSocket {
    */
   onMessage(evt) {
     this.lastTime = new Date().getTime()
-    const payload = evt.data
-    console.log(payload)
     const result = this.onParse(evt)
-
     // 判断消息事件是否被绑定
     // eslint-disable-next-line no-prototype-builtins
     if (this.onCallBacks.hasOwnProperty(result.event)) {

src/views/home/ArticleStream.vue

@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <el-row v-if="totalSize !== 0" class="movie-list">
+      <el-col :md="12">
+        <div v-for="(item, index) in dataList" :key="index" class="infinite-list-wrapper" style="overflow:auto" :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.excerpt }}</span>
+                    </div>
+                  </el-row>
+                </el-col>
+              </el-row>
+            </el-card>
+          </el-row>
+        </div>
+      </el-col>
+      <el-col :md="12">
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <el-row>
+                <span>热门文章</span>
+              </el-row>
+            </div>
+            <div class="text item">
+              <el-row />
+            </div>
+          </el-card>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row v-else class="not-result">
+      <el-col :span="12" :offset="6">
+        <img src="@/assets/img/icon/not-result.png">
+        <div>没有文章数据</div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getArticles } from '@/api/article'
+import SocketInstance from '@/utils/ws/socket-instance'
+
+export default {
+  name: 'ArticleStream',
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 50
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
+  components: {},
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 12,
+      totalSize: 0,
+      dataList: []
+    }
+  },
+  created() {
+    document.title = '文章主页'
+
+    this.getArticlesWrapper(this.currentPage)
+    SocketInstance.connect()
+    /* if (window.Notification.permission === 'granted') {
+      this.sendNotification()
+    } else if (window.Notification.permission !== 'denied') {
+      window.Notification.requestPermission(function(permission) {
+        this.sendNotification()
+      })
+    }*/
+  },
+  mounted() {
+    // 当窗口宽度改变时获取屏幕宽度
+    window.onresize = () => {
+      return () => {
+        window.screenWidth = document.body.clientWidth
+        this.screenWidth = window.screenWidth
+      }
+    }
+  },
+  methods: {
+    sendNotification() {
+      new Notification('通知标题：', {
+        body: '通知内容',
+        icon: 'https://pic1.zhuanstatic.com/zhuanzh/50b6ffe4-c7e3-4317-bc59-b2ec4931f325.png'
+      })
+    },
+    handleCurrentChange(currentPage) {
+      this.currentPage = currentPage
+      this.getArticlesWrapper(this.currentPage)
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getArticlesWrapper(page) {
+      getArticles(page).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          this.dataList = respData.list
+          this.totalSize = respData.totalSize
+        }
+      })
+    },
+    refresh() {
+      this.$notify({
+        message: '接口未实现',
+        type: 'info',
+        duration: 3000
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+
+.coverImg {
+  width: 100%;
+  height: 120px;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.not-result {
+  padding-top: 100px;
+  padding-bottom: 100px;
+  text-align: center;
+}
+
+</style>

src/views/home/Image.vue

@@ -5,14 +5,10 @@
       <!--电影列表-->
       <el-col :md="24">
         <div>
-          <el-col
-            v-for="(image, index) in dataList"
-            :key="image.thumbnailUrl"
-            :md="6"
-            :sm="12"
-            :xs="12"
-            style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px"
-          >
+          <el-col v-for="(image, index) in dataList"
+                  :key="image.thumbnailUrl"
+                  :md="6" :sm="12" :xs="12"
+                  style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
             <el-card :body-style="{ padding: '0px' }" class="card">
               <div class="imgs">
                 <el-image
@@ -20,13 +16,13 @@
                   fit="cover"
                   class="coverImg"
                   :src="image.thumbnailUrl"
-                  @click="showImages(index)"
-                />
+                  @click="showImages(index)">
+                </el-image>
               </div>
               <div style="padding: 14px;">
                 <span style="position: relative; bottom: 0; left: 0%; color:green">
-                  <i v-if="image.collected" class="el-icon-star-on" @click="collectItem(image)" />
-                  <i v-else class="el-icon-star-off" @click="collectItem(image)" />
+                  <i v-if="image.collected" class='el-icon-star-on' @click="collectItem(image)"/>
+                  <i v-else class='el-icon-star-off' @click="collectItem(image)"/>
                 </span>
                 <span style="position: relative; bottom: 0; left: 0; color:blue">
                   来自相册:
@@ -48,13 +44,13 @@
         -->
         <el-col :span="24" class="pagination">
           <el-pagination
-            background
-            :small="screenWidth <= 768"
-            layout="prev, pager, next"
-            :page-size="pageSize"
-            :current-page="currentPage"
-            :total="totalSize"
-            @current-change="handleCurrentChange"
+              background
+              :small="screenWidth <= 768"
+              layout="prev, pager, next"
+              :page-size="pageSize"
+              :current-page="currentPage"
+              :total="totalSize"
+              @current-change="handleCurrentChange"
           />
         </el-col>
       </el-col>
@@ -69,8 +65,8 @@
 </template>
 
 <script>
-import { getImages } from '@/api/image'
-import { collectItem } from '@/api/collect'
+import {getImages} from '@/api/image'
+import {collectItem} from "@/api/collect";
 
 export default {
   name: 'Image',
@@ -90,9 +86,9 @@ export default {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
-      pageSize: 12,
+      pageSize: 24,
       totalSize: 0,
-      dataList: []
+      dataList: [],
     }
   },
   created() {

src/views/home/Index.vue

@@ -1,13 +1,10 @@
 <template>
   <div>
     <!--电影列表，与推荐列表-->
-    <el-row
-      v-if="dataList.length !== 0"
-      id="movie-list"
-      v-infinite-scroll="load"
-      infinite-scroll-disabled="loading"
-      infinite-scroll-distance="10"
-    >
+    <el-row v-if="dataList.length !== 0" id="movie-list"
+            v-infinite-scroll="load"
+            infinite-scroll-disabled="loading"
+            infinite-scroll-distance="10">
       <!--电影列表-->
       <el-col :md="24">
         <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
@@ -38,7 +35,7 @@ export default {
       nextId: '1',
       dataList: [],
       loading: false,
-      max: 1
+      max: 0,
     }
   },
   created() {
@@ -81,7 +78,7 @@ export default {
     },
     load() {
       this.max++
-      if (this.max > 2) {
+      if (this.max > 10) {
         return
       }