苏州网站建设布局,仿网易考拉网站建设,目前主要的网络营销方式,巩义网站网站建设WebSocket是一种在单个TCP连接上进行全双工通信的协议#xff0c;允许客户端和服务器之间进行双向实时通信。与Server-Sent Events (SSE)类似#xff0c;WebSocket也能实现实时数据推送#xff0c;但其功能更为强大且灵活。 全双工通信#xff1a;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);}}};交流V B423651
