| 1 |
- import{P as L}from"./index-C0mnMlct.js";import{b$ as N,bJ as S}from"./entry/index-CRWhxBeP.js";import{E as B,ad as E}from"./antd-BfqWtMX3.js";import{d as D,r as I,h as O,c as m,a6 as g,Z as p,a4 as P,a5 as n,$ as t,k as o,u as r,G as c,a0 as u,_ as b,F as W,a7 as A}from"./vue-DM5HGU8Z.js";import"./useContentViewHeight-D9So7_ch.js";import"./useWindowSizeFn-CEueHQop.js";import"./onMountedOrActivated-Ckq_czNf.js";const F={class:"flex"},J={class:"w-1/3 bg-white p-4"},M={class:"flex items-center"},U={class:"flex"},$={class:"w-2/3 bg-white ml-4 p-4"},G={class:"max-h-80 overflow-auto"},R={class:"flex items-center"},Y=D({__name:"index",setup(Z){const x=B.TextArea,s=I({server:"ws://localhost:3300/test",sendValue:"",recordList:[]}),{status:v,data:i,send:_,close:y,open:k}=N(s.server,{autoReconnect:!1,heartbeat:!0});O(()=>{if(i.value)try{const d=JSON.parse(i.value);s.recordList.push(d)}catch(d){s.recordList.push({res:i.value,id:Math.ceil(Math.random()*1e3),time:new Date().getTime()})}});const l=m(()=>v.value==="OPEN"),w=m(()=>l.value?"success":"red"),T=m(()=>[...s.recordList].reverse());function V(){_(s.sendValue),s.sendValue=""}function C(){l.value?y():k()}return(d,e)=>{const h=g("a-input"),f=g("a-button");return p(),P(r(L),{title:"WebSocket 示例"},{default:n(()=>[t("div",F,[t("div",J,[t("div",M,[e[2]||(e[2]=t("span",{class:"text-lg font-medium mr-4"}," 连接状态: ",-1)),o(r(E),{color:w.value},{default:n(()=>[c(u(r(v)),1)]),_:1},8,["color"])]),e[4]||(e[4]=t("hr",{class:"my-4"},null,-1)),t("div",U,[o(h,{value:s.server,"onUpdate:value":e[0]||(e[0]=a=>s.server=a),"addon-before":"服务地址",disabled:""},null,8,["value"]),o(f,{type:l.value?"danger":"primary",onClick:C},{default:n(()=>[c(u(l.value?"关闭连接":"开启连接"),1)]),_:1},8,["type"])]),e[5]||(e[5]=t("p",{class:"text-lg font-medium mt-4"},"设置",-1)),e[6]||(e[6]=t("hr",{class:"my-4"},null,-1)),o(r(x),{placeholder:"需要发送到服务器的内容",disabled:!l.value,value:s.sendValue,"onUpdate:value":e[1]||(e[1]=a=>s.sendValue=a),allowClear:""},null,8,["disabled","value"]),o(f,{type:"primary",block:"",class:"mt-4",disabled:!l.value,onClick:V},{default:n(()=>e[3]||(e[3]=[c(" 发送 ")])),_:1},8,["disabled"])]),t("div",$,[e[8]||(e[8]=t("span",{class:"text-lg font-medium mr-4"}," 消息记录: ",-1)),e[9]||(e[9]=t("hr",{class:"my-4"},null,-1)),t("div",G,[t("ul",null,[(p(!0),b(W,null,A(T.value,a=>(p(),b("li",{class:"mt-2",key:a.time},[t("div",R,[e[7]||(e[7]=t("span",{class:"mr-2 text-primary font-medium"},"收到消息:",-1)),t("span",null,u(r(S)(a.time)),1)]),t("div",null,u(a.res),1)]))),128))])])])])]),_:1})}}});export{Y as default};
|
