WebSocket是一種在單個TCP連接上進行全雙工通信的協議，允許客戶端和服務器之間進行雙向實時通信。與Server-Sent Events (SSE)類似，WebSocket也能實現實時數據推送，但其功能更為強大且靈活。
全雙工通信：WebSocket不僅允許服務器向客戶端發送數據，也支持客戶端向服務器發送數據，這樣就構建了一個真正的雙向通道。
持久連接：建立WebSocket連接后，該連接保持打開狀態直到任一端主動關閉，減少了傳統HTTP輪詢或長輪詢造成的資源浪費。
低延遲：由于連接一旦建立，消息可以立即通過此通道傳輸，因此延遲相對較低，適用于對實時性要求較高的應用。
輕量級協議：盡管是基于HTTP握手建立連接，但隨后的數據交換采用二進制幀格式，更高效地傳輸數據。
ProChat 支持非流式和流式數據的展示，可以非常方便接入SSE數據。最新版的ChatGPT，會話交流由原來的SSE數據，改為了WebSocket，可以多客戶端監聽ChatGPT生成的數據。有意思的是，目前wss網絡訪問在國內沒有限制。

添加圖片注釋，不超過 140 字（可選）

添加圖片注釋，不超過 140 字（可選）
那么如何在ProChat中訪問wss連接，并展示呢？
ProChat結果接收的是Response對象，需要自己組裝 Reader 然后讀取它，然后包裹他返回，組件最后接收的依然是一個只包含返回內容的 Stream 流。
例如創建ReadableStream，并返回結果：

const encoder = new TextEncoder();
const readableStream = new ReadableStream({
async start(controller) {
controller.enqueue(encoder.encode(“讀取到的數據”));
controller.close();
},
});
return new Response(readableStream);

創建WebSocket連接，并在onmessage方法中持續監聽來自服務器的消息，添加業務處理邏輯，將接受到的數據持續通過

controller.enqueue()方法添加到ReadableStream中：const ws = new WebSocket(rpsData.wss_url);  
ws.onmessage = (event) => {const newData = JSON.parse(event.data); // 假設服務器發送的是JSON數據var raw = atob(newData.body);raw = raw.substring(5).trim();if (raw == '[DONE]') {ws?.close();} else {try {const result = JSON.parse(raw);const data = result?.message?.content?.parts[0];// 將收到的數據塊通過yield語句傳遞給ReadableStreamcontroller.enqueue(encoder.encode(data.replace(previousData,"")));previousData= dataconst status = result?.message?.status;if (status === 'finished_successfully') {previousData = "";ws?.close();}} catch (error) {console.log(error);}}};

交流+V B423651