修改首页的代码

package.json

@@ -27,6 +27,7 @@
     "jsencrypt": "3.3.1",
     "nprogress": "0.2.0",
     "pinia": "2.0.22",
+    "socket.io-client": "^4.0.0",
     "sockjs-client": "^1.6.1",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",

src/api/chat/msg.js

@@ -36,9 +36,10 @@ export function updateMsg(data) {
 }
 
 // 删除聊天消息管理;
-export function delMsg(msgId) {
+export function msgFriend(msgId) {
   return request({
-    url: '/chat/msg/' + msgId,
-    method: 'delete'
+    url: '/chat/msg/friend',
+    method: 'get'
   })
 }
+

src/assets/styles/my-common.scss

@@ -8,4 +8,141 @@
     display: flex;
     align-items: center;
     justify-content: center;
-}
+}
+
+.main {
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    .left-main,
+    .right-main {
+      background: #fff;
+      border-radius: 4px;
+    }
+    //左侧板块
+    .left-main {
+      width: 312px;
+      margin-right: 8px;
+      .left-top {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        height: 48px;
+        background: #ebeff6;
+        border-top-right-radius: 4px;
+        border-top-left-radius: 4px;
+      }
+    }
+    //右侧板块
+    .right-main {
+      width: 100%;
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      .right-header {
+        background-color: #ebeff6;
+        border-top-right-radius: 4px;
+        border-top-left-radius: 4px;
+      }
+      .right-container {
+        flex: 1;
+        border-bottom: 1px solid #c1cce3;
+      }
+      .right-footer {
+        display: flex;
+        align-items: center;
+        :deep .el-input__wrapper {
+          background: #f5f7f9 !important;
+          border-radius: 16px;
+        }
+        .w-50 {
+          margin: 0 16px;
+          flex: 1;
+        }
+        .send-info {
+          width: 40px;
+          height: 40px;
+          border-radius: 16px;
+        }
+        .send-info-file {
+          width: 28px;
+          height: 28px;
+        }
+        :deep .el-input {
+          width: 80%;
+          height: 40px;
+          border-radius: 16px;
+          --el-input-border-color: #c9d2e6;
+        }
+      }
+    }
+  }
+  //搜索
+  .search {
+    .w-50,
+    :deep .el-input {
+      width: 80%;
+      height: 32px;
+      border-radius: 4px;
+      --el-input-border-color: #c9d2e6;
+    }
+  }
+  //聊天头像
+  .head-sculpture {
+      width: 40px;
+      height: 40px;
+      border-radius: 20px;
+      margin: 0 8px 0 12px;
+      vertical-align: middle;
+    }
+  
+  //左侧聊天列表展示
+  .left-container {
+    height: 80px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #c1cce3;
+    position: relative;
+  
+    & > div:last-child {
+      vertical-align: middle;
+      margin-right: 10px;
+      display: flex;
+      height: 40px;
+      justify-content: space-between;
+      flex-direction: column;
+      .person-name {
+        font-family: "Inter-Medium";
+        color: #000;
+        font-size: 16px;
+      }
+      .person-cont {
+        color: #505870;
+        font-size: 14px;
+      }
+    }
+  }
+  //点击时列表的背景色
+  .activ-left-container {
+    background: #f5f7f9;
+  }
+  .cebian {
+    height: 100%;
+    width: 4px;
+    position: absolute;
+    left: 0;
+  }
+  //聊天
+  .message-container {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 10px;
+  }
+  
+  .message-left {
+    justify-content: flex-start;
+  }
+  
+  .message-right {
+    justify-content: flex-end;
+  }

src/layout/indexCommon.vue

