1

dl_vue/src/App.vue

@@ -18,7 +18,7 @@ export default {
     }
   },
   destroyed: function () { // 离开页面生命周期函数
-    this.$websocket.dispatch('websocket_close');
+    this.$store.dispatch('websocket_close')
   },
   created () {
     const username = Cookies.get('username')

dl_vue/src/main.js

@@ -37,7 +37,6 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
-import websocket from "./store/websocket";
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts

dl_vue/src/store/modules/websocket.js

@@ -1,4 +1,4 @@
-
+import { EventBus } from '@/utils/eventBus';
 const websocket = {
   state: {
     socket:null,
@@ -9,25 +9,24 @@ const websocket = {
 
   mutations: {
     WEBSOCKET_INIT(state,url){
-      console.log(url);
       state.socket = new WebSocket(url);
       state.socket.onopen=function () {
-        console.log("WebSocket连接成功");
+        console.log("Websocket已连接")
       };
       state.socket.onmessage = function (e) {
-        console.log(e,'接受到消息')
         if (e.data.startsWith("C")) {
           state.count = e.data;
-
-        }
-        else if (e.data.startsWith("系统通知")){
+        } else if (e.data.startsWith("系统通知")){
           state.notice.push(e.data);
           console.log(state.notice);
-        }
-        else {
+        } else {
           console.log(e.data,'消息内容')
-          state.message.push(JSON.parse(e.data));
-          // console.log(state.message);
+          //这里捕获消息
+          const messageData = JSON.parse(e.data)
+          // 触发事件通知
+          EventBus.$emit('newMessage', messageData);
+          //存储消息
+          state.message.push(messageData);
         }
 
       };

dl_vue/src/store/websocket.js

@@ -1,64 +0,0 @@
-// import Vue from 'vue'
-// import Vuex from 'vuex'
-//
-// Vue.use(Vuex)
-//
-// export default new Vuex.Store({
-//   //定义全局变量
-//   state: {
-//     websock:null,
-//     message:[],
-//     count:"0",
-//     notice:[]
-//   },
-//   //改变state的值必须经过
-//   mutations: {
-//     WEBSOCKET_INIT(state,url){
-//       console.log(url);
-//       state.websock = new WebSocket(url);
-//       state.websock.onopen=function () {
-//         console.log("WebSocket连接成功");
-//       };
-//       state.websock.onmessage = function (e) {
-//         if (e.data.startsWith("C")) {
-//           state.count = e.data;
-//
-//         }
-//         else if (e.data.startsWith("系统通知")){
-//           state.notice.push(e.data);
-//           console.log(state.notice);
-//         }
-//         else {
-//           state.message.push(JSON.parse(e.data));
-//           // console.log(state.message);
-//         }
-//
-//       };
-//       state.websock.onerror= function () {
-//         console.log("WebSocket连接发生错误");
-//       };
-//       state.websock.onclose =  function (e) {
-//         console.log("connection closed (" + e.code + ")");
-//       };
-//     },
-//     WEBSOCKET_SEND(state,msg){
-//       state.websock.send(msg);
-//     },
-//     WEBSOCKET_CLOSE(state){
-//       state.websock.close();
-//     }
-//   },
-//   actions: {
-//     websocket_init({commit}, url) {
-//       commit('WEBSOCKET_INIT', url)
-//     },
-//     websocket_send({commit}, msg) {
-//       commit('WEBSOCKET_SEND', msg)
-//     },
-//     websocket_close({commit}){
-//       commit('WEBSOCKET_CLOSE')
-//     }
-//   },
-//   modules: {
-//   }
-// })

dl_vue/src/utils/eventBus.js

@@ -0,0 +1,2 @@
+import Vue from 'vue';
+export const EventBus = new Vue();

dl_vue/src/views/busi/chatMain/chatForm.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 选择产品对话框 -->
   <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-    <div class="dl-chat-box"  v-infinite-scroll="nextPage" >
+    <div class="dl-chat-box"   >
       <template v-for="(item,index) in chatItemList">
         <div v-if="item.dataFrom==' '" class="dl-customer-dom">
           <div class="dl-customer-photo">
@@ -62,6 +62,11 @@ export default {
       this.queryParams.mainId = id
       this.getList()
     },
+
+    openForm(){
+      this.open = true
+    },
+
     reset(){
       this.chatItemList=[]
     },

dl_vue/src/views/busi/chatMain/index.vue

@@ -157,7 +157,7 @@
 import chatForm from "@/views/busi/chatMain/chatForm";
 import { listChatMain, getChatMain, delChatMain, addChatMain, updateChatMain } from "@/api/busi/chatMain";
 import Treeselect from '@riophae/vue-treeselect'
-
+import { EventBus } from '@/utils/eventBus';
 export default {
   name: "ChatMain",
   components: { chatForm},
@@ -204,6 +204,11 @@ export default {
       }
     },
   },
+  mounted(){
+    EventBus.$on('newMessage', (message) => {
+      this.$refs.chatFrom.openForm()
+    });
+  },
   created() {
     this.getList();
   },