UniversalTestSoftware/client/nginx/html/js/chunk-10103844.a70b8f49.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-10103844"],{2065:function(t,e,s){"use strict";s.r(e);var n=function(){var t=this,e=t._self._c;return e("div",{staticClass:"chat-container"},[e("h1",[t._v("Vue 2 WebSocket 聊天 (带自动重连)")]),e("div",{staticClass:"client-info"},[t._v(" 你的身份: "),e("span",{staticClass:"identity"},[t._v(t._s(t.clientId||"连接中..."))]),e("span",{staticClass:"connection-status",class:t.statusClass},[t._v(t._s(t.connectionStatus))])]),e("div",{ref:"messageArea",staticClass:"message-area"},t._l(t.messages,(function(s,n){return e("div",{key:n,class:s.isSystem?"system-message":"user-message"},[t._v(" "+t._s(s.content)+" ")])})),0),e("div",{staticClass:"input-area"},[e("input",{directives:[{name:"model",rawName:"v-model",value:t.message,expression:"message"}],attrs:{type:"text",placeholder:"输入消息，按Enter发送...",disabled:!t.isConnected},domProps:{value:t.message},on:{keyup:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.sendMessage.apply(null,arguments)},input:function(e){e.target.composing||(t.message=e.target.value)}}}),e("button",{attrs:{disabled:!t.isConnected||!t.message.trim()},on:{click:t.sendMessage}},[t._v("发送")]),e("button",{attrs:{disabled:t.isConnecting},on:{click:t.toggleConnection}},[t._v(" "+t._s(t.isConnected?"断开连接":"连接")+" ")])])])},c=[],i=(s("14d9"),{data(){return{websocket:null,isConnected:!1,isConnecting:!1,reconnectTimer:null,reconnectInterval:3e3,maxReconnectAttempts:10,reconnectAttempts:0,messages:[],message:"",clientId:"",connectionStatus:"未连接"}},computed:{statusClass(){return this.isConnected?"status-connected":this.isConnecting?"status-connecting":"status-disconnected"}},mounted(){this.connect()},beforeDestroy(){this.clearReconnectTimer(),this.disconnect(!0)},methods:{toggleConnection(){this.isConnected?this.disconnect(!0):(this.reconnectAttempts=0,this.connect())},connect(){if(!this.isConnected&&!this.isConnecting){this.isConnecting=!0,this.connectionStatus="正在连接...",this.addSystemMessage("正在连接服务器...");try{const t="https:"===window.location.protocol?"wss:":"ws:",e=window.location.host,s=`${t}//${e}/universaltestsoftware_client_api/ws/message`;this.websocket=new WebSocket(s),this.websocket.onopen=()=>{this.isConnected=!0,this.isConnecting=!1,this.reconnectAttempts=0,this.connectionStatus="已连接",this.addSystemMessage("已成功连接到服务器"),this.clearReconnectTimer()},this.websocket.onmessage=t=>{const e=t.data;if(this.addMessage(e,!1),!this.clientId&&e.startsWith("系统消息: 用户 ")&&e.includes(" 已加入聊天")){const t="系统消息: 用户 ".length,s=e.indexOf(" 已加入聊天");this.clientId=e.substring(t,s)}},this.websocket.onclose=t=>{t.code;this.isConnected=!1,this.isConnecting=!1,this.connectionStatus="已断开",this.addSystemMessage(`连接已关闭 (代码: ${t.code}, 原因: ${t.reason||"未知"})`),this.manualDisconnect||this.maxReconnectAttempts&&!(this.reconnectAttempts<this.maxReconnectAttempts)||this.scheduleReconnect()},this.websocket.onerror=t=>{this.isConnecting=!1,this.connectionStatus="连接错误",this.addSystemMessage("连接发生错误: "+(t.message||"未知错误")),console.error("WebSocket错误:",t),this.manualDisconnect||this.maxReconnectAttempts&&!(this.reconnectAttempts<this.maxReconnectAttempts)||this.scheduleReconnect()}}catch(t){this.isConnecting=!1,this.connectionStatus="连接失败",this.addSystemMessage("连接失败: "+t.message),console.error("连接异常:",t),this.manualDisconnect||this.maxReconnectAttempts&&!(this.reconnectAttempts<this.maxReconnectAttempts)||this.scheduleReconnect()}}},disconnect(t=!1){if(this.manualDisconnect=t,this.isConnected||this.isConnecting)try{this.websocket&&(this.websocket.close(1e3,t?"手动关闭":"正常关闭"),this.websocket=null),this.isConnected=!1,this.isConnecting=!1,this.connectionStatus="已断开",t&&this.addSystemMessage("已手动断开连接")}catch(e){console.error("断开连接异常:",e),this.addSystemMessage("断开连接时发生错误")}},scheduleReconnect(){if(this.clearReconnectTimer(),this.maxReconnectAttempts&&this.reconnectAttempts>=this.maxReconnectAttempts)return void this.addSystemMessage(`已达到最大重连次数(${this.maxReconnectAttempts})，请手动重试`);this.reconnectAttempts++;const t=this.reconnectAttempts,e=this.reconnectInterval;this.addSystemMessage(`将在 ${e/1e3} 秒后进行第 ${t} 次重连...`),this.reconnectTimer=setTimeout(()=>{this.addSystemMessage(`正在进行第 ${t} 次重连...`),this.connect()},e)},clearReconnectTimer(){this.reconnectTimer&&(clearTimeout(this.reconnectTimer),this.reconnectTimer=null)},sendMessage(){if(this.isConnected&&this.message.trim())try{this.websocket.send(this.message.trim()),this.message=""}catch(t){console.error("发送消息失败:",t),this.addSystemMessage("发送消息失败，请重试")}},addMessage(t,e=!1){this.messages.push({content:t,isSystem:e}),this.scrollToBottom()},addSystemMessage(t){this.addMessage("系统消息: "+t,!0)},scrollToBottom(){this.$nextTick(()=>{const t=this.$refs.messageArea;t&&(t.scrollTop=t.scrollHeight)})}}}),o=i,a=(s("3662"),s("2877")),h=Object(a["a"])(o,n,c,!1,null,"8c4ff588",null);e["default"]=h.exports},3662:function(t,e,s){"use strict";s("5e07")},"5e07":function(t,e,s){}}]);
//# sourceMappingURL=chunk-10103844.a70b8f49.js.map