透過 Server-Sent Events, SSE 把資料往前端送的時侯,很有可能會發生處理 Markdown 格式無法正確顯示。
但是實際上我們從後端(server端)送出的資料格式是正確的,
但前端顯示的Markdown 處理,在針對換行、標記符號(如 * 或 **),可能無法正確呈現。

有換行,所顯示出來的內容是正常的

Server-Sent Events, SSE 換行符號無法

沒有換行符號,格式不正確

Server-Sent Events, SSE 換行符號無法


發生的原因在於 當我們送出資料時,被解析器把換行符號轉成空白了。

一般的程式範例(未解決)如下:
Server-Sent Events, SSE 換行符號無法

假設今天送出 "data: 你好\n\n" 會被轉換為一個 JSON 物件像是 {"data": "你好"} 往前端丟

但是,如果今天要送出的是一個 換行符號\n 時 "data: \n\n\n"

換行符號\n 在 SSE 中被視為結束符號,解析器會將\n之前的所有內容當作一個完整的事件(block)來處理。
{"data": ""}

接下來的\n則被認為是另一個空事件。
{"data": ""}

而前端在處理這個第二個空事件時,會忽略它,因為它不包含有效的資料。

這樣的情況將導致應有的換行效果失效,從而影響 Markdown 的渲染,因為我們希望能在回傳的串流中得到的"換行符號"被轉成"空白"了!

解決方法:

先安裝 orjson
from orjson import orjson

1. 在送出json資料時,進行編碼將 換行符號 \n 轉成 字元的 "\n"

Server-Sent Events, SSE 換行符號無法

2. 在網頁或前端,進行解碼,透過JSON.parse將字元型別的 "\n",再轉回來變成 換行符號 \n

Server-Sent Events, SSE 換行符號無法

即可以解決Markdown炫染不成功的問題。

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 湯瑪的吳 的頭像
    湯瑪的吳

    安達利機車行

    湯瑪的吳 發表在 痞客邦 留言(0) 人氣()