go server
1
| data: something happend!\n\n
|
第二个 \n 表示这个 event 结束，可以发给客户端了。第一个 \n 主要是为了有时要传输多行数据时，例如传个 json：
1
2
3
| data: {\n
data: "foo": "bar"\n
data: }\n\n
|
上面都属于 message 这个类型，如果想发送别的类型可以通过 event 字段自定义：
1
2
| event: close\n
data: play enough\n\n
|
注意仍然需要带上 data 字段。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| 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")
}
func main() {
http.Handle("/event", http.HandlerFunc(handleSSE))
http.ListenAndServe(":8000", nil)
}
|
vue client
客户端可以在 url 加上一些参数，但是如果想传大量参数，那就没什么直接的方法了，像 post 那样。只能另想方法，例如先发个 post 请求把数据发到服务器，再 SSE ，并通过 session 或别的将这两者关联。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Server-Send Event</title>
</head>
<body>
<div id="app">
<button @click="create">Server-Send Event</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
page: 1,
pageSize: 30,
appId: 10003,
},
methods: {
create: function() {
let url = 'http://localhost:8000/event?page='+this.page+'&pageSize='+this.pageSize+'&appId='+this.appId
let es = new EventSource(url);
es.addEventListener('message', event => {
console.log(event.data);
});
es.addEventListener('error', event => {
if (event.readyState == EventSource.CLOSED) {
console.log('event was closed');
};
});
es.addEventListener('close', event => {
console.log(event.type);
es.close();
});
}
},
})
</script>
</body>
<script>
</script>
</html>
|
vue client post
利用addEventListener监听事件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
startConv: function () {
let url = 'http://localhost:8000/conv'
let body = {
"content": this.question,
"parent_message_id": this.parentMessageID,
"conversation_id": this.conversationId
}
console.log(body)
var source = new SSE(url, {
headers: { 'Content-Type': 'application/json', 'Accept': 'text/event-stream' },
payload: JSON.stringify(body)
});
this.answer = ''
source.addEventListener('message', e => {
if (e.data != '[DONE]' && e.data != '[DONE]event: closeclose') {
var payload = JSON.parse(e.data);
if (payload !== undefined) {
this.conversationId = payload.conversation_id
this.parentMessageID = payload.message.id
this.answer = payload.message.content.parts[0]
}
}
});
source.stream();
}
|