first commit

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

@@ -0,0 +1,202 @@
+const { ipcRenderer } = require('electron');
+
+class Index {
+    constructor() {
+        this.socket = io("ws://helpcodes.com:3000");
+        this.fontSize = "13px"
+        this.fontColor = "#353535"
+        this.backgroundColor = "#f3f3f3"
+
+        if (localStorage.getItem("UserInfo") != null) {
+            this.UserInfo = JSON.parse(localStorage.getItem("UserInfo"));
+            this.emitSocket();
+            this.onSocket();
+            this.onEvent();
+        } else {
+            location.href = "./login.html"
+        }
+    }
+
+    onEvent() {
+        var self = this;
+
+        // 修改群信息
+        $(".group_name").text(this.UserInfo.roomId)
+        // 修改当前登录的用户信息
+        $(".right span").text(this.UserInfo.name)
+        $(".right img").attr("src", this.UserInfo.headImg)
+
+        $(".record_text").keydown((event) => {
+            if (event.keyCode == 108 || event.keyCode == 13) {
+                event.preventDefault();
+                console.log("你按下了回车");
+                this.UserInfo.message = `<div class="qp" style="font-size: ${this.fontSize};color: ${this.fontColor};background:${this.backgroundColor};">
+                    ${$(".record_text").html()}
+                </div>`;
+                this.renderMessage(this.UserInfo);
+                this.socket.emit("sendMessage", this.UserInfo);
+                $(".record_text").text("")
+            }
+        });
+
+        // 渲染QQ表情图片
+        for (let i = 0; i < 275; i++) {
+            $(".look").append(`
+              <img src="../img/icon/${i}fix@2x.png" alt="">
+            `)
+        }
+
+        $(".look img").hover(function () {
+            $(this).attr("src", `../img/icon/${$(this).index()}@2x.gif`);
+        })
+
+        $(".look img").mouseout(function () {
+            $(this).attr("src", `../img/icon/${$(this).index()}fix@2x.png`);
+        })
+
+        $(".look img").click(function () {
+            $(".record_text").append($(this).clone());
+
+            var a = $(".record_text")[0];
+            console.log(a.selectionStart);
+            console.log(a.selectionEnd);
+        })
+
+        $(".icon-zhendong").click(() => {
+            this.socket.emit("getShake", this.UserInfo);
+        });
+
+        $("body").click(function (event) {
+            if ($(".menu").css("display") != "none") {
+                if (event.target.className != "menu") {
+                    $(".menu").hide()
+                }
+            }
+        })
+
+        $(".menu").click(function (event) {
+            event.stopPropagation();
+        })
+
+        $(".icon-weixiao,.icon-gif,.icon-zitiyanse,.icon-xinbaniconshangchuan_huaban").click(function (event) {
+
+            event.stopPropagation();
+            if ($(".menu").css("display") == "none") {
+                console.log("1111");
+                $(".menu").show()
+                self.changeActive($(".menu_footer li").eq($(this).index()));
+            } else {
+                if ($(this).hasClass("i_active")) {
+                    $(".menu").hide()
+                } else {
+                    self.changeActive($(".menu_footer li").eq($(this).index()));
+                }
+            }
+            $(this).addClass("i_active")
+                .siblings()
+                .removeClass("i_active");
+        })
+
+        // 渲染表情的那些菜单
+        $(".menu_footer li").click(function (event) {
+            self.changeActive(this)
+        });
+
+        $('.font_select').change(function () {
+            self.fontSize = $(this).val();
+            $(".record_text").css("font-size", self.fontSize)
+        })
+
+        $('.fontColor').change(function () {
+            self.fontColor = $(this).val()
+            $(".record_text").css("color", self.fontColor)
+        })
+
+        $('.backColor').change(function () {
+            self.backgroundColor = $(this).val()
+        })
+    }
+
+    changeActive(el) {
+
+        $(".icon-weixiao,.icon-gif,.icon-zitiyanse,.icon-xinbaniconshangchuan_huaban").eq($(el).index())
+            .addClass("i_active")
+            .siblings()
+            .removeClass("i_active");
+
+        $(el).addClass("footer_active")
+            .siblings()
+            .removeClass("footer_active");
+
+        $(".menu_body .body_content")
+            .eq($(el).index())
+            .addClass("active")
+            .siblings()
+            .removeClass("active");
+
+        $(".menu_title").text(
+            $(el).text()
+        )
+    }
+
+
+    renderMessage(data, type = "right") {
+        $(".chat_record").append(`
+            <li class="${type == "right" ? 'mes_right' : ''}">
+                <img class="user_img" src="${data.headImg}" alt="">
+                <div class="record_right">
+                    <div class="user_nickname">${data.name}</div>
+                    <div class="record_content">
+                     ${data.message}
+                    </div>
+                </div>
+            </li>
+        `);
+
+        $(".content_left").animate({ scrollTop: $(".chat_record").outerHeight() }, 1);
+    }
+
+    emitSocket() {
+        this.socket.emit("Login", this.UserInfo);
+    }
+
+    // 监听后端的所有消息
+    onSocket() {
+
+        this.socket.on("sendShake", (res) => {
+            console.log("前端收到抖动");
+            ipcRenderer.send('shake');
+        })
+
+        this.socket.on("SendGroupMembers", (res) => {
+            console.log("SendGroupMembers: ", res);
+            $(".online_user_list").empty();
+            $(".list_title").text(`群成员 (${res.length})`)
+            res.forEach(v => {
+                $(".online_user_list").append(`
+                    <li>
+                        <img src="${v.headImg}" alt="">
+                        <span>${v.name}</span>
+                    </li>
+                `)
+            });
+        })
+
+
+        this.socket.on("getMessage", (res) => {
+            this.renderMessage(res, "left")
+        })
+
+        this.socket.on("system", function (res) {
+            console.log(res);
+            $(".chat_record").append(`
+                <li class="system">
+                    <span>${res}</span>
+                </li>
+            `)
+        })
+    }
+}
+
+new Index();
+

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

