@gonsin/gview 1.0.1

package/src/views/Login.vue

@@ -0,0 +1,249 @@
+<!--
+ * @Author: your name
+ * @Date: 2020-06-30 18:26:00
+ * @LastEditTime: 2022-11-07 17:31:24
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @Description: In User Settings Edit
+ * @FilePath: \client\src\views\Login.vue
+-->
+<template>
+    <!-- 登录页面 -->
+    <div class="login" :style="back">
+        <div class="login_box">
+            <div class="logo" :style="logo"></div>
+            <div class="form">
+                <el-form :model="form" ref="form" :rules="formRules">
+                    <el-form-item prop="username">
+                        <el-input
+                            placeholder="请输入用户名"
+                            v-model.trim="form.username"
+                            onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item prop="password">
+                        <el-input
+                            type="password"
+                            placeholder="请输入密码"
+                            v-model.trim="form.password"
+                            onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"
+                        ></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button
+                            type="primary"
+                            style="width: 100%"
+                            @click="loginHandle('form')"
+                            >登录</el-button
+                        >
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+// import CommonForm from '../components/CommonForm';
+import { setLogin } from "../websocket/test";
+export default {
+    components: {
+        // CommonForm,
+    },
+    data() {
+        return {
+            sessionId: sessionStorage.getItem("sessionId"),
+            loginUrl: "/api/handle_login",
+            form: {
+                username: "",
+                password: "",
+            },
+            formRules: {
+                username: [
+                    {
+                        required: true,
+                        message: "请输入用户名",
+                        trigger: "blur",
+                    },
+                    {
+                        pattern: /^[_a-zA-Z0-9\s+]{1,255}$/,
+                        message: "您输入的用户名格式不合法",
+                        trigger: "blur",
+                    },
+                ],
+                password: [
+                    {
+                        required: true,
+                        message: "请输入密码",
+                        trigger: "blur",
+                    },
+                    {
+                        pattern: /^[_a-zA-Z0-9\s+]{1,255}$/,
+                        message: "您输入的密码格式不合法",
+                        trigger: "blur",
+                    },
+                ],
+            },
+            // 为了解决线上打包路径解析错误加载不出的问题，这里使用node中提供的方法
+            back: {
+                backgroundImage:
+                    "url(" + require("../../public/imgs/bg.png") + ")",
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "100% 100%",
+            },
+            logo: {
+                backgroundImage:
+                    "url(" + require("../../public/imgs/logo.png") + ")",
+                backgroundRepeat: "no-repeat",
+                backgroundSize: " 100%",
+            },
+        };
+    },
+    mounted() {
+        window.addEventListener("keydown", (e) => {
+            if (e.keyCode == 13) {
+                // this.handleEnterLogin()
+                this.loginHandle("form");
+            }
+        });
+    },
+    methods: {
+        /**
+                 * @description: 登录处理：1、成功后将res.data保存至sessionStorage中,key名：user
+                                            2、建立websocket连接 
+                 * @param {type} 
+                 * @return: 
+                 */
+        loginHandle(formName) {
+            this.$refs[formName].validate((valida) => {
+                if (valida) {
+                    this.$api
+                        .handleLogin({
+                            username: this.form.username,
+                            password: this.form.password,
+                        })
+                        .then((res) => {
+                            switch (res.data.state) {
+                                case 200:
+                                    // console.log(res)
+                                    sessionStorage.setItem(
+                                        "user",
+                                        JSON.stringify(res.data.data)
+                                    );
+                                    this.saveAdminState();
+                                    setLogin(true);
+                                    this.$parent.getPermissions((list) => {
+                                        let arr = res.data.data.permissions;
+                                        if (list.length != 0) {
+                                            let url = "";
+                                            arr.forEach((target) => {
+                                                let filterList =
+                                                    list[0].children.filter(
+                                                        (ele) => {
+                                                            return (
+                                                                ele.name ==
+                                                                target
+                                                            );
+                                                        }
+                                                    );
+                                                if (filterList.length != 0) {
+                                                    if (url == "") {
+                                                        url =
+                                                            "/" +
+                                                            filterList[0].url;
+                                                    }
+                                                    return false;
+                                                }
+                                            });
+                                            sessionStorage.setItem(
+                                                "menu",
+                                                JSON.stringify(list)
+                                            );
+                                            this.$router.push({
+                                                path: url,
+                                            });
+                                        }
+                                    });
+                                    break;
+                                case 303:
+                                    this.$alert("密码错误，请重试", "提示", {
+                                        confirmButtonText: "确定",
+                                        type: "warning",
+                                    });
+                                    break;
+                                case 307:
+                                    this.$alert(
+                                        "您的帐号已被冻结，请联系管理员处理",
+                                        "提示",
+                                        {
+                                            confirmButtonText: "确定",
+                                            type: "warning",
+                                        }
+                                    );
+                                    break;
+                                case 404:
+                                    this.$alert(
+                                        "您输入的账号不存在，请联系管理员",
+                                        "提示",
+                                        {
+                                            confirmButtonText: "确定",
+                                            type: "warning",
+                                        }
+                                    );
+                                    break;
+                            }
+                        });
+                } else {
+                    return false;
+                }
+            });
+        },
+        /**
+         * @description: 保存当前用户是否是管理员账号的状态判断，防止刷新页面丢失该状态
+         * @param {type}
+         * @return {type}
+         */
+        saveAdminState() {
+            this.$store.commit(
+                "isAdmin",
+                JSON.parse(sessionStorage.getItem("user")).admin
+            );
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.login {
+    height: 100vh;
+
+    .login_box {
+        width: 500px;
+        height: 400px;
+        position: absolute;
+        background-color: #fff;
+        border-radius: 15px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
+
+        .logo {
+            width: 314px;
+            height: 79px;
+            margin: 54px auto;
+        }
+
+        .form {
+            width: 250px;
+            margin: 0 auto;
+        }
+    }
+}
+</style>
+<style lang="scss">
+.login_btn {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+</style>

package/src/websocket/test.js

@@ -0,0 +1,140 @@
+/*
+ * @Author: lzx lzx@gonsin.cn
+ * @Date: 2022-06-28 15:27:45
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @LastEditTime: 2022-11-29 15:08:50
+ * @FilePath: \client\src\websocket\test.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+let pre = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+
+let webSocketIP = process.env.NODE_ENV !== 'development' ? window.location.origin.replace(window.location.protocol, pre) + '/gview/websocket' : "http://192.168.2.192:8088/gview/websocket".replace('http', 'ws');
+ 
+let socket = '';
+ 
+let isFirst = true;
+
+let Interval = null;
+
+let isLogin = true;//是否已经登录
+
+let isLink = false;//是否正在链接中
+
+let isReSet = false;//是否重连
+
+export const createSocket = () => {
+    isLink = true;
+    isFirst = true;
+    // console.log('establish websocket connection')
+    socket = new WebSocket(webSocketIP);
+    socket.onopen = onopenWs;
+    socket.onclose = oncloseWs;
+    socket.onerror = onerrorWs;
+    socket.onmessage = onmessageWs;
+    isLink = false;
+}
+
+const onopenWs = event => {
+    // console.log("链接", event);
+    let model = {
+        head: "gonsin",
+        cmd: {
+            cmd: "client",
+            subcmd: "heart",
+            respone: 0,
+        },
+        args: {},
+    };
+    Interval = setInterval(function () {
+        //这里发送一个心跳，后端收到后，返回一个心跳消息，
+        //onmessage拿到返回的心跳就说明连接正常
+        socket.send(JSON.stringify(model));
+    }, 40000);
+    // socket.send("websocket client connect testss");
+    if(isReSet){
+        let dataId = localStorage.getItem('dataId');
+        if(dataId){
+            onsendregisterWs(dataId)
+        }
+        
+    }
+}
+
+export const onsendregisterWs = (dataId) => {
+    // console.log("发送", dataId);
+    let params = {
+        head: "gonsin",
+        cmd: {
+            cmd: "gview_client",
+            subcmd: "register",
+        },
+        args: {
+            dataId: dataId,
+        },
+    };
+    socket.send(JSON.stringify(params));
+    isReSet = false;
+    // socket.send("websocket client connect testss");
+}
+
+export const onsendunregisterWs = (dataId) => {
+    // console.log("发送", dataId);
+    let params = {
+        head: "gonsin",
+        cmd: {
+            cmd: "gview_client",
+            subcmd: "unregister",
+        },
+        args: {
+            dataId: dataId,
+        },
+    };
+    socket.send(JSON.stringify(params));
+    // socket.send("websocket client connect testss");
+}
+const oncloseWs = event => {
+    console.log("断开链接", event);
+    if(isLogin && !isLink){
+        clearInterval(Interval)
+        isReSet = true;
+        socket = null;
+        Interval = null;
+        let timeout = setTimeout(() => {
+            console.log("断开链接重连");
+            createSocket();
+            clearTimeout(timeout)
+        }, 5000);
+    }
+}
+
+const onerrorWs = event => {
+    console.log("出现错误", event);
+}
+
+const onmessageWs = event => {
+    // console.log(event.data)
+    let data = JSON.parse(event.data)
+    // console.log(data);
+    window.dispatchEvent(new CustomEvent('onmessageWS', {
+        detail: {
+            data: data,
+            isFirst: isFirst
+        }
+    }))
+
+    if(isFirst) {
+        isFirst = false;
+    }
+}
+
+export const setLogin = (bool) => {
+    isLogin = bool;
+}
+
+export const closeWebsocket = () =>{
+    socket.close()
+    clearInterval(Interval)
+    socket = null;
+    Interval = null;
+    isReSet = false;
+}

package/src/websocket/websocket.js

@@ -0,0 +1,141 @@
+/*
+ * @Author: lzx lzx@gonsin.cn
+ * @Date: 2022-06-27 13:55:43
+ * @LastEditors: lrm lrm@gonsin.cn
+ * @LastEditTime: 2022-11-22 16:17:58
+ * @FilePath: \client\src\websocket\websocket.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+// import { mapActions,mapState } from "vuex";
+export default {
+    computed: {
+        // 映射 state 中的数据为计算属性
+      },
+    data() {
+        return {
+            //websocket
+            ip: process.env.NODE_ENV !== 'development' ? window.location.origin.replace(window.location.protocol, 'ws:') + '/gview/websocket' : "http://192.168.2.192:8088/gview/websocket".replace('http', 'ws'),
+            webSocket: null,
+            lockReconnect: false,
+            tt: false,
+            sendParams: {
+                head: "gonsin",
+                cmd: {
+                    cmd: "client",
+                    subcmd: "heart",
+                    respone: 0,
+                },
+                args: {},
+            },
+            // 心跳发送指令,超过40s未发送则断开连接
+            //心跳检测
+            heartCheck: null,
+            timeoutObj: null,
+            serverTimeoutObj: null,
+        }
+    },
+    methods: {
+        // 初始化websockey,登录成功后建立连接  new WebSocket(url)
+        initWebSocket() {
+            let that = this;
+            try {
+                if (typeof WebSocket === "undefined") {
+                    alert("您的浏览器不支持WebSocket，请尽快升级");
+                } else {
+                    console.log(that.ip)
+                    that.webSocket = new WebSocket(that.ip);
+                    that.init(); // 封装有websocket监听方法
+                }
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        init() {
+            let that = this;
+            that.webSocket.onopen = () => {
+                // this.$notify.success('Websocket successfully connected')
+                console.log("webSocket连接成功至:" + that.websocketIp);
+                clearInterval(that.timeoutObj);
+                clearTimeout(that.serverTimeoutObj);
+                let model = {
+                    head: "gonsin",
+                    cmd: {
+                        cmd: "client",
+                        subcmd: "heart",
+                        respone: 0,
+                    },
+                    args: {},
+                };
+                that.timeoutObj = setInterval(function () {
+                    //这里发送一个心跳，后端收到后，返回一个心跳消息，
+                    //onmessage拿到返回的心跳就说明连接正常
+                    that.webSocket.send(JSON.stringify(model));
+                }, 40000);
+                // // 连接成功，注册dataId
+                // that.registerMessage();
+            };
+            that.webSocket.onmessage = (msg) => {
+                console.log("onmessage....................");
+                // console.log('on_message:',msg);
+                let data = JSON.parse(msg.data);
+
+            };
+            that.webSocket.onerror = () => {
+                console.log("websocket连接错误...");
+            };
+            that.webSocket.onclose = () => {
+                console.log("websocket断开连接...");
+                that.msg = that.msg + "websocket断开连接...; ";
+            };
+        },
+        /**
+         * 注册站内信指令
+         */
+        registerMessage(dataId, fun) {
+            let params = {
+                head: "gonsin",
+                cmd: {
+                    cmd: "gview_client",
+                    subcmd: "register",
+                },
+                args: {
+                    dataId: dataId,
+                },
+            };
+            console.log(this.websocket)
+            // this.webSocket.send(JSON.stringify(params));
+            // this.$store.dispatch('setUpdateFunction', dataId,fun);
+        },
+        /**
+         * 注销站内信指令
+         */
+        unregisterMessage(dataId) {
+            let params = {
+                head: "gonsin",
+                cmd: {
+                    cmd: "gview_client",
+                    subcmd: "unregister",
+                },
+                args: {
+                    dataId: dataId,
+                },
+            };
+            this.webSocket.send(JSON.stringify(params));
+        },
+        /**
+         * 处理站内消息回调
+         */
+        handleMessageCallback(data) {
+            console.log(data);
+            console.log("处理站内消息................");
+            this.$notify({
+                title: data.args.message,
+                message: data.args.message,
+                type: "success",
+                offset: 100,
+            });
+        },
+    }
+
+
+}

package/src/websocket/websocket1.js

@@ -0,0 +1,117 @@
+/*
+ * @Author: lzx lzx@gonsin.cn
+ * @Date: 2022-06-27 13:55:43
+ * @LastEditors: lzx lzx@gonsin.cn
+ * @LastEditTime: 2022-06-28 13:59:41
+ * @FilePath: \client\src\websocket\websocket.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+export default {
+    //websocket
+    ip: process.env.NODE_ENV !== 'development' ? window.location.origin.replace(window.location.protocol, pre) + '/gview/websocket' : "http://192.168.2.192:8089/gview/websocket".replace('http', 'ws'),
+    webSocket: null,
+    lockReconnect: false,
+    tt: false,
+    sendParams: {
+        head: "gonsin",
+        cmd: {
+            cmd: "client",
+            subcmd: "heart",
+            respone: 0,
+        },
+        args: {},
+    },
+    // 心跳发送指令,超过40s未发送则断开连接
+    //心跳检测
+    heartCheck: null,
+    timeoutObj: null,
+    serverTimeoutObj: null,
+    // 初始化websockey,登录成功后建立连接  new WebSocket(url)
+    initWebSocket() {
+        try {
+            if (typeof WebSocket === "undefined") {
+                alert("您的浏览器不支持WebSocket，请尽快升级");
+            } else {
+                this.webSocket = new WebSocket(this.ip);
+                this.init(); // 封装有websocket监听方法
+            }
+        } catch (error) {
+            console.log(error);
+        }
+    },
+    init() {
+        let that = this;
+        that.webSocket.onopen = () => {
+            // this.$notify.success('Websocket successfully connected')
+            console.log("webSocket连接成功至:" + that.ip);
+            clearInterval(that.timeoutObj);
+            clearTimeout(that.serverTimeoutObj);
+            let model = {
+                head: "gonsin",
+                cmd: {
+                    cmd: "client",
+                    subcmd: "heart",
+                    respone: 0,
+                },
+                args: {},
+            };
+            that.timeoutObj = setInterval(function () {
+                //这里发送一个心跳，后端收到后，返回一个心跳消息，
+                //onmessage拿到返回的心跳就说明连接正常
+                that.webSocket.send(JSON.stringify(model));
+            }, 40000);
+            // // 连接成功，注册dataId
+            // that.registerMessage();
+        };
+        that.webSocket.onmessage = (msg) => {
+            console.log('this.$store')
+            console.log(this.$store)
+            console.log("onmessage....................");
+            // console.log('on_message:',msg);
+            let data = JSON.parse(msg.data);
+
+        };
+        that.webSocket.onerror = () => {
+            console.log("websocket连接错误...");
+        };
+        that.webSocket.onclose = () => {
+            console.log("websocket断开连接...");
+            that.msg = that.msg + "websocket断开连接...; ";
+        };
+    },
+    /**
+     * 注册站内信指令
+     */
+    registerMessage(dataId, fun) {
+        let params = {
+            head: "gonsin",
+            cmd: {
+                cmd: "gview_client",
+                subcmd: "register",
+            },
+            args: {
+                dataId: dataId,
+            },
+        };
+        this.webSocket.send(JSON.stringify(params));
+    },
+    /**
+     * 注销站内信指令
+     */
+    unregisterMessage(dataId) {
+        let params = {
+            head: "gonsin",
+            cmd: {
+                cmd: "gview_client",
+                subcmd: "unregister",
+            },
+            args: {
+                dataId: dataId,
+            },
+        };
+        this.webSocket.send(JSON.stringify(params));
+    },
+   
+
+
+}