first commit

历届学生/fontendseven/项目练习/上课项目/聊天/fontend/js/config/config.js

@@ -0,0 +1,50 @@
+// 专门用来存放所有的接口地址
+
+var config = {
+
+    // 基地址  dev（开发阶段）  test（测试阶段）  prod（正式）
+    devUrl: 'http://127.0.0.1:3000/api/json',
+    testUrl: 'http://127.0.0.1:9090/api/json',
+    prodUrl: 'http://127.0.0.1/api/json',
+    wsDevUrl: 'ws://127.0.0.1:3000',
+    wsProdUrl: 'ws://geekhelp.cn',
+    stage: 'dev',
+    urlList: {
+        index: '/index',
+        info: '/info',
+        agentInfo: '/agent/info',
+        classList: '/classList',
+        type: "/class",
+        mechanism: '/mechanism',
+        mechanismList: '/mechanismList',
+        allModel: '/allModel',
+        modelList: '/modelList'
+    },
+    checkSocket: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.wsDevUrl
+                break;
+            case "prod":
+                return this.wsProdUrl
+                break;
+            default:
+                break;
+        }
+    },
+    checkUrl: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devUrl
+                break;
+            case "test":
+                return this.testUrl
+                break;
+            case "prod":
+                return this.prodUrl
+                break;
+            default:
+                break;
+        }
+    },
+}

历届学生/fontendseven/项目练习/上课项目/聊天/fontend/js/http/http.js

@@ -0,0 +1,56 @@
+class HTTP {
+
+    constructor() {
+        this.xhr = new XMLHttpRequest();
+    }
+
+    get(option) {
+        return new Promise((success, error) => {
+            var GetParams = ""
+            for (const key in option.data) {
+                GetParams += `&${key}=${option.data[key]}`
+            }
+            GetParams = GetParams.replace("&", "?")
+            option.url += GetParams;
+
+            this.xhr.open("GET", config.checkUrl() + option.url)
+            this.xhr.send()
+            this.onreadystatechange(success, error)
+        })
+    }
+
+    post(option) {
+        return new Promise((success, error) => {
+            this.xhr.open("POST", config.checkUrl() + option.url)
+            this.xhr.setRequestHeader("Content-Type","application/json; charset = UTF-8");
+            this.xhr.send(JSON.stringify(option.data))
+            this.onreadystatechange(success, error)
+        })
+    }
+
+    onreadystatechange(success, error) {
+        this.xhr.onreadystatechange = () => {
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    var data = JSON.parse(this.xhr.responseText)
+                    switch (data.status) {
+                        case 200:
+                            return success(data.result || data.data)
+                        break;
+
+                        case 404:
+                            alert(data.msg);
+                            throw new Error(data.msg);
+                            break;
+                    }
+                } else {
+                    console.log("暂无数据");
+                    error(this.xhr)
+                }
+
+            }
+        }
+    }
+
+
+}

历届学生/fontendseven/项目练习/上课项目/聊天/fontend/js/lib/WebSocket.js

