VUE3和SpringBoot实现ChatGPT页面打字效果SSE流式数据展示

<template>
  <div class="chat-container">
    <!-- 聊天信息列表 -->
    <ul class="chat-list">
      <li v-for="message in messages" :key="message.id">
        <span class="message-user">{{ message.user }}</span>
        <span class="message-content">{{ message.content }}</span>
      </li>
    </ul>
    <!-- 输入框和发送按钮 -->
    <input v-model="input" type="text" placeholder="Enter your message" />
    <button @click="sendMessage">Send</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const messages = ref([]);
    const input = ref('');
 
    // 建立SSE连接
    const eventSource = new EventSource('/sse');
 
    eventSource.onmessage = event => {
      const newMessage = JSON.parse(event.data);
      messages.value.push(newMessage);
    };
 
    // 发送消息到服务器
    function sendMessage() {
      fetch('/message', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: input.value })
      }).then(() => (input.value = ''));
    }
 
    // 清理工作
    eventSource.onerror = () => {
      eventSource.close();
    };
 
    return { messages, input, sendMessage };
  }
};
</script>
 
<style>
.chat-container {
  /* 样式内容 */
}
.chat-list {
  /* 样式内容 */
}
.message-user {
  /* 样式内容 */
}
.message-content {
  /* 样式内容 */
}
/* 其他样式 */
</style>

后端SpringBoot代码示例：

@Controller
public class ChatController {
 
    @GetMapping("/sse")
    public ResponseEntity<StreamingResponseBody> serverSentEvents() {
        return ResponseEntity.ok().body(outputStream -> {
            while (true) { // 模拟持续的服务器发送事件
                // 从其他源或服务获取消息
                String message = "{\"user\":\"user\",\"content\":\"message content\"}";
                try {
                    outputStream.write((message + "\n").getBytes(StandardCharsets.UTF_8));
                } catch (IOException e) {
                    e.printStackTrace();
                }
                // 这里可以添加延时或其他逻辑
            }
        });
    }
 
    @PostMapping("/message")
    public ResponseEntity<String> postMessage(@RequestBody Message message) {
        // 处理接收到的消息，并返回响应
        return ResponseEntity.ok("Message received");
    }
 
    static class Message {
        private String content;
        // getters and setters
    }
}

这个代码示例展示了如何在Vue 3和Spring Boot中实现一个简单的SSE服务器发送事件的聊天页面。前端使用Vue 3的<script setup>语法