| 1 |
- var A=Object.defineProperty,I=Object.defineProperties;var E=Object.getOwnPropertyDescriptors;var k=Object.getOwnPropertySymbols;var V=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var y=(t,e,a)=>e in t?A(t,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[e]=a,F=(t,e)=>{for(var a in e||(e={}))V.call(e,a)&&y(t,a,e[a]);if(k)for(var a of k(e))L.call(e,a)&&y(t,a,e[a]);return t},C=(t,e)=>I(t,E(e));import{d as O,r as S,h,e as c,I as x,ag as r,aB as N,ar as v,aD as u,at as s,k as l,G as d,au as p,aq as w,F as P,aC as W}from"./vue-vendor-Be68asQ6.js";import{X as $,j as b}from"./antd-vue-vendor-DcqS7Wvq.js";import{P as _}from"./index-X83NmVMq.js";import{bb as M,aX as R,a as U}from"./index-BFfnEkVs.js";import"./useContentHeight-DnE6GxS2.js";import"./useWindowSizeFn-BTSGGcie.js";import"./vxe-table-vendor-DHF2TRpV.js";import"./useContentViewHeight-BVCc9jQl.js";import"./usePageContext-WlOC5VNa.js";import"./injectionKey-DPVn4AgL.js";const X=O({components:{PageWrapper:_,[b.name]:b,InputTextArea:b.TextArea,Tag:$},setup(){const t=S({server:"ws://localhost:3300/test",sendValue:"",recordList:[]}),{status:e,data:a,send:D,close:T,open:B}=M(t.server,{autoReconnect:!1,heartbeat:!0});h(()=>{if(a.value)try{const o=JSON.parse(a.value);t.recordList.push(o)}catch(o){t.recordList.push({res:a.value,id:Math.ceil(Math.random()*1e3),time:new Date().getTime()})}});const n=c(()=>e.value==="OPEN"),m=c(()=>n.value?"success":"red"),i=c(()=>[...t.recordList].reverse());function f(){D(t.sendValue),t.sendValue=""}function g(){n.value?T():B()}return C(F({status:e,formatToDateTime:R},x(t)),{handlerSend:f,getList:i,toggle:g,getIsOpen:n,getTagColor:m})}}),j={class:"flex"},q={class:"w-1/3 bg-white p-4"},G={class:"flex items-center"},J={class:"flex"},z={class:"w-2/3 bg-white ml-4 p-4"},H={class:"max-h-80 overflow-auto"},K={class:"flex items-center"};function Q(t,e,a,D,T,B){const n=r("Tag"),m=r("a-input"),i=r("a-button"),f=r("InputTextArea"),g=r("PageWrapper");return v(),N(g,{title:"WebSocket 示例"},{default:u(()=>[s("div",j,[s("div",q,[s("div",G,[e[2]||(e[2]=s("span",{class:"text-lg font-medium mr-4"}," 连接状态: ",-1)),l(n,{color:t.getTagColor},{default:u(()=>[d(p(t.status),1)]),_:1},8,["color"])]),e[5]||(e[5]=s("hr",{class:"my-4"},null,-1)),s("div",J,[l(m,{value:t.server,"onUpdate:value":e[0]||(e[0]=o=>t.server=o),disabled:""},{addonBefore:u(()=>e[3]||(e[3]=[d(" 服务地址 ")])),_:1},8,["value"]),l(i,{type:t.getIsOpen?"danger":"primary",onClick:t.toggle},{default:u(()=>[d(p(t.getIsOpen?"关闭连接":"开启连接"),1)]),_:1},8,["type","onClick"])]),e[6]||(e[6]=s("p",{class:"text-lg font-medium mt-4"},"设置",-1)),e[7]||(e[7]=s("hr",{class:"my-4"},null,-1)),l(f,{placeholder:"需要发送到服务器的内容",disabled:!t.getIsOpen,value:t.sendValue,"onUpdate:value":e[1]||(e[1]=o=>t.sendValue=o),allowClear:""},null,8,["disabled","value"]),l(i,{type:"primary",block:"",class:"mt-4",disabled:!t.getIsOpen,onClick:t.handlerSend},{default:u(()=>e[4]||(e[4]=[d(" 发送 ")])),_:1},8,["disabled","onClick"])]),s("div",z,[e[9]||(e[9]=s("span",{class:"text-lg font-medium mr-4"}," 消息记录: ",-1)),e[10]||(e[10]=s("hr",{class:"my-4"},null,-1)),s("div",H,[s("ul",null,[(v(!0),w(P,null,W(t.getList,o=>(v(),w("li",{class:"mt-2",key:o.time},[s("div",K,[e[8]||(e[8]=s("span",{class:"mr-2 text-primary font-medium"},"收到消息:",-1)),s("span",null,p(t.formatToDateTime(o.time)),1)]),s("div",null,p(o.res),1)]))),128))])])])])]),_:1})}const ie=U(X,[["render",Q]]);export{ie as default};
|
