|
|
@@ -0,0 +1,148 @@
|
|
|
+<template>
|
|
|
+ <el-row class="movie-list">
|
|
|
+ <el-col :md="18">
|
|
|
+ <div class="movie-list" style="height: 100vh;">
|
|
|
+ <!-- 注意需要给 el-scrollbar 设置高度，判断是否滚动是看它的height判断的 -->
|
|
|
+ <el-scrollbar style="width: 100%; height: 70%;">
|
|
|
+ <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-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <el-row>
|
|
|
+ <span>热门文章</span>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </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: [],
|
|
|
+ websocket: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ document.title = 'MessageStream'
|
|
|
+ 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' })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initWebSocket: function() {
|
|
|
+ var url = 'wss://api.reghao.cn/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() {
|
|
|
+ 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>
|