@@ -0,0 +1,125 @@
+class WebSocketClass {
+    constructor() {
+        // 用来设计单例模式的
+        this.instance = null;
+        // 用来保存 new WebSocket 的实例
+        this.ws = null;
+        // close 关闭，open  打开
+        this.status = 'close';
+        // 发送的心跳数值 ping 询问后端，pong 后端的响应
+        this.pingPong = 'ping';
+        this.callMessage = {
+            // SocketSystem: () => {},
+            // SocketUser: () => {},
+        };
+        this.connect();
+    }
+
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new WebSocketClass();
+        }
+        return this.instance
+    }
+
+    connect() {
+        this.ws = new WebSocket(config.checkSocket());
+        this.ws.onopen = e => {
+            this.status = 'open';
+            console.log(`连接成功`);
+            this.heartCheck();
+            this.onClose();
+            this.getMessage();
+        };
+    }
+
+    heartCheck() {
+        this.pingPong = 'ping';
+        this.pingInterval = setInterval(() => {
+            if (this.ws.readyState === 1) {
+                this.send({
+                    type: "SocketHealthy",
+                    action: null,
+                    data: "ping"
+                }) // 客户端发送ping
+            }
+        }, 5000);
+
+        this.pongInterval = setInterval(() => {
+            if (this.pingPong === 'ping') {
+                this.closeHandle('服务器没有返回pong，重启webSocket');
+            }
+            console.log('收到服务器的 pong');
+            this.pingPong = 'ping';
+        }, 10000);
+    }
+
+    closeHandle(e = 'err') {
+        console.log(e)
+        if (this.status !== 'close') {
+            if (this.pingInterval !== undefined && this.pongInterval !== undefined) {
+                clearInterval(this.pingInterval);
+                clearInterval(this.pongInterval);
+            }
+            this.connect();
+        } else {
+            console.log(`websocket手动关闭,或者正在连接`);
+        }
+    }
+
+    getMessage() {
+        this.ws.onmessage = e => {
+            var res = JSON.parse(e.data);
+            switch (res.type) {
+                case "SocketHealthy":
+                    // console.log("前端 健康检查：", res.data)
+                    this.pingPong = 'pong';
+                    break;
+                case "SocketUser":
+                    // console.log("前端 用户消息：", res.data);
+                    if (res.action == "to") {
+                        this.callMessage["to"](res.data);
+                        return;
+                    } else if (res.action == "list") {
+                        this.callMessage["userList"](res.data);
+                    } else {
+                        this.callMessage["SocketUser"](res.data);
+                    }
+                    break;
+                case "SocketSystem":
+                    // console.log("前端 系统消息：", res.data)
+                    this.callMessage["SocketSystem"](res.data)
+                    break;
+            }
+        };
+    }
+
+
+    send(mes = null, callback = null, type = null) {
+        if (mes == null) {
+            if (callback != null) {
+                this.callMessage[type] = callback
+            }
+        } else {
+            if (callback != null) {
+                this.callMessage[type] = callback
+            }
+            this.ws.send(JSON.stringify(mes))
+        }
+    }
+
+    onClose() {
+        this.ws.onclose = (evt) => {
+            console.log("链接关闭: ", evt);
+        };
+    }
+
+    close() {
+        clearInterval(this.pingInterval);
+        clearInterval(this.pongInterval);
+        this.status = 'close';
+        this.ws.send('close');
+        this.ws.close();
+        console.log('close');
+    }
+}

历届学生/fontendseven/项目练习/上课项目/聊天/fontend/js/lib/rem.js

@@ -0,0 +1,13 @@
+window.onload = function () {
+    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
+      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
+    getRem(750, 100)
+};
+window.onresize = function () {
+    getRem(750, 100)
+};
+function getRem(pwidth, prem) {
+    var html = document.getElementsByTagName("html")[0];
+    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+    html.style.fontSize = oWidth / pwidth * prem + "px";
+}

历届学生/fontendseven/项目练习/上课项目/聊天/fontend/js/page/index.js

