hhh

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@stomp/stompjs": "^5.4.4",
+    "stomp": "^0.1.1",
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "element-ui": "^2.13.2",

src/plugins/setting.js

@@ -9,9 +9,9 @@ Vue.config.stomp = {
   // brokerURL: 'ws://http://free.liaoningdoupo.com/ws',
   brokerURL: '/ws', // ws://${location.host}/ws
   connectHeaders: {
-    host: 'visit',
-    login: 'visit', //visit
-    passcode: 'visit', //visit123
+    host: 'live',
+    login: 'live',
+    passcode: 'live',
   },
   // debug: true,
   reconnectDelay: 5000,

src/store/chat.js

@@ -3,7 +3,7 @@ import Vuex from 'vuex';
 import _ from 'lodash';
 Vue.use(Vuex);
 const api = {
-  interface: `/api/live/chat`,
+  interface: `/api/onlive/chat`,
 };
 const state = () => ({});
 const mutations = {};

src/views/live/roomMeet.vue

@@ -40,11 +40,16 @@
             <el-tab-pane label="互动" name="first">
               <el-col :span="24" class="chat">
                 <el-col :span="24" class="chatInfo">
-                  聊天
+                  <el-col :span="24" class="list" v-for="(item, index) in dataList" :key="index">
+                    <p>
+                      <span :class="item.sendname == user.name ? 'selfColor' : ''">{{ item.sendname }}</span>
+                      <span>{{ item.content }}</span>
+                    </p>
+                  </el-col>
                 </el-col>
                 <el-col :span="24" class="submit">
-                  <el-input v-model="content"></el-input>
-                  <el-button type="primary" size="mini">发送</el-button>
+                  <el-input type="textarea" maxlength="5000" show-word-limit v-model="content"></el-input>
+                  <el-button type="primary" size="mini" @click="chatCreate">发送</el-button>
                 </el-col>
               </el-col>
             </el-tab-pane>
@@ -67,6 +72,7 @@ Vue.use(VanImage);
 Vue.use(Lazyload);
 const { mapActions: gensign } = createNamespacedHelpers('gensign');
 const { mapActions: room } = createNamespacedHelpers('room');
+const { mapActions: chat } = createNamespacedHelpers('chat');
 export default {
   name: 'roomsDetail',
   props: {},
@@ -82,6 +88,7 @@ export default {
       sendmemo: '',
       total: 0,
       content: '',
+      dataList: [],
       activeName: 'first',
       iscamera: false,
       typevalue: 'warning',
@@ -91,10 +98,50 @@ export default {
     this.initclient();
     this.lookuserSearch();
     this.lookusercountsel();
+    this.chatSearch();
+  },
+  mounted() {
+    this.channel();
   },
   methods: {
     ...gensign(['gensignFetch']),
     ...room(['lookuserFetch', 'fetch', 'lookusercount']),
+    ...chat(['query', 'create', 'fetch']),
+    async chatSearch({ skip = 0, limit = 1000 } = {}) {
+      const info = { roomid: this.id };
+      let res = await this.query({ skip, limit, ...info });
+      this.$set(this, `dataList`, res.data);
+    },
+    async chatCreate() {
+      let data = {};
+      data.roomid = this.id;
+      data.type = '1';
+      data.content = this.content;
+      data.sendid = this.user.uid;
+      data.sendname = this.user.name;
+      const res = await this.create(data);
+      if (this.$checkRes(res)) {
+        console.log(res.data);
+      }
+    },
+    channel() {
+      console.log('in function:');
+      this.$stomp({
+        [`/exchange/public_chat_` + this.id]: this.onMessage,
+      });
+    },
+    onMessage(message) {
+      // console.log('receive a message: ', message.body);
+      let body = _.get(message, 'body');
+      if (body) {
+        body = JSON.parse(body);
+        this.dataList.push(body);
+        this.content = '';
+      }
+      // const { content, contenttype, sendid, sendname, icon, groupid, sendtime, type } = message.headers;
+      // let object = { content, contenttype, sendid, sendname, icon, groupid, sendtime, type };
+      // this.list.push(object);
+    },
     async lookuserSearch() {
       let data = {};
       data.roomid = this.id;
@@ -253,6 +300,22 @@ export default {
         overflow: hidden;
         padding: 0 10px;
         margin: 0 0 15px 0;
+        .list {
+          margin: 0 0 10px 0;
+          span:first-child {
+            float: left;
+            width: 17%;
+            text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            // font-weight: bold;
+          }
+          span:last-child {
+            float: right;
+            width: 82%;
+          }
+        }
       }
       .submit {
         .el-input {