| 1 |
- (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-17d1790f"],{3638:function(e,t,s){},"47f0":function(e,t,s){"use strict";s.r(t);var n=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{attrs:{id:"Layout"}},[s("el-container",[s("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),s("el-container",[s("el-header",{staticStyle:{"background-color":"rgb(245, 245, 245)","border-bottom":"1px solid grey"}},[s("h3",[e._v("聊天广场")])]),s("el-main",{staticStyle:{"background-color":"rgb(244, 245, 247)","min-height":"700px","max-height":"700px"}},[s("div",{staticStyle:{"padding-left":"10px","line-height":"normal"},attrs:{id:"chatContent"}},e._l(e.messages,(function(t,n){return s("el-scrollbar",{key:n},[t.sender!==e.senderName?s("div",{ref:"scrollbar",refInFor:!0,staticClass:"chat-message",staticStyle:{"background-color":"white","margin-top":"20px","box-shadow":"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"},attrs:{id:"ChatContentCard"}},[s("el-avatar",{attrs:{size:40,src:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"}}),s("div",{staticClass:"message-content",staticStyle:{width:"100%"}},[s("div",{staticStyle:{"text-align":"left","text-indent":"1em"}},[e._v(" "+e._s(t.sender))]),s("div",{attrs:{id:"chatContentText"}},[e._v(e._s(t.text))])])],1):e._e(),t.sender===e.senderName?s("div",{ref:"scrollbar",refInFor:!0,attrs:{id:"myChatContentCard"}},[s("el-avatar",{attrs:{size:40,src:"https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"}}),s("div",{staticClass:"message-content",staticStyle:{width:"100%"}},[s("div",{staticStyle:{"text-align":"left","text-indent":"1em"}},[e._v(" "+e._s(t.sender))]),s("div",{attrs:{id:"chatContentText"}},[e._v(e._s(t.text))])])],1):e._e()])})),1)]),s("el-footer",{staticStyle:{height:"190px","background-color":"rgb(244, 245, 247)"}},[s("div",{staticStyle:{"background-color":"rgb(244, 245, 247)",height:"35px","margin-bottom":"10px"},attrs:{id:"Gadget"}},[s("el-upload",{ref:"upload",staticClass:"upload-demo",staticStyle:{float:"left"},attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,"auto-upload":!1}},[s("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[s("i",{staticClass:"el-icon-picture-outline-round"})]),s("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:e.submitUpload}},[e._v("上传到服务器")])],1)],1),s("el-form",{staticStyle:{"background-color":"rgb(244, 245, 247)",height:"80%",width:"100%",position:"relative"},nativeOn:{submit:function(t){return t.preventDefault(),e.sendMessage(t)}}},[s("el-input",{staticStyle:{height:"100%","max-height":"60px"},attrs:{rows:"4",resize:"none",type:"textarea",placeholder:"请输入内容......."},on:{keyup:function(t){return!t.type.indexOf("key")&&e._k(t.keyCode,"enter",13,t.key,"Enter")?null:e.sendMessage(t)}},model:{value:e.messageInput,callback:function(t){e.messageInput=t},expression:"messageInput"}}),s("div",{staticStyle:{"text-align":"right","background-color":"rgb(244, 245, 247)","margin-top":"34px"}},[s("el-button",{attrs:{type:"primary"},on:{click:e.sendMessage}},[e._v("发送")])],1)],1)],1)],1)],1)],1)},o=[],a=(s("14d9"),s("b64b"),s("498a"),s("852e")),r=s.n(a),i={computed:{senderName:function(){return r.a.get("account")||"游客"}},name:"App",data:function(){return{messages:[],messageInput:"",ws:null,fileList:[]}},mounted:function(){this.initWebSocket()},beforeDestroy:function(){this.closeWebSocket()},methods:{initWebSocket:function(){var e=this;function t(e){try{JSON.parse(e)}catch(t){return!1}return!0}this.ws=new WebSocket("ws://192.168.3.21:8002/ws"),this.ws.onopen=function(){console.log("Connected to server.")},this.ws.onmessage=function(s){try{var n;n=t(s.data)?JSON.parse(s.data):{text:s.data},e.messages.push({sender:n.sender||"Anonymous",text:n.text}),e.$nextTick((function(){e.$refs.scrollbar}))}catch(o){console.error("Error parsing message:",o)}},this.ws.onerror=function(e){console.error("WebSocket error:",e)},this.ws.onclose=function(){console.log("Disconnected from server.")}},sendMessage:function(){console.log("调用sendMessage");var e=r.a.get("account");console.log(e,"发送者"),null===e&&(this.senderName="游客"),""!==this.messageInput.trim()&&(this.ws.send("[CHAT]["+(new Date).getTime()+"][大帅子][建升][2]"),this.messageInput="")},closeWebSocket:function(){this.ws&&this.ws.readyState===WebSocket.OPEN&&this.ws.close()},submitUpload:function(){this.$refs.upload.submit()},handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}},c=i,l=(s("bf0a"),s("2877")),d=Object(l["a"])(c,n,o,!1,null,"e2d35814",null);t["default"]=d.exports},bf0a:function(e,t,s){"use strict";s("3638")}}]);
|
