Squashed commit of the following:

commit 548cc49c7d
Author: zcx <1078327420@qq.com>
Date:   Fri May 10 10:20:18 2024 +0800

    聊天界面初始版

commit ff3952859f
Merge: 7b44e8a c656856
Author: zcx <1078327420@qq.com>
Date:   Fri May 10 10:15:56 2024 +0800

    Merge branch 'develop' of https://bdgit.educoder.net/mwxbgi697/softegg into 曾晨曦_branch

    # Conflicts:
    #	doc/自由同行-软件需求构思及描述.docx

commit 7b44e8a348
Author: zcx <1078327420@qq.com>
Date:   Fri May 10 10:12:14 2024 +0800

    1

commit 5e48c1f463
Merge: 167bb2d bfb34b1
Author: zcx <1078327420@qq.com>
Date:   Fri May 10 10:10:13 2024 +0800

    Merge branch '曾晨曦_branch' of https://bdgit.educoder.net/mwxbgi697/softegg into 曾晨曦_branch

    # Conflicts:
    #	doc/“自由同行”软件需求规格说明书.docx

commit 167bb2d273
Author: zcx <1078327420@qq.com>
Date:   Fri May 10 10:09:46 2024 +0800

    前端代码初始版

commit e5d3488734
Author: zcx <1078327420@qq.com>
Date:   Sun Mar 31 11:48:46 2024 +0800

    更新

commit bfb34b10a2
Author: zcx <1078327420@qq.com>
Date:   Tue Mar 26 11:15:48 2024 +0800

    需求规格说明书

commit 26f7946e45
Author: zcx <1078327420@qq.com>
Date:   Tue Mar 26 11:08:14 2024 +0800

    1

commit 31f1339042
Merge: 3671794 9d34b69
Author: zcx <1078327420@qq.com>
Date:   Tue Mar 26 11:07:41 2024 +0800

    Merge branch 'develop' of https://bdgit.educoder.net/mwxbgi697/softegg into 曾晨曦_branch

commit 36717942eb
Author: zcx <1078327420@qq.com>
Date:   Thu Mar 21 15:50:06 2024 +0800

    用例图

src/前端/walktofree/src/components/Communication.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="chat-container">
+    <div class="chat">
+      <h2 class="title">聊天室</h2>
+      <div class="chat-box">
+        <div v-for="(message, index) in messages" :key="index" class="message">
+          <span class="sender">{{ message.sender }}：</span>
+          <span class="content">{{ message.content }}</span>
+        </div>
+      </div>
+      <div class="input">
+        <input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息...">
+        <button @click="sendMessage">发送</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  data() {
+    return {
+      messages: [],
+      newMessage: '',
+    };
+  },
+  methods: {
+    async fetchMessages() {
+      try {
+        const response = await axios.get('http://example.com/messages');
+        this.messages = response.data;
+      } catch (error) {
+        console.error('Error fetching messages:', error);
+      }
+    },
+    async sendMessage() {
+      try {
+        await axios.post('http://example.com/messages', {
+          content: this.newMessage,
+          sender: 'Me', // You can replace 'Me' with the sender's name
+        });
+        this.newMessage = ''; // Clear the input field after sending
+        // You might want to fetch messages again here to update the UI with the latest messages
+      } catch (error) {
+        console.error('Error sending message:', error);
+      }
+    },
+    // WebSocket logic to receive messages
+    setupWebSocket() {
+      const ws = new WebSocket('ws://example.com/socket');
+      ws.onmessage = (event) => {
+        const message = JSON.parse(event.data);
+        this.messages.push(message);
+      };
+    },
+  },
+  created() {
+    this.fetchMessages(); // Fetch messages when the component is created
+    this.setupWebSocket(); // Setup WebSocket connection
+  },
+};
+</script>
+
+<style>
+.chat-container {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.chat {
+  border: 2px solid #ccc;
+  border-radius: 10px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* Ensure the chat box takes up the entire height */
+}
+
+.title {
+  margin-top: 0;
+}
+
+.chat-box {
+  flex: 1; /* Allow the chat box to grow and take up remaining space */
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.message {
+  margin-bottom: 10px;
+}
+
+.input {
+  display: flex;
+  margin-top: 10px;
+}
+
+.input input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.input button {
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  background-color: #007bff;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.input button:hover {
+  background-color: #0056b3;
+}
+</style>

src/前端/walktofree/src/router/index.js

@@ -14,6 +14,7 @@ const routes = [
 	{ path: '/message', component: Message },
 	{ path: '/mine', component: Mine },
 	{ path: '/searchPage', component: SearchPage },
+    { path: '/Communication', component: Communication }
 ];  
   
 const router = createRouter({