vue 集成ollama流式输出

### 集成 Ollama 实现 Vue 流式输出 为了在 Vue 项目中集成 Ollama 并实现流式输出，主要步骤包括设置 WebSocket 连接来处理实时数据传输以及构建前端组件用于展示这些动态更新的信息。 #### 设置 WebSocket 客户端连接 WebSocket 是一种通信协议，允许服务器主动向客户端推送消息。对于 Ollama 的流式 API 调用来说非常适合。下面是一个基于 JavaScript 原生 WebSocket 对象的例子： ```javascript // src/utils/websocket.js export function createOllamaSocket(url, onMessageCallback) { const socket = new WebSocket(url); socket.onmessage = (event) => { try { let data = JSON.parse(event.data); onMessageCallback(data); // 将收到的数据传递给回调函数 } catch (error) { console.error('Error parsing message:', error); } }; return socket; } ``` 此代码片段创建了一个名为 `createOllamaSocket` 函数，它接受两个参数：一个是目标 URL；另一个是用来处理传入消息的回调函数[^2]。 #### 构建 Vue 组件显示流式响应 接下来，在 Vue 中定义一个简单的聊天界面组件，该组件能够接收来自 WebSocket 的消息并将其渲染到页面上。 ```html <!-- src/components/OllamaChat.vue --> <template> <div class="chat-container"> <ul id="messages-list"> <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li> </ul> <!-- 输入框和发送按钮 --> <input type="text" v-model="newMessageText"/> <button @click="sendMessage">Send</button> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import { createOllamaSocket } from '../utils/websocket'; const wsUrl = "ws://your-ollama-server-url"; // 替换成实际地址 let webSocket; const messages = ref([]); const newMessageText = ref(''); onMounted(() => { webSocket = createOllamaSocket(wsUrl, handleIncomingMessages); }); function sendMessage() { if (!webSocket || !newMessageText.value.trim()) return; // 发送新消息至服务端 webSocket.send(JSON.stringify({ text: newMessageText.value })); } function handleIncomingMessages(messageData) { messages.value.push(`Server says: ${JSON.stringify(messageData)}`); } </script> <style scoped> .chat-container { display: flex; flex-direction: column; height: 100%; } #messages-list { list-style-type: none; padding-left: 0; overflow-y: auto; margin-bottom: 8px; } </style> ``` 这段代码展示了如何通过 WebSocket 向后端发送用户输入的消息，并监听从 Ollama 返回的结果，最后把这些结果添加到列表里以便于查看[^3]。