@@ -100,7 +100,7 @@ function toggleSideBar() {
   appStore.toggleSideBar()
 }
 onMounted(() => {
-  console.log('router',router)
+  // console.log('router',router)
 })
 function handleCommand(command) {
   switch (command) {
@@ -129,7 +129,7 @@ function logout() {
 
 // 跳转到全文搜索
 const toSearch = ()=>{
-  console.log('searchText = ',searchText.value);
+  // console.log('searchText = ',searchText.value);
   router.push('/search');
   
 }
@@ -184,7 +184,7 @@ const menuList = reactive({
     },
     {
       label: "传输列表",
-      path: "/swagger",
+      path: "/ws",
       imgs: chuanshu,
       beimgs: bechuanshu,
     },

src/main.js

@@ -8,7 +8,7 @@ import locale from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
 import '@/assets/styles/index.scss' // global css
 
 import App from './App'
-import store from './store'
+import store from './store'//pinia
 import router from './router'
 import directive from './directive' // directive
 

src/router/index.js

@@ -105,13 +105,18 @@ export const constantRoutes = [
         component: () => import("@/views/collect/index.vue"),
         name: "collect",
         meta: { title: "收藏文件", icon: "department" }
+      },
+      {
+        path: "/ws",
+        component: () => import("@/views/biz/test/index.vue"),
+        name: "ws",
+        meta: { title: "聊天", icon: "department" }
       }
     ]
   },
   {
     path: '/admin',
     component:Layout,
-    component: Layout,
     redirect: '/admin/index',
     children: [
       {

src/store/index.js

@@ -1,3 +1,4 @@
+// import {createPinia} from 'pinia'
 const store = createPinia()
 
 export default store

src/store/modules/user.js

@@ -9,7 +9,7 @@ import {
 	removeToken
 } from '@/utils/auth'
 import defAva from '@/assets/images/profile.jpg'
-
+import useWebsoctStore from '@/store/modules/websocket'
 const useUserStore = defineStore(
 	'user', {
 	state: () => ({
@@ -27,12 +27,15 @@ const useUserStore = defineStore(
 			const password = userInfo.password
 			const code = userInfo.code
 			const uuid = userInfo.uuid
+			const websoctStore = useWebsoctStore()
 			return new Promise((resolve, reject) => {
 				login(username, password, code, uuid).then(res => {
 					setToken(res.token)
 					this.token = res.token
+					websoctStore.connect()
 					resolve()
 				}).catch(error => {
+					console.log('error', error)
 					reject(error)
 				})
 			})

src/store/modules/websocket.js

@@ -1,46 +1,32 @@
-// websocket.js
-import { useWebSocket } from 'vue-native-websocket'
-import useDictStore from '@/store/modules/dict'
-export default {
-  namespaced: true,
-  state: {
-    messages: []
-  },
-  mutations: {
-    addMessage(state, message) {
-      state.messages.push(message)
-    }
-  },
+// websoct.js
+import useUserStore from '@/store/modules/user'
+const useWebsoctStore = defineStore('websoct', {
+  state: () => ({
+    websocket: null,
+    newMessage: false
+  }),
   actions: {
-    connect({ commit }) {
-      const options = {
-        url: "ws://localhost:8080/websocket/message/" + useUserStore().uid,
-        format: 'json'
-      }
-      const { send } = useWebSocket(options)
-
-      commit('addMessage', 'Connected to server')
-
-      // 监听消息事件
-      send({ type: 'listen' })
-
-      // 处理消息
-      return ({ type, payload }) => {
-        switch (type) {
-          case 'message':
-            commit('addMessage', payload)
-            break
-          // 处理其他消息类型
-          // ...
-        }
-      }
+    connect() {
+      const useUser=useUserStore()
+      this.websocket =  new WebSocket(`${window.location.origin.replace("http", "ws")}${import.meta.env.VITE_APP_BASE_API}/websocket/message/${useUser.uid}`);
+    //   this.websocket.onopen = function(evt) {
+    //     console.log('this.handleMessagethis.handleMessage',evt)
+    //   }
+    //   this.websocket.onmessage = this.handleMessage
     },
-    sendMessage(context, message) {
-      const { send } = useWebSocket()
-      send({
-        type: 'send',
-        payload: message
-      })
-    }
+    handleMessage(event) {
+        console.log('event', event)
+      // 处理接收到的消息
+      const message = JSON.parse(event.data)
+      // 更新聊天记录等操作
+      // ...
+      // 如果登录后接收到服务器消息，设置newMessage为true
+    //   this.newMessage = true
+    },
+    // sendMessage(message) {
+    //   // 发送消息
+    //   this.websocket.send(JSON.stringify(message))
+    // }
   }
-}
+})
+export default useWebsoctStore

src/views/biz/test/index.vue

@@ -49,7 +49,8 @@
 				var vue = this;
 				//创建websocket
 				if (window.WebSocket) {
-					vue.ws = new WebSocket("ws://localhost:8080/websocket/message/" + useUserStore().uid);
+				
+					vue.ws = new WebSocket(`${window.location.origin.replace("http", "ws")}${import.meta.env.VITE_APP_BASE_API}/websocket/message/${useUserStore().uid}`);
 				}
 				//绑定建立连接事件
 				vue.ws.onopen = function(evt) {

src/views/liveChat/index.vue

@@ -9,7 +9,13 @@ import chat from "@/assets/images/profile.jpg";
 import cebian from "@/assets/images/cebian.png";
 import send from "@/assets/images/send.png";
 import sendFile from "@/assets/images/send-file.png";
-import store from '@/store'
+import store from "@/store";
+import { msgFriend } from "@/api/chat/msg";
+//websocket连接====
+import useWebsoctStore from '@/store/modules/websocket'
+const websoctStore = useWebsoctStore()
+
+//====
 const height = ref(document.documentElement.clientHeight - 74 + "px;");
 const searchText = ref(""); //搜
 const SearchChat = () => {}; //搜索的点击事件
@@ -28,11 +34,32 @@ const personList = reactive({
     },
   ],
 });
+// const personList =reactive({data: []})
+//获取好友列表
+function getMsgList() {
+  msgFriend().then((res) => {
+    // personList.data=res.rows
+  })
+}
+const chatRecords= reactive( [
+        { sender: 'friend', content: 'Hello' },
+        { sender: 'me', content: 'Hi' },
+        { sender: 'me', content: 'How are you?' },
+        { sender: 'friend', content: 'I am fine, thanks!' },
+      ])
 //点击左侧聊天列表
 const clickPersonIndex = ref("");
 const clickPerson = (index) => {
   clickPersonIndex.value = index;
 };
+onMounted(() => {
+	try {
+    getMsgList();
+    websoctStore.connect()
+	} catch (e) {
+	}
+})
+
 </script>
 
 <template>
@@ -78,7 +105,32 @@ const clickPerson = (index) => {
           <el-header height="64px" class="right-header flex-buju"
             >Header</el-header
           >
-          <el-main class="right-container">Main</el-main>
+          <!-- 聊天 -->
+          <el-main class="right-container">
+            <div
+              class="message-container"
+              v-for="(record,index) in chatRecords"
+              :class="{
+                'message-left': record.sender !== 'me',
+                'message-right': record.sender === 'me',
+              }"
+              :key="index"
+            >
+            <span v-if="record.sender == 'me'">{{ record.content }}</span>
+            <img :src="chat" class="head-sculpture"/>
+            <span v-if="record.sender !== 'me'">{{ record.content }}</span>
+            </div>
+            <!-- <div class="chat-message">
+              <div class="chat-item"  :class="{'chat-item-out':item.sender=='out'}" v-for="(item,index) in chatRecords"  :key="index">
+              <div class="chat-item-content">
+                <div :class="{'triangle':item.sender == 'me','triangle_tow': item.sender !== 'me'}"></div>
+                <div :class="{'fill':item.sender == 'me','fill_tow': item.sender !== 'me'}"></div>
+                {{ item.content }}
+              </div>
+
+              </div>
+            </div> -->
+          </el-main>
           <!-- 底部 -->
           <el-footer height="72px" class="right-footer">
             <img :src="sendFile" class="send-info-file" />
@@ -99,125 +151,38 @@ const clickPerson = (index) => {
 
 <style lang="scss" scoped>
 @import "@/assets/styles/my-common.scss";
-.main {
-  overflow: hidden;
-  display: flex;
-  justify-content: space-between;
-  .left-main,
-  .right-main {
-    background: #fff;
-    border-radius: 4px;
-  }
-  //左侧板块
-  .left-main {
-    width: 312px;
-    margin-right: 8px;
-    .left-top {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      height: 48px;
-      background: #ebeff6;
-      border-top-right-radius: 4px;
-      border-top-left-radius: 4px;
-    }
-  }
-  //右侧板块
-  .right-main {
-    width: 100%;
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    .right-header {
-      background-color: #ebeff6;
-      border-top-right-radius: 4px;
-      border-top-left-radius: 4px;
-    }
-    .right-container {
-      flex: 1;
-      border-bottom: 1px solid #c1cce3;
-    }
-    .right-footer {
-      display: flex;
-      align-items: center;
-      :deep .el-input__wrapper {
-        background: #F5F7F9 !important;
-        border-radius: 16px;
-      }
-      .w-50{
-        margin: 0 16px;
-        flex:1;
-      }
-      .send-info {
-        width: 40px;
-        height: 40px;
-        border-radius: 16px;
-      }
-      .send-info-file{
-        width: 28px;
-        height: 28px;
-      }
-      :deep .el-input {
-        width: 80%;
-        height: 40px;
-        border-radius: 16px;
-        --el-input-border-color: #c9d2e6;
-      }
-
-    }
-  }
-}
-//搜索
-.search {
-  .w-50,
-  :deep .el-input {
-    width: 80%;
-    height: 32px;
-    border-radius: 4px;
-    --el-input-border-color: #c9d2e6;
-  }
-}
-//左侧聊天列表展示
-.left-container {
-  height: 80px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #c1cce3;
-  position: relative;
-  .head-sculpture {
-    width: 40px;
-    height: 40px;
-    border-radius: 20px;
-    margin: 0 8px 0 12px;
-    vertical-align: middle;
-  }
+// .chat-item-out{
+//   justify-content: flex-end;
+//   .chat-item-content{
+//     margin-right: 10px;
+//   }
+// }
+// .chat-message{
 
-  & > div:last-child {
-    vertical-align: middle;
-    margin-right: 10px;
-    display: flex;
-    height: 40px;
-    justify-content: space-between;
-    flex-direction: column;
-    .person-name {
-      font-family: "Inter-Medium";
-      color: #000;
-      font-size: 16px;
-    }
-    .person-cont {
-      color: #505870;
-      font-size: 14px;
-    }
-  }
-}
-//点击时列表的背景色
-.activ-left-container {
-  background: #f5f7f9;
-}
-.cebian {
-  height: 100%;
-  width: 4px;
-  position: absolute;
-  left: 0;
-}
+// }
+// .chat-item-content{
+//   position: relative;
+//   padding:10px 6px;
+//   margin-top: 10px;
+//   margin-left: 10px;
+//   border-radius: 5px;
+//   word-break: break-all;
+//   background: skyblue;
+//   color: white;
+// }
+// .chat-item{
+//   display: flex;
+// }
+// .triangle,.triangle_tow{
+//   position: absolute;
+//   top: 15px;
+//   border-width: 10px;
+//   border-style: solid;
+// }
+// .fill_tow{
+//   position: relative;
+//   top: 15px;
+//   border-width: 10px;
+//   border-style:solid ;
+// }
 </style>