@@ -0,0 +1,210 @@
+const { ipcRenderer } = require('electron')
+
+class Index {
+    constructor() {
+        this.fontSetting = {
+            color: "#000",
+            size: "16px",
+            background: '#1e6eff'
+        }
+        this.socket = WebSocketClass.getInstance();
+        this.UserInfo = JSON.parse(localStorage.getItem("UserInfo"));
+        setTimeout(() => {
+            this.joinGround();
+
+            this.socket.send(null, (res) => {
+                this.renderMessage("", res);
+            }, "to");
+
+        }, 300);
+        $(".group_name").text(this.UserInfo.room)
+        $(".right span").text(this.UserInfo.name)
+        $(".right img").attr({src: this.UserInfo.img})
+        this.bindUserInput();
+        this.bindEvent();
+    }
+
+    joinGround() {
+        this.socket.send({
+            type: "SocketSystem",
+            action: 'join',
+            data: this.UserInfo
+        }, (res) => {
+            console.log("----------------- res ", res)
+            $(".chat_record").append(`
+              <li>
+                <p class="system">${res}</p>
+              </li>
+            `)
+
+            this.socket.send({
+                type: "SocketUser",
+                action: 'userList',
+                data: this.UserInfo
+            }, res => {
+                $(".online_user_list").empty()
+                res.forEach(v => {
+                    $(".online_user_list").append(`
+                        <li>
+                            <img src="${v.userAuthor}" alt="">
+                            <span>${v.userName}</span>
+                          </li>
+                    `)
+                })
+
+                console.log("在线用户列表：", res)
+            },"userList")
+        }, "SocketSystem")
+    }
+
+    bindUserInput() {
+
+        $(".record_text").bind("keypress", (e) => {
+            // 回车被按下
+            if (e.keyCode == 13) {
+                e.preventDefault();
+                if ($(".record_text").html().length != 0) {
+                    this.sendMessage(
+                        `<div class="iiiiii" style="color: ${this.fontSetting.color}; font-size: ${this.fontSetting.size}; background-color: ${this.fontSetting.background}">
+                            ${$(".record_text").html()}
+                          </div>`
+                    )
+                }
+            }
+        })
+    }
+
+    sendMessage(data) {
+        this.UserInfo.message =  data;
+        this.socket.send({
+            type: "SocketUser",
+            action: 'send',
+            data: this.UserInfo
+        });
+
+        $(".record_text").html("")
+        this.renderMessage("me", this.UserInfo);
+    }
+
+    bindEvent() {
+        $(".footer_action .icon_action").click(function () {
+            var liArr = $(".menu_footer li")
+            liArr.click(function () {
+
+                $(".menu_content .menu_item").eq(
+                    $(this).index()
+                ).addClass("active")
+                    .siblings().removeClass("active")
+
+                $(this).addClass("active")
+                    .siblings().removeClass("active")
+            })
+
+            if ($(liArr[$(this).index()]).hasClass("active")) {
+                $(".menu").hide()
+                $(liArr[$(this).index()]).removeClass("active")
+            } else {
+                $(".menu").show()
+                $(liArr[$(this).index()]).addClass("active")
+                    .siblings().removeClass("active")
+
+                $(".menu_content .menu_item").eq(
+                    $(this).index()
+                ).addClass("active")
+                    .siblings().removeClass("active")
+            }
+        })
+
+        $("body").click(function (event) {
+            var liArr = $(".menu_footer li")
+
+            var hidden = () => {
+                $(".menu").hide()
+                liArr.each(function (i, e) {
+                    $(e).removeClass("active")
+                })
+            }
+
+            if ($(event.target).attr("class") == undefined) {
+                hidden()
+            } else {
+                if (
+                    $(event.target).attr("class").includes("menu") ||
+                    $(event.target).attr("class").includes("iconfont")
+                ) {
+
+                } else {
+                    hidden()
+                }
+            }
+        })
+
+        // 表情
+        for (var i = 0; i<274; i++) {
+            $(".expr").append(`
+              <img class="emio" src="../img/icon/${i}fix@2x.png"/>
+            `)
+        }
+
+        $(".expr img").on("mouseover", function () {
+            $(this).attr({
+                src: `../img/icon/${$(this).index()}@2x.gif`
+            })
+        })
+
+        $(".expr img").on("mouseout", function () {
+            $(this).attr({
+                src: `../img/icon/${$(this).index()}fix@2x.png`
+            })
+        });
+
+        $(".expr img").click(function (){
+            $(".record_text").append($(this).clone())
+        })
+
+        // GIF
+        for (var i = 0; i<=12; i++) {
+            $(".gif").append(`
+              <img src="../img/gif/${i}.gif"/>
+            `)
+        }
+
+        var slef = this;
+        $(".gif img").click(function (){
+            slef.sendMessage(`<img class="gif_img" src="${$(this).attr("src")}" />`);
+        })
+
+        $(".menu_select").change(function () {
+            slef.fontSetting.size = $(this).val()
+        })
+
+        $(".menu_color").on("input",function () {
+            slef.fontSetting.color = $(this).val()
+        })
+
+        $(".menu_qipao_color").on("input",function () {
+            slef.fontSetting.background = $(this).val()
+        })
+
+        $(".icon-zhendong").click(function () {
+            ipcRenderer.send('shake', '')
+        })
+
+    }
+
+    // 渲染页面消息列表的页面
+    renderMessage(type = "", data) {
+        $(".chat_record").append(`
+          <li class="${type}">
+            <img class="user_img" src="${data.img}" alt="">
+            <div class="right_mes">
+              <div class="name">${data.name}</div>
+              <div class="message">${data.message}</div>
+            </div>
+          </li>
+        `)
+    }
+
+}
+
+new Index();

