ProChat 如何接入 WebSocket

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);}}};