go vue Server-Send Event(SSE) 示例

Server-Send Events

对于 web 应用来说，有时需要持续接受服务器发过来的数据，例如通知、处理进度等。此时 WebSockets 估计是第一个出现在脑海里的，但是其实有更简单轻便的方式——Server-Send Events（简称 SSE）。SSE 通过 http(s) 链接创建一个单向流。服务器端可以源源不断的向客户端推送数据，客户端意外断开后还可以自动重连，甚至设置重连间隔。

协议格式

Snipaste_2020-04-27_22-04-51.png

SSE 是个纯文本协议，格式表现在服务器端的推送数据上。数据分为四部分 data, event, id, retry。

data: something happend!\n\n

第二个 \n 表示这个 event 结束，可以发给客户端了。第一个 \n 主要是为了有时要传输多行数据时，例如传个 json：

data: {\n
data: "foo": "bar"\n
data: }\n\n

上面都属于 message 这个类型，如果想发送别的类型可以通过 event 字段自定义：

event: close\n
data: play enough\n\n

注意任然需要带上 data 字段。

客户端代码(VUE)

    
    
    
    


    

        Server-Send Event
    
    
    

客户端可以在 url 加上一些参数，但是如果想传大量参数，那就没什么直接的方法了，像 post 那样。只能另想方法，例如先发个 post 请求把数据发到服务器，再 SSE ，并通过 session 或别的将这两者关联。

服务器代码(go)

package main

import (
    "fmt"
    "log"
    "net/http"
    "time"
)

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

    appId := r.URL.Query()["appId"]
    page := r.URL.Query()["page"]
    pageSize := r.URL.Query()["pageSize"]

    w.Header().Set("Content-Type", "text/event-stream")
    w.Header().Set("Cache-Control", "no-cache")
    w.Header().Set("Connection", "keep-alive")
    w.Header().Set("Access-Control-Allow-Origin", "*")

    flusher, ok := w.(http.Flusher)
    if !ok {
        log.Panic("server not support")
    }
    for i := 0; i < 10; i++ {
        time.Sleep(5*time.Second)
        fmt.Fprintf(w, "data: %d%s%s%s\n\n", i, appId[0], page[0], pageSize[0])
        flusher.Flush()
    }
    fmt.Fprintf(w, "event: close\ndata: close\n\n") // 一定要带上data，否则无效
}

func main() {
    http.Handle("/event", http.HandlerFunc(handleSSE))
    http.ListenAndServe(":8000", nil)
}

服务器端必须设置 Content-Type 为 text/event-stream 表明这是个 event 流。no-cache 主要是避免客户端读缓存，keep-alive 保持长链接。

参考

本文严重参考这个博客