我需要在前端不断更新 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 表格。
谢谢
================================================= =========