从服务器发送的事件制作 HTML 表格

问题描述 投票:0回答:0

我需要在前端不断更新 HTML 表,从后端获取数据。这是我的 golang 后端生成一个随机数,将其放入一个结构中,然后将该结构附加到一个结构片中,并使用 Server Sent Events 将其带到前端:

这样做的结果应该是一堆结构的长片。我希望它在前端,其中结构切片是整个表,切片中的每个结构都是 HTML 表中的一行。

type sliceofRand struct {
    Items []randomData
}

var sliceofRandvar sliceofRand

func formatServerSentEvent(event string, data any) (string, error) {
    m := map[string]any{
        "data": data,
    }

    buff := bytes.NewBuffer([]byte{})

    encoder := json.NewEncoder(buff)

    err := encoder.Encode(m)
    if err != nil {
        return "", err
    }

    sb := strings.Builder{}

    sb.WriteString(fmt.Sprintf("event: %s\n", event))
    sb.WriteString(fmt.Sprintf("data: %v\n\n", buff.String()))

    return sb.String(), nil
}

func SseHandler(w http.ResponseWriter, r *http.Request) {

    flusher, ok := w.(http.Flusher)
    if !ok {
        http.Error(w, "SSE not supported", http.StatusInternalServerError)
        return
    }

    fmt.Println("Request received for price...")

    w.Header().Set("Content-Type", "text/event-stream")

    priceCh := make(chan sliceofRand)

    go func() {
        for {
            number := rand.Intn(100)
            view := randomData{
                Number: number,
                Info: "Random number",
            }

            sliceofRandvar.Items = append(sliceofRandvar.Items, view)

            priceCh <- sliceofRandvar
            time.Sleep(3 * time.Second)
        }
    }()

    for price := range priceCh {
        event, err := formatServerSentEvent("price-update", price)
        if err != nil {
            fmt.Println(err)
            break
        }

        _, err = fmt.Fprint(w, event)
        if err != nil {
            fmt.Println(err)
            break
        }

        flusher.Flush()
    }

}

如您所见,我有一个将数据作为服务器发送事件发送到前端的函数,每次我在单独的 goroutine 中生成一个新的随机数时,我都会将新结构附加到结构列表中,并调用SSE 功能并创建一个新的 SSE。现在我的问题是,我在前端得到这个,我希望所有内容都进入 HTML 表格。

谢谢

================================================= =========

json go html-table server-sent-events
© www.soinside.com 2019 - 2024. All rights reserved.