历届学生/fontendseven/项目练习/上课项目/聊天/fontend/js/page/login.js

@@ -0,0 +1,64 @@
+const { ipcRenderer } = require('electron')
+
+class Login {
+    constructor() {
+       this.renderImg();
+       this.bindEnter();
+    }
+
+    renderImg() {
+        var fileType = ""
+        for (var i = 1; i <= 10; i++) {
+            if (i == 3 || i == 4 || i == 5) {
+                fileType = ".gif"
+            } else {
+                fileType = ".jpg"
+            }
+
+            $(".modal-body").append(`
+              <img class="${ i == 1 ? 'active': ''}" src="../img/${i}${fileType}" alt="">
+            `);
+
+            $(".modal-body img").click(function () {
+
+                $(".user_img").attr({ src: $(this).attr("src") })
+                $(this).addClass("active").siblings().removeClass("active")
+                $('#myModal').modal('hide');
+
+
+            })
+        }
+    }
+
+    bindEnter() {
+        $(".enter").click(function () {
+            if ($(".name").val().length == 0) {
+                new $.zui.Messager('昵称不能为空', {
+                    icon: 'times',
+                    type: 'danger'
+                }).show();
+                return false;
+            }
+
+
+            if ($(".room").val().length == 0) {
+                new $.zui.Messager('房号不能为空', {
+                    icon: 'times',
+                    type: 'danger'
+                }).show();
+                return false;
+            }
+
+            localStorage.setItem("UserInfo",JSON.stringify({
+                img: $(".user_img").attr("src"),
+                name: $(".name").val(),
+                room: $(".room").val()
+            }));
+
+            ipcRenderer.sendSync('open', 'index')
+
+        })
+    }
+}
+
+new Login();

历届学生/fontendseven/项目练习/上课项目/聊天/fontend/js/service/indexService.js

@@ -0,0 +1,65 @@
+class IndexService {
+
+    async index(data) {
+       return await (new HTTP()).get({
+           url: config.urlList.index,
+           data: data
+       })
+    }
+
+    async type(data) {
+        return await (new HTTP()).get({
+            url: config.urlList.type,
+            data: data
+        })
+    }
+
+    async classList(data) {
+        return await (new HTTP()).get({
+            url: config.urlList.classList,
+            data: data
+        })
+    }
+
+    async mechanism(data) {
+        return await (new HTTP()).get({
+            url: config.urlList.mechanism,
+            data: data
+        })
+    }
+
+    async mechanismList(data) {
+        return await (new HTTP()).get({
+            url: config.urlList.mechanismList,
+            data: data
+        })
+    }
+
+
+    async allModel(data) {
+        return await (new HTTP()).get({
+            url: config.urlList.allModel,
+            data: data
+        })
+    }
+    async modelList(data) {
+        return await (new HTTP()).get({
+            url: config.urlList.modelList,
+            data: data
+        })
+    }
+
+    async agentInfo(data) {
+        var res = await (new HTTP()).post({
+            url: config.urlList.agentInfo,
+            data: data
+        });
+        res.imgs.forEach((v,i) => {
+            res.imgs[i] = "http://127.0.0.1:3000/api/json/url?url="+v
+        });
+
+        return res;
+    }
+}
+
+var server = new IndexService()

历届学生/fontendseven/项目练习/上课项目/聊天/fontend/js/utils/utils.js

@@ -0,0 +1,17 @@
+class Utils {
+
+    query(variable) {
+        var query = window.location.search.substring(1);
+        var vars = query.split("&");
+        for (var i=0;i<vars.length;i++) {
+            var pair = vars[i].split("=");
+            if(pair[0] == variable){
+                return decodeURI(pair[1]);
+            }
+        }
+        return(false);
+    }
+}
+
+// 对象的解构赋值
+var { query } = new Utils()