hhh

package.json

@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "@antv/g2plot": "^1.1.6",
+    "@stomp/stompjs": "^5.4.4",
+    "stomp": "^0.1.1",
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.13.2",

src/layout/live/detailmetting.vue

@@ -24,8 +24,7 @@
             <span @click="liveon"><i class="iconfont iconshexiangtou"></i>摄像头</span>
             <span @click="liveclose">关闭</span>
           </el-col>
-          <el-col :span="2" class="noVideo"> </el-col>
-          <el-col :span="20" class="video">
+          <el-col :span="18" class="video">
             <el-col :span="24" class="videoMeet">
               <el-col :span="18" class="one">
                 <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
@@ -55,7 +54,21 @@
               </el-col>
             </el-col>
           </el-col>
-          <el-col :span="2" class="noVideo"> </el-col>
+          <el-col :span="6" class="noVideo">
+            <el-col :span="24" class="chatList">
+              <el-col :span="24" class="list" v-for="(item, index) in dataList" :key="index">
+                <span class="">{{ item.sendname }}:{{ item.content }}</span>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="chatInput">
+              <el-col :span="19" class="input">
+                <el-input type="textarea" v-model="content"></el-input>
+              </el-col>
+              <el-col :span="5" class="btn">
+                <el-button type="primary" size="mini" @click="chatCreate">发送</el-button>
+              </el-col>
+            </el-col>
+          </el-col>
           <el-col :span="24" class="rightDown"> <!-- 开始直播 --> </el-col>
         </el-col>
       </el-col>
@@ -74,8 +87,10 @@
 </template>
 
 <script>
+import Vue from 'vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: gensign } = createNamespacedHelpers('gensign');
+const { mapActions: chat } = createNamespacedHelpers('chat');
 import TRTC from 'trtc-js-sdk';
 export default {
   name: 'detailmetting',
@@ -96,17 +111,58 @@ export default {
       client_: '',
       localStream_: '',
       sdkAppId_: '1400380125',
-
-      userId_: '1111',
+      content: '',
+      userId_: '',
       open_: false,
+      dataList: [],
     };
   },
   created() {
     this.initclient();
     this.getDevices();
+    this.chatSearch();
+  },
+  mounted() {
+    this.channel();
   },
   methods: {
     ...gensign(['gensignFetch']),
+    ...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 getDevices() {
       this.cameras = await TRTC.getCameras();
       this.microphones = await TRTC.getMicrophones();
@@ -299,7 +355,20 @@ export default {
     }
     .noVideo {
       min-height: 640px;
-      background-color: #151618;
+      background-color: #c0c4cc;
+      .chatList {
+        border: 1px solid #ccc;
+        min-height: 550px;
+        margin: 0 0 10px 0;
+        border-radius: 10px;
+        padding: 5px 10px;
+      }
+      .chatInput {
+        .el-button {
+          width: 100%;
+          padding: 13px 0;
+        }
+      }
     }
     .rightDown {
       height: 100px;

src/main.js

@@ -13,12 +13,13 @@ import '@/plugins/var';
 import '@/plugins/methods';
 import '@/plugins/setting';
 import '@/iconfonts/iconfont.css';
-
+import InitStomp from '@/plugins/stomp';
 new Vue({
   router,
   store,
   render: h => h(App),
 }).$mount('#app');
+InitStomp();
 window.vm = new Vue({
   router,
 });

src/plugins/setting.js

@@ -9,9 +9,9 @@ Vue.config.stomp = {
   // brokerURL: 'ws://192.168.1.190:15674/ws',
   brokerURL: '/ws', // ws://${location.host}/ws
   connectHeaders: {
-    host: 'smart',
-    login: 'web',
-    passcode: 'web123',
+    host: 'live',
+    login: 'live',
+    passcode: 'live',
   },
   // debug: true,
   reconnectDelay: 5000,

src/store/chat.js

@@ -0,0 +1,46 @@
+// 房间
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  chatInfo: `/api/onlive/chat`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit = 1000, ...info } = {}) {
+    const res = await this.$axios.$get(api.chatInfo, {
+      skip,
+      limit,
+      ...info,
+    });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.chatInfo}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.chatInfo}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...info } = {}) {
+    const res = await this.$axios.$post(`${api.chatInfo}/update/${id}`, {
+      ...info,
+    });
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.chatInfo}/${payload}`);
+    return res;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/index.js

@@ -6,6 +6,7 @@ import role from './role';
 import room from './room';
 import lookuser from './lookuser';
 import gensign from './gensign';
+import chat from './chat';
 import * as ustate from './user/state';
 import * as umutations from './user/mutations';
 
@@ -22,5 +23,6 @@ export default new Vuex.Store({
     room,
     lookuser,
     gensign,
+    chat,
   },
 });

vue.config.js

@@ -26,13 +26,17 @@ module.exports = {
         ws: true,
       },
       '/files': {
-        target: 'http://free.liaoningdoupo.com',
+        target: 'https://zb.liaoningdoupo.com',
       },
       '/api': {
-        target: 'http://free.liaoningdoupo.com',
+        target: 'https://zb.liaoningdoupo.com',
         changeOrigin: true,
         ws: true,
       },
+      '/ws': {
+        target: 'https://zb.liaoningdoupo.com',
+        ws: true,
+      },
     },
   },
 };