【Golang玩转本地大模型实战（二）：基于Golang + Web实现AI对话页面】 ...

---

前言

在上一篇文章中，我们学习了如何通过 Ollama 在本地部署大模型，并使用 Golang 实现了流式与非流式的 API 调用。
本篇将继承实战，目标是打造一个完备的 网页端 AI 对话系统。该系统基于前后端协作，通过 WebSocket 和 SSE（Server-Sent Events）两种流式传输协议，实现模型回复的实时展示效果。
最终实现效果为：
   用户在网页输入题目，模型实时天生回答，前端页面逐字展示，交互体验类似 ChatGPT。
  

---

一、团体实现思绪

本次项目标根本流程如下：

• 用户在前端页面输入题目并提交；
  
• Golang 后端吸收请求，调用本地 Ollama 模型 API；
  
• 模型输出以流式方式返回；
  
• 后端通过 SSE 或 WebSocket 协议，将模型输出逐步推送到前端；
  
• 前端吸收并实时渲染，实现流通的“打字机式”回答效果。
  

---

二、SSE 协议实现的 AI 对话

什么是 SSE？

SSE（Server-Sent Events）是一种基于 HTTP 的单向推送协议，答应服务器连续向浏览器发送数据。

• 特点：
  
  
  
  • 建立在 HTTP 协议之上；
    
  • 天然支持流式传输，顺序性好；
    
  • 实现简单、浏览器原生支持；
    
  • 仅支持服务器向客户端单向推送（不支持客户端主动通讯）；
    
  • 适用于天生式模型这类连续输出的场景。
    
  
  

   结论：SSE 是构建大模型“逐字输出”效果的抱负协议。
  

---

实现流程概述

1. 后端 Golang 服务

main.go文件下：

1. package main
3. import (
4.         "bufio"
5.         "bytes"
6.         "encoding/json"
7.         "fmt"
8.         "net/http"
9. )
11. type ChatRequest struct {
12.         Model    string `json:"model"`
13.         Stream   bool   `json:"stream"`
14.         Messages []struct {
15.                 Role    string `json:"role"`
16.                 Content string `json:"content"`
17.         } `json:"messages"`
18. }
20. func streamChatHandler(w http.ResponseWriter, r *http.Request) {
21.         // 设置SSE响应头
22.         w.Header().Set("Content-Type", "text/event-stream")
23.         w.Header().Set("Cache-Control", "no-cache")
24.         w.Header().Set("Connection", "keep-alive")
26.         // 读取用户提交的问题
27.         userInput := r.URL.Query().Get("question")
28.         if userInput == "" {
29.                 http.Error(w, "missing question param", http.StatusBadRequest)
30.                 return
31.         }
33.         // 准备请求体
34.         reqData := ChatRequest{
35.                 Model:  "deepseek-r1:8b",
36.                 Stream: true,
37.         }
38.         reqData.Messages = append(reqData.Messages, struct {
39.                 Role    string `json:"role"`
40.                 Content string `json:"content"`
41.         }{
42.                 Role:    "user",
43.                 Content: userInput,
44.         })
46.         jsonData, err := json.Marshal(reqData)
47.         if err != nil {
48.                 http.Error(w, "json marshal error", http.StatusInternalServerError)
49.                 return
50.         }
52.         // 调用本地Ollama服务
53.         resp, err := http.Post("http://localhost:11434/api/chat", "application/json", bytes.NewBuffer(jsonData))
54.         if err != nil {
55.                 http.Error(w, "call ollama error", http.StatusInternalServerError)
56.                 return
57.         }
58.         defer resp.Body.Close()
60.         // 流式读取模型输出
61.         scanner := bufio.NewScanner(resp.Body)
62.         flusher, _ := w.(http.Flusher)
64.         for scanner.Scan() {
65.                 line := scanner.Text()
66.                 if line == "" {
67.                         continue
68.                 }
70.                 var chunk struct {
71.                         Message struct {
72.                                 Content string `json:"content"`
73.                         } `json:"message"`
74.                         Done bool `json:"done"`
75.                 }
77.                 if err := json.Unmarshal([]byte(line), &chunk); err != nil {
78.                         continue
79.                 }
81.                 // 通过SSE格式发送到前端
82.                 fmt.Fprintf(w, "data: %s\n\n", chunk.Message.Content)
83.                 flusher.Flush()
85.                 if chunk.Done {
86.                         break
87.                 }
88.         }
89. }
91. func main() {
92.         http.Handle("/", http.FileServer(http.Dir("./static"))) // 静态文件
93.         http.HandleFunc("/chat", streamChatHandler)             // SSE接口
94.         fmt.Println("Server running at http://localhost:8080")
95.         http.ListenAndServe(":8080", nil)
96. }

复制代码

这段代码的主要功能是：

• 提供静态文件服务（网页）
  
  
  
  • 使用 http.FileServer 让浏览器访问 ./static 目录下的 HTML 页面。
    
  
  
• 实现 /chat 接口
  
  
  
  • 吸收前端输入的题目（通过 URL 参数 ?question=xxx）；
    
  • 构造请求体，调用本地 Ollama API（模型推理）；
    
  • 使用 Scanner 流式读取模型输出；
    
  • 将每段输出通过 SSE 协议 推送给前端浏览器，实现打字机式显示效果。
    
  
  

2. 前端页面

在 static 目录下，新建一个简单页面：
static/index.html：
[code]<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>