修改首页的新建聊天

src/components/AddPerson/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-dialog
+    v-model="isOpen"
+    title="新建聊天"
+    append-to-body
+    width="512"
+  >
+  <div class="main-cont">
+    <div class="main-cont-left"></div>
+    <div class="main-cont-right"></div>
+  </div>
+    <!-- <el-transfer :titles="['显示', '隐藏']"></el-transfer> -->
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false">
+          确认
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup>
+const opent = ref(true);
+const props = defineProps({
+  open: {
+    typeof: Boolean,
+    default: false,
+  },
+});
+const isOpen = ref(props.open);
+watch(
+  () => props.open,
+  (newValue) => {
+    isOpen.value = newValue;
+  }
+);
+onMounted(() => {
+  console.log("props.open", props.opens);
+});
+</script>
+<style lang="scss" scoped>
+:deep(.el-dialog__header) {
+    --el-dialog-bg-color: #0b4ab7 !important;
+}
+.main-cont{
+    height: 348px;
+    border: 1px solid #C1CCE3;
+    display: flex;
+
+    .main-cont-left, .main-cont-right{
+      width: 50%;
+      height: 100%;
+    }
+    .main-cont-right{
+        border-left: 1px solid #C1CCE3;
+    }
+}
+</style>

src/store/modules/user.js

@@ -27,15 +27,13 @@ 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)
 				})
 			})
