<template>
  <view class="content">
    <input type="text" v-model="inputMessage" placeholder="Type your message" />
    <button @click="sendMessage">Send</button>
    <view>
      <!-- 显示完整拼接后的消息 -->
      <text class="message-text">{{ concatenatedMessage }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputMessage: '',
      messages: [], // 用于存储每条单独的消息
      concatenatedMessage: '', // 用于存储拼接后的消息
      websocket: null,
    };
  },
  onReady() {
    this.connectWebSocket();
  },
  methods: {
    connectWebSocket() {
      // 创建 WebSocket 连接
      this.websocket = uni.connectSocket({
        url: 'ws://localhost:8000/api/chat', // 替换为你的后端 WebSocket URL
        success: () => {
          console.log('WebSocket connection created.');
        },
        fail: (err) => {
          console.error('Failed to create WebSocket connection:', err);
        }
      });

      // 监听 WebSocket 连接成功事件
      this.websocket.onOpen(() => {
        console.log('WebSocket connected.');
      });

      // 监听 WebSocket 消息接收事件
      this.websocket.onMessage((res) => {
        console.log('Received message:', res.data);
        this.messages.push(res.data); // 将新消息存入消息数组
        this.updateConcatenatedMessage(); // 更新拼接后的消息
      });

      // 监听 WebSocket 连接关闭事件
      this.websocket.onClose(() => {
        console.log('WebSocket connection closed.');
      });

      // 监听 WebSocket 错误事件
      this.websocket.onError((err) => {
        console.error('WebSocket error:', err);
      });
    },
    updateConcatenatedMessage() {
      // 通过换行符将消息数组中的所有消息拼接成一段话
      this.concatenatedMessage = this.messages.join('');
    },
    sendMessage() {
      if (this.websocket && this.inputMessage) {
        this.websocket.send({
          data: this.inputMessage,
          success: () => {
            console.log('Message sent:', this.inputMessage);
            this.inputMessage = ''; // 清空输入框
          },
          fail: (err) => {
            console.error('Failed to send message:', err);
          }
        });
      }
    }
  }
};
</script>

<style>
.content {
  padding: 20px;
}
input {
  width: 80%;
  padding: 10px;
  margin-bottom: 10px;
}
button {
  padding: 10px 20px;
}
.message-text {
  display: block;
  margin-top: 5px;
  white-space: pre-wrap; /* 保留换行格式 */
  word-wrap: break-word; /* 自动换行 */
  word-break: break-word; /* 单词太长时允许在单词内换行 */
  overflow-wrap: break-word; /* 溢出时换行，修复不同浏览器兼容性问题 */
  max-width: 100%; /* 限制宽度 */
  text-align: justify; /* 两端对齐 */
}
</style>

uvicorn main:app --reload --host 0.0.0.0 --port 8000

后端启动代码 python