|
|
@@ -1,204 +0,0 @@
|
|
|
-<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: 1,
|
|
|
- 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 = 'WebSocket'
|
|
|
- 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:' + process.env.VUE_APP_SERVER_URL + '/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>
|
