update MessageStream

src/router/index.js

@@ -14,7 +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 MessageStream = () => import('views/home/MessageStream')
+const MessageStream = () => import('views/home/MessageStream1')
 const Search = () => import('views/home/Search')
 const UserHome = () => import('views/user/Home')
 const UserVideo = () => import('views/user/Home')

src/utils/ws/socket-instance.js

@@ -23,7 +23,6 @@ class SocketInstance {
           return null
         } else {
           var url = 'wss://api.reghao.cn/ws/progress?token=' + token
-          url = 'wss://api.reghao.cn/ws/log?token=' + token
           return url
         }
       },

src/views/home/MessageStream.vue

@@ -88,20 +88,6 @@ export default {
     this.initWebSocket()
   },
   methods: {
-    // 滚动到顶部
-    handleScrollTop() {
-      this.$nextTick(() => {
-        const scrollElem = this.$refs.msgstream
-        scrollElem.scrollTo({ top: 0, behavior: 'smooth' })
-      })
-    },
-    // 滚动到底部
-    handleScrollBottom() {
-      this.$nextTick(() => {
-        const scrollElem = this.$refs.msgstream
-        scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: 'smooth' })
-      })
-    },
     clear() {
       this.dataList = []
     },

src/views/home/MessageStream1.vue

@@ -0,0 +1,204 @@
+<template>
+  <el-row class="movie-list">
+    <el-col :md="18">
+      <div class="movie-list" style="height: 70vh;">
+        <el-scrollbar style="width: 100%; height: 100%;">
+          <div ref="comment" :style="wrapStyle" class="comment-wrap">
+            <comment
+              v-model="videoComments"
+              :user="currentUser"
+              :props="props"
+              :before-submit="submit"
+              :before-like="like"
+              :before-delete="deleteComment"
+              :upload-img="uploadImg"
+            />
+          </div>
+        </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>
+import comment from '@/components/comment'
+
+export default {
+  name: 'MessageStream1',
+  components: { comment },
+  data() {
+    return {
+      wrapStyle: '',
+      videoComments: [],
+      currentUser: {
+        userId: 10001,
+        name: '草莓',
+        avatar: '//picx.zhimg.com/v2-a2c89378a6332cbfed3e28b5ab84feb7.jpg',
+        author: true
+      },
+      props: {
+        id: 'id',
+        content: 'content',
+        imgSrc: 'imgSrc',
+        children: 'children',
+        likes: 'likes',
+        liked: 'liked',
+        reply: 'reply',
+        createAt: 'createAt',
+        user: 'user'
+      },
+      text: '',
+      dataList: []
+    }
+  },
+  created() {
+    document.title = 'CommentStream'
+    this.initWebSocket()
+  },
+  methods: {
+    async submit(newComment, parent, add) {
+      const res = await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({ newComment, parent })
+        }, 300)
+      })
+      add(Object.assign(res.newComment, { _id: new Date().getTime() }))
+      console.log('addComment: ', res)
+    },
+    async like(comment) {
+      const res = await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(comment)
+        }, 0)
+      })
+
+      console.log('likeComment: ', res)
+    },
+    async uploadImg({ file, callback }) {
+      const res = await new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = () => {
+          resolve(reader.result)
+        }
+        reader.onerror = () => {
+          reject(reader.error)
+        }
+      })
+      callback(res)
+      console.log('uploadImg： ', res)
+    },
+    async deleteComment(comment, parent) {
+      const res = await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve({ comment, parent })
+        }, 300)
+      })
+      console.log('deleteComment: ', res)
+    },
+    clear() {
+      this.dataList = []
+    },
+    onSubmit() {
+      this.$notify({
+        message: this.text,
+        type: 'info',
+        duration: 1000
+      })
+      this.text = ''
+    },
+    initWebSocket: function() {
+      var url = 'wss://api.reghao.cn/ws/message?token=11011'
+      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)
+      console.log(evtData)
+      // this.dataList.push(payload)
+      this.videoComments.push(evtData)
+    },
+    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() {
+      var 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>