Websocket、SSE（Server-Sent Events）和長輪詢（Long Polling）都是用于網(wǎng)頁和服務(wù)端通信的技術(shù)。

Websocket是一種全雙工通信協(xié)議，能夠?qū)崿F(xiàn)客戶端和服務(wù)端之間的實時通信。它基于TCP協(xié)議，并且允許服務(wù)器主動向客戶端推送數(shù)據(jù)，同時也允許客戶端向服務(wù)器發(fā)送數(shù)據(jù)。

(資料圖)

SSE是一種單向通信協(xié)議，允許服務(wù)器向客戶端推送數(shù)據(jù)，但不支持客戶端向服務(wù)器發(fā)送數(shù)據(jù)。SSE建立在HTTP協(xié)議上，通過在HTTP響應(yīng)中使用特殊的Content-Type和事件流（event stream）格式來實現(xiàn)。

長輪詢是一種技術(shù)，客戶端向服務(wù)器發(fā)送一個請求，并且服務(wù)器保持連接打開直到有數(shù)據(jù)可以返回給客戶端。如果在指定的時間內(nèi)沒有數(shù)據(jù)可用，則服務(wù)器會關(guān)閉連接，客戶端需要重新建立連接并再次發(fā)起請求。

New Bing聊天頁面是通過WebSocket進(jìn)行通信。

Open AI的ChatGPT接口則是通過SSE協(xié)議由服務(wù)端推送數(shù)據(jù)

事實上，以上幾種方式包括長輪詢，都可以實現(xiàn)逐字顯示的效果。那還有沒有其他的辦法可以實現(xiàn)這種效果了呢？

當(dāng)客戶端返回流的時候，客戶端可以實時捕獲到返回的信息，并不需要等全部Response結(jié)束了再處理。

下面就用ASP.NET Core Web API作為服務(wù)端實現(xiàn)流式響應(yīng)。

服務(wù)端

[HttpPost("text")]public async Task Post(){    string filePath = "文檔.txt";    Response.ContentType = "application/octet-stream";    var reader = new StreamReader(filePath);    var buffer = new Memory(new char[5]);    int writeLength = 0;    //每次讀取5個字符寫入到流中    while ((writeLength = await reader.ReadBlockAsync(buffer)) > 0)    {        if (writeLength < buffer.Length)        {        buffer = buffer[..writeLength];        }        await Response.WriteAsync(buffer.ToString());        await Task.Delay(100);    }}

客戶端

public async void GetText(){    var url = "http://localhost:5000/config/text";    var client = new HttpClient();    using HttpRequestMessage httpRequestMessage = new HttpRequestMessage(HttpMethod.Post, url);    var response = await client.SendAsync(httpRequestMessage, HttpCompletionOption.ResponseHeadersRead);    await using var stream = await response.Content.ReadAsStreamAsync();    var bytes = new byte[20];    int writeLength = 0;    while ((writeLength = stream.Read(bytes, 0, bytes.Length)) > 0)    {    Console.Write(Encoding.UTF8.GetString(bytes, 0, writeLength));    }    Console.WriteLine();    Console.WriteLine("END");}

HttpCompletionOption枚舉有兩個值，默認(rèn)情況下使用的是ResponseContentRead

ResponseContentRead：等到整個響應(yīng)完成才完成操作

ResponseHeadersRead：一旦獲取到響應(yīng)頭即完成操作，不用等到整個內(nèi)容響應(yīng)

<script>    var div = document.getElementById("content")    var url = "http://localhost:5000/config/text"    var client = new XMLHttpRequest()    client.open("POST", url)    client.onprogress = function (progressEvent) {        div.innerText = progressEvent.target.responseText    }    client.onloadend = function (progressEvent) {        div.append("END")    }    client.send()</script>

用axios請求就是監(jiān)聽onDownloadProgress 了。

瀏覽器是通過Response Header中的Content-Type來解析服務(wù)端響應(yīng)體的。如果后端接口沒有設(shè)置Response.ContentType = "application/octet-stream"，onprogress只會在響應(yīng)全部完成后觸發(fā)。

服務(wù)端

[HttpGet("img")]public async Task Stream(){    string filePath = "pixelcity.png";    new FileExtensionContentTypeProvider().TryGetContentType(filePath, out string contentType);    Response.ContentType = contentType ?? "application/octet-stream";    var fileStream = System.IO.File.OpenRead(filePath);    var bytes = new byte[1024];    int writeLength = 0;    while ((writeLength = fileStream.Read(bytes, 0, bytes.Length)) > 0)    {        await Response.Body.WriteAsync(bytes, 0, writeLength);        await Task.Delay(100);    }}

關(guān)鍵詞：