1

src/前端/src/pages/Communication.vue

@@ -0,0 +1,127 @@
+<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>
+  <div><NavigationBar /></div>
+</template>
+
+<script>
+import axios from 'axios';
+import NavigationBar from '../components/NavigationBar.vue';
+
+export default {
+  data() {
+    return {
+      messages: [],
+      newMessage: '',
+    };
+  },
+  components: {
+      NavigationBar
+  },
+  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>