<html lang="cn"> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="author" content="陶士涵"> <title>GO-FLY即时通讯工具集</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css"> <link rel="stylesheet" href="/static/css/common.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <style> html, body { height: 100%; padding: 0; margin: 0; } body { overflow: hidden; background-color: #f5f5f5; } .el-aside{ height: 100%; background: #fff; border: solid 1px #e6e6e6; } .el-aside .el-menu{ border-right: none; } .mainLogo{ font-size: 20px; font-weight: bold; } .mainMain{ background: #fff; margin-left: 10px; margin-bottom: 60px; } .mainIframe{ width: 100%; height: 100%; } .el-card__body{ cursor: pointer; } </style> </head> <body class="text-center"> <div id="app"> <template> {{template "nav" }} <iframe class="mainIframe" v-bind:src="iframeUrl" frameborder="0"></iframe> </template> </div> </body> <script> new Vue({ el: '#app', delimiters:["<{","}>"], data: { iframeUrl:"", mailTotal:0, adminAvator:"", adminRole:"", }, methods: { openIframeUrl(url){ this.iframeUrl=url; }, //跳转 openUrl(url){ window.location.href=url; }, GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return unescape(r[2]); return null; }, checkAuth(){ let _this=this; $.ajax({ type:"post", url:"/check_auth", headers:{ "token":localStorage.getItem("token") }, success: function(data) { if (data.code != 200) { window.location.href="/login"; } else { _this.adminAvator=data.result.avator; _this.adminRole=data.result.role_name; _this.iframeUrl = "/chat_main"; } } }); } }, created: function () { this.checkAuth(); } }) </script> <script> new Vue({ delimiters:["<{","}>"], data: { websock: null, }, created() { //this.initWebSocket(); }, destroyed() { this.websock.close() //离开路由之后断开websocket连接 }, methods: { initWebSocket(){ //初始化weosocket const wsuri = "ws://127.0.0.1:8080/push_mail"; this.websock = new WebSocket(wsuri); this.websock.onmessage = this.websocketonmessage; this.websock.onopen = this.websocketonopen; this.websock.onerror = this.websocketonerror; this.websock.onclose = this.websocketclose; }, websocketonopen(){ //连接建立之后执行send方法发送数据 // let actions = "ping"; // let _this=this; // setInterval(function(){ // _this.websocketsend(JSON.stringify(actions)); // },10000); }, websocketonerror(){//连接建立失败重连 this.initWebSocket(); }, websocketonmessage(e){ //数据接收 const redata = JSON.parse(e.data); if (redata.code==200){ this.$notify({ title: redata.result.folder_name, message: "新邮件:"+redata.result.new_num, type: 'success', duration: 0, }); } }, websocketsend(Data){//数据发送 this.websock.send(Data); }, websocketclose(e){ //关闭 console.log('断开连接',e); }, }, }); </script> </html>