善於觀察的朋友一定會敏鋭地發現ChatGPT網頁端是逐句給出問題答案的,同樣,ChatGPT後台Api接口請求中,如果將Stream參數設置為True後,Api接口也可以實現和ChatGPT網頁端一樣的流式返回,進而更快地給到前端用户反饋,同時也可以緩解連接超時的問題。
Server-sent events(SSE)是一種用於實現服務器到客户端的單向通信的協議。使用SSE,服務器可以向客户端推送實時數據,而無需客户端發出請求。
SSE建立在HTTP協議上,使用基於文本的數據格式(通常是JSON)進行通信。客户端通過創建一個EventSource對象來與服務器建立連接,然後可以監聽服務器發送的事件。服務器端可以隨時將事件推送給客户端,客户端通過監聽事件來接收這些數據。
ChatGPT的Server-sent events應用
首先打開ChatGPT網頁端,隨便問一個問題,然後進入網絡選單,清空歷史請求記錄後,進行網絡抓包監聽:
可以看到,在觸發了回答按鈕之後,頁面會往後端的backend-api/conversation對話接口發起請求,但這個接口的通信方式並非傳統的http接口或者Websocket持久化鏈接協議,而是基於EventSteam的事件流一段一段地返回ChatGPT後端模型的返回數據。
為什麼ChatGPT會選擇這種方式和後端Server進行通信?ChatGPT網頁端使用Server-sent events通信是因為這種通信方式可以實現服務器向客户端推送數據,而無需客户端不斷地向服務器發送請求。這種推送模式可以提高應用程序的性能和響應速度,減少了不必要的網絡流量。
與其他實時通信協議(如WebSocket)相比,Server-sent events通信是一種輕量級協議,易於實現和部署。此外,它也具有廣泛的瀏覽器兼容性,並且可以在不需要特殊網絡配置的情況下使用。
在ChatGPT中,服務器會將新的聊天消息推送到網頁端,以便實時顯示新的聊天內容。使用Server-sent events通信,可以輕鬆地實現這種實時更新功能,並確保網頁端與服務器之間的通信效率和穩定性。
説白了,降低成本,提高效率,ChatGPT是一個基於深度學習的大型語言模型,處理自然語言文本需要大量的計算資源和時間。因此,返回響應的速度肯定比普通的讀數據庫要慢的多,Http接口顯然並不合適,因為Http是一次性返回,等待時間過長,而Websocket又過重,因為全雙工通信並不適合這種單項對話場景,所謂單項對話場景,就是對話雙方並不會併發對話,而是串行的一問一答邏輯,同時持久化鏈接也會佔用服務器資源,要知道ChatGPT幾乎可以算是日均活躍用户數全球最高的Web應用了。
效率層面,大型語言模型沒辦法一下子返回所有計算數據,但是可以通過Server-sent events將前面計算出的數據先“推送”到前端,這樣用户也不會因為等待時間過長而關閉頁面,所以ChatGPT的前端觀感就是像打字機一樣,一段一段的返回答案,這種“邊計算邊返回”的生成器模式也提高了ChatGPT的回答效率。
Python3.10實現Server-sent events應用
這裏我們使用基於Python3.10的Tornado異步非阻塞框架來實現Server-sent events通信。
首先安裝Tornado框架
pip3 install tornado==6.1
隨後編寫sse\_server.py:
import tornado.ioloop
import tornado.web
push_flag = True
from asyncio import sleep
class ServerSentEvent(tornado.web.RequestHandler):
def __init__(self, *args, **kwargs):
super(ServerSentEvent, self).__init__(*args, **kwargs)
self.set_header('Content-Type', 'text/event-stream')
self.set_header('Access-Control-Allow-Origin', "*")
self.set_header("Access-Control-Allow-Headers","*")
# 請求方式
self.set_header("Access-Control-Allow-Methods","*")
# 斷開連接
def on_finish(self):
print("斷開連接")
return super().on_finish()
async def get(self):
print("建立鏈接")
while True:
if push_flag:
print("開始")
self.write("event: message\n");
self.write("data:" + "push data" + "\n\n");
self.flush()
await sleep(2)
建立好推送路由類ServerSentEvent,它繼承Tornado內置的視圖類tornado.web.RequestHandler,首先利用super方法調用父類的初始化方法,設置跨域,如果不使用super,會將父類同名方法重寫,隨後建立異步的get方法用來鏈接和推送消息,這裏使用Python原生異步的寫法,每隔兩秒往前端推送一個事件message,內容為push data。
注意,這裏只是簡單的推送演示,真實場景下如果涉及IO操作,比如數據庫讀寫或者網絡請求之類,還需要單獨封裝異步方法。
另外這裏假定前端onmessage處理程序的事件名稱為message。如果想使用其他事件名稱,可以使用前端addEventListener來訂閲事件,最後消息後必須以兩個換行為結尾。
隨後編寫路由和服務實例:
def make_app():
return tornado.web.Application([
(r"/sse/data/", ServerSentEvent),
])
if __name__ == "__main__":
app = make_app()
app.listen(8000)
print("sse服務啓動")
tornado.ioloop.IOLoop.current().start()
隨後在後台運行命令:
python3 sse_server.py
程序返回:
PS C:\Users\liuyue\www\videosite> python .\sse_server.py
sse服務啓動
至此,基於Tornado的Server-sent events服務就搭建好了。
前端Vue.js3鏈接Server-sent events服務
客户端我們使用目前最流行的Vue.js3框架:
sse_init:function(){
var push_data = new EventSource("http://localhost:8000/sse/data/")
push_data.onopen = function (event) {
// open事件
console.log("EventSource連接成功");
};
push_data.onmessage = function (event) {
try {
console.log(event);
} catch (error) {
console.log('EventSource結束消息異常', error);
}
};
push_data.onerror = function (error) {
console.log('EventSource連接異常', error);
};
}
這裏在前端的初始化方法內建立EventSource實例,通過onmessage方法來監聽後端的主動推送:
可以看到,每隔兩秒鐘就可以訂閲到後端的message事件推送的消息,同時,SSE默認支持斷線重連,而全雙工的WebSocket協議則需要自己在前端實現,高下立判。
結語
不僅僅可以實現ChatGPT的流式返回功能,SSE在Web應用程序中的使用場景非常廣泛,例如實時的新聞推送、實時股票報價、在線遊戲等等,比起輪詢和長輪詢,SSE更加高效,因為只有在有新數據到達時才會發送;同時SSE支持自定義事件和數據,具有更高的靈活性和複用性,為流式數據返回保駕護航,ChatGPT的最愛,誰不愛?最後奉上項目地址,與眾鄉親同饗:github.com/zcxey2911/sse\_tornado6\_vuejs3