update MessageStream.vue

src/views/home/MessageStream.vue

@@ -35,14 +35,22 @@
     </el-col>
     <el-col :md="6">
       <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <el-col>
+        <span v-if="online" style="color: forestgreen">在线</span>
+        <span v-else style="color: orangered">离线</span>
+<!--        <el-col>
           <el-button
             size="mini"
             type="danger"
             class="el-icon-delete"
             @click="clear"
           >清空</el-button>
-        </el-col>
+        </el-col>-->
+        <el-select v-model="receiverId" placeholder="选择用户">
+          <el-option label="西瓜" value="10001" />
+          <el-option label="土豆" value="10002" />
+          <el-option label="番茄" value="10003" />
+          <el-option label="芒果" value="10004" />
+        </el-select>
       </el-row>
       <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-card class="box-card">
@@ -51,8 +59,15 @@
             type="textarea"
             :rows="3"
             placeholder="有什么新鲜事想分享给大家?"
+            @keydown.enter.native="keyDown"
           />
           <el-row style="text-align: right">
+            <el-button
+              size="mini"
+              type="submit"
+              class="el-icon-delete"
+              @click="clear"
+            >清空</el-button>
             <el-button
               size="mini"
               type="submit"
@@ -67,7 +82,7 @@
 </template>
 
 <script>
-import { getAccessToken } from '@/utils/auth'
+import { getAccessToken, getAuthedUser } from '@/utils/auth'
 
 export default {
   name: 'WebSocket',
@@ -83,32 +98,59 @@ export default {
   },
   data() {
     return {
+      user: null,
       dataList: [],
       text: '',
+      receiverId: '10001',
       websocket: null,
-      token: null
+      token: null,
+      online: false
     }
   },
   created() {
     document.title = 'MessageStream'
+    const userInfo = getAuthedUser()
+    if (userInfo !== null) {
+      this.user = userInfo
+    }
+
     const token = getAccessToken()
     if (token === null) {
-      this.token = '1234567890'
+      return
     } else {
       this.token = token
     }
     this.initWebSocket()
   },
   methods: {
+    keyDown(e) {
+      if (e.ctrlKey && e.keyCode === 13) { // 用户点击了ctrl+enter触发
+        this.text += '\n'
+      } else {
+        // 用户点击了enter触发
+        // 执行一些逻辑方法
+        if (e !== undefined) {
+          e.preventDefault()
+          this.onSubmit()
+        }
+      }
+    },
     clear() {
-      this.dataList = []
+      this.text = ''
+      // this.dataList = []
     },
     onSubmit() {
-      this.websocketSend(this.text)
+      var jsonData = {}
+      jsonData.event = 'event_talk'
+      jsonData.data = {}
+      jsonData.data.receiverId = this.receiverId
+      jsonData.data.senderId = this.user.userId
+      jsonData.data.content = this.text
+      this.websocketSend(jsonData)
       this.text = ''
     },
     initWebSocket: function() {
-      var url = 'ws:' + process.env.VUE_APP_SERVER_URL + '/ws/message?token=' + this.token
+      var url = 'ws:' + process.env.VUE_APP_SERVER_URL + '/ws/chat?token=' + this.token
       this.websock = new WebSocket(url)
       this.websock.onopen = this.websocketOnopen
       this.websock.onerror = this.websocketOnerror
@@ -117,11 +159,18 @@ export default {
     },
     websocketOnopen: function() {
       console.log('WebSocket连接成功')
+      this.online = true
       // 心跳检测重置
       // this.heartCheck.reset().start();
     },
     websocketOnerror: function(e) {
       console.log('WebSocket连接发生错误')
+      this.online = false
+      this.reconnect()
+    },
+    websocketOnclose: function(e) {
+      console.log('connection closed (' + e.code + ')')
+      this.online = false
       this.reconnect()
     },
     websocketOnmessage: function(e) {
@@ -129,24 +178,37 @@ export default {
       const receiverId = evtData.receiverId
       const senderId = evtData.senderId
       const payload = evtData.payload
-      var justify = 'start'
-      if (senderId === this.token) {
-        justify = 'end'
+
+      var justify = 'end'
+      if (receiverId === this.user.userId) {
+        justify = 'start'
       }
 
+      var msg = {}
+      msg.senderId = evtData.senderId
+      msg.content = evtData.payload
       this.dataList.push({
-        content: payload,
+        content: msg,
         justify: justify
       })
     },
-    websocketOnclose: function(e) {
-      console.log('connection closed (' + e.code + ')')
-      this.reconnect()
-    },
-    websocketSend(text) { // 数据发送
+    websocketSend(jsonData) { // 数据发送
       try {
-        this.websock.send(text)
+        this.websock.send(JSON.stringify(jsonData))
         this.$message.success('消息已发送')
+
+        var justify = 'start'
+        if (jsonData.data.senderId === this.user.userId) {
+          justify = 'end'
+        }
+
+        var msg = {}
+        msg.receiverId = jsonData.data.receiverId
+        msg.content = jsonData.data.content
+        this.dataList.push({
+          content: msg,
+          justify: justify
+        })
       } catch (err) {
         this.$message.error('send failed (' + err.code + ')')
       }