@@ -46,7 +44,6 @@ const useUserStore = defineStore(
 				getInfo().then(res => {
 					const user = res.user
 					const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
-
 					if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
 						this.roles = res.roles
 						this.permissions = res.permissions
@@ -54,6 +51,8 @@ const useUserStore = defineStore(
 						this.roles = ['ROLE_DEFAULT']
 					}
 					this.uid = user.userId;
+					const websoctStore = useWebsoctStore()
+					websoctStore.connect()
 					this.name = user.userName;
 					this.avatar = avatar;
 					resolve(res)

src/store/modules/websocket.js

@@ -2,31 +2,48 @@
 import useUserStore from '@/store/modules/user'
 const useWebsoctStore = defineStore('websoct', {
   state: () => ({
-    websocket: null,
+    messages: [],
+    socket: null,
     newMessage: false
   }),
   actions: {
     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
+      if (window.WebSocket) {
+      this.socket =  new WebSocket(`${window.location.origin.replace("http", "ws")}/websocket/message/${useUserStore().uid}`);
+      }
+      this.socket.addEventListener("open", () => {
+        console.log("WebSocket连接已打开")
+      })
+
+      this.socket.addEventListener("message", (event) => {
+        const message = JSON.parse(JSON.stringify(event.data))
+        this.messages.push(message)
+      })
+
+      this.socket.addEventListener("close", () => {
+        console.log("WebSocket连接已关闭")
+      })
+
+      this.socket.addEventListener("error", (error) => {
+        console.error("WebSocket连接错误:", error)
+      })
+    },
+    send(message) {
+      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+        console.log('message', message)
+        this.socket.send(JSON.stringify(message))
+      }
     },
     handleMessage(event) {
         console.log('event', event)
       // 处理接收到的消息
-      const message = JSON.parse(event.data)
+    //   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

@@ -47,9 +47,10 @@
 		methods: {
 			initWebSocket() {
 				var vue = this;
+				let url=`${window.location.origin.replace("http", "ws")}/websocket/message/${useUserStore().uid}`;
 				//创建websocket
 				if (window.WebSocket) {
-					vue.ws = new WebSocket("ws://localhost:8080/websocket/message/" + useUserStore().uid);
+					vue.ws = new WebSocket(url);
 				//绑定建立连接事件
 				vue.ws.onopen = function(evt) {
 					console.log("连接成功了啊喂？")
@@ -64,7 +65,7 @@
 				vue.ws.onclose = function(evt) {
 
 				}
-			},
+			}},
 			chatWith(person) {
 				// TODO 查询与该用户的聊天记录
 				getRecord(person.id)

src/views/liveChat/index.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-  name: "index2",
+  name: "index",
 };
 </script>
 <script setup>
@@ -11,13 +11,15 @@ import send from "@/assets/images/send.png";
 import sendFile from "@/assets/images/send-file.png";
 import store from "@/store";
 import { msgFriend } from "@/api/chat/msg";
+import Addperson from "@/components/AddPerson/index.vue"; //添加人员的弹框
 //websocket连接====
-import useWebsoctStore from '@/store/modules/websocket'
-const websoctStore = useWebsoctStore()
-
+import useWebsoctStore from "@/store/modules/websocket";
+const websoctStore = useWebsoctStore();
 //====
+
 const height = ref(document.documentElement.clientHeight - 74 + "px;");
 const searchText = ref(""); //搜
+const messageText = ref(""); //发送的内容
 const SearchChat = () => {}; //搜索的点击事件
 //聊天列表数据模拟
 const personList = reactive({
@@ -39,27 +41,37 @@ const personList = reactive({
 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 chatRecords = reactive([
+  { sender: "friend", content: "Hello" },
+  { sender: "me", content: "Hi" },
+  { sender: "me", content: "How are you?" },
+  { sender: "friend", content: "I am fine, thanks!" },
+]);
+//点击左侧新建聊天
+const open = ref(false);
+const clickNewPerson = () => {
+  open.value = true;
+  console.log("1111", 1111);
+};
 //点击左侧聊天列表
 const clickPersonIndex = ref("");
 const clickPerson = (index) => {
   clickPersonIndex.value = index;
 };
+//发送聊天点击事件
+const messageChat = () => {
+  const message = { text: messageText.value };
+  websoctStore.send(message);
+  messageText.value = "";
+};
 onMounted(() => {
-	try {
+  try {
     getMsgList();
-    websoctStore.connect()
-	} catch (e) {
-	}
-})
-
+    websoctStore.connect();
+  } catch (e) {}
+});
 </script>
 
 <template>
@@ -75,7 +87,22 @@ onMounted(() => {
           suffix-icon="Search"
           @change="SearchChat"
         />
-        <el-icon size="24" color="#505870"><Plus /></el-icon>
+        <!-- 添加聊天人员 -->
+        <el-icon size="24" color="#505870" @click="clickNewPerson"
+          ><Plus
+        /></el-icon>
+        <Addperson :open="open" @close="open = false"></Addperson>
+        <!-- <el-dialog
+          title="新建聊天"
+          append-to-body
+          v-model="open"
+          style="
+            width: 512px;
+            height: 428px;
+          "
+        >
+        <Addperson></Addperson>
+        </el-dialog> -->
       </div>
       <div
         :class="
@@ -109,16 +136,16 @@ onMounted(() => {
           <el-main class="right-container">
             <div
               class="message-container"
-              v-for="(record,index) in chatRecords"
+              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>
+              <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">
@@ -135,11 +162,11 @@ onMounted(() => {
           <el-footer height="72px" class="right-footer">
             <img :src="sendFile" class="send-info-file" />
             <el-input
-              v-model="searchText"
+              v-model="messageText"
               class="w-50 m-2"
               size="small"
               placeholder="请输入聊天内容"
-              @change="SearchChat"
+              @change="messageChat"
             />
             <img :src="send" class="send-info" />
           </el-footer>

vite.config.js

@@ -39,13 +39,13 @@ export default defineConfig(({
 			proxy: {
 				// https://cn.vitejs.dev/config/#server-proxy
 				'/dev-api': {
-					target: 'http://localhost:8080/',
+					target: 'http://192.168.1.28:8080/',
 					changeOrigin: true,
 					rewrite: (p) => p.replace(/^\/dev-api/, '')
 				},
 				//websocket代理
 				'/websocket': {
-					target: 'ws://localhost:8080/websocket',
+					target: 'ws://192.168.1.28:8080/websocket',
 					changeOrigin: true,
 					rewrite: (p) => p.replace(/^\/websocket/, '')
 				}