@@ -0,0 +1,73 @@
+const { ipcRenderer } = require('electron');
+
+class Login {
+    constructor () {
+
+        this.renderPage();
+        this.bindClick();
+
+    }
+
+
+    renderPage() {
+        var imageFileType = null;
+        for (var i = 1; i <= 10; i++) {
+            if (i == 3 || i == 4 || i == 5) {
+                imageFileType = "gif"
+            } else {
+                imageFileType = "jpg"
+            }
+
+            $(".chiooseUserImg").append(`
+                <li class="${i==1?'active':''}">
+                    <img src="../img/${i}.${imageFileType}" alt="">
+                </li>
+            `);
+        }
+
+        $(".chiooseUserImg li").click(function() {
+            $(this).addClass("active").siblings().removeClass("active");
+            $(".head").attr({
+                src: $(this).find("img").attr("src")
+            })
+        })
+    }
+
+    bindClick() {
+        $(".enter").click(function() {
+
+            if ($(".name").val().length == 0) {
+                new $.zui.Messager('用户名不能为空', {
+                    icon: 'icon-exclamation-sign',
+                    type: 'danger'
+                }).show();
+
+                return false
+            }
+
+            if ($(".room").val().length == 0) {
+                new $.zui.Messager('房间号不能为空', {
+                    icon: 'icon-exclamation-sign',
+                    type: 'danger'
+                }).show();
+
+                return false
+            }
+
+
+            var UserInfo = {
+                name: $(".name").val(),
+                roomId:  $(".room").val(),
+                headImg: $(".head").attr("src")
+            };
+            localStorage.setItem("UserInfo", JSON.stringify(UserInfo));
+
+            ipcRenderer.send('enterIndex');
+
+            // location.href = "./index.html"
+            
+        })
+    }
+}
+
+new Login();