first commit

历届学生/front-end-team/项目练习/上课项目/聊天室/fontend/js/page/index.js

@@ -0,0 +1,219 @@
+class Index {
+    constructor() {
+        // 读取login页面存放的用户信息
+        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
+        // 连接服务器
+        this.socket = io('ws://127.0.0.1:3000');
+
+        this.fontSize = "13px";
+        this.fontColor = "#353535";
+        this.backColor = "#4699ff";
+        this.EventSocket();
+        this.sendMessage();
+        this.dropDownMenu();
+    }
+
+
+    sendMessage() {
+        $(".textarea").bind('keypress', (event) => {
+            // 你按下了回车
+            if (event.keyCode == "13") {
+                event.preventDefault()
+                this.userInfo.user_content = `
+                 <div class="user_content" style="font-size: ${this.fontSize}; color: ${this.fontColor} !important;background-color: ${this.backColor} !important">${$(".textarea").html()}
+                 </div>
+                `
+                $(".textarea").empty()
+                this.renderMessage("enter", this.userInfo)
+                this.socket.emit("sendChatMessage", this.userInfo);
+            }
+        });
+    }
+
+
+    dropDownMenu() {
+        var self = this;
+
+        // 设置文本框默认的字体和颜色
+        $(".textarea").css({
+            "font-size": this.fontSize,
+            "color": this.fontColor
+        });
+
+        $(".fontSize").on("change", function () {
+            if ($(this).val() != "null") {
+                self.fontSize = $(this).val();
+                $(".textarea").css({
+                    "font-size": self.fontSize
+                });
+            }
+        })
+
+        $(".fontColor").on("input", function (){
+            self.fontColor = $(this).val();
+            $(".textarea").css({
+                "color": self.fontColor
+            });
+        })
+
+
+        $(".backColor").on("input", function (){
+            self.backColor = $(this).val();
+        })
+
+
+        // 给 底部 一排按钮绑定点击事件
+        $(".icon-smiling, .icon-gallery, .icon-zitiyanse, .icon-xinbaniconshangchuan_huaban").click(function (event) {
+            event.stopPropagation();
+            if ($(".dropdown_footer li").eq($(this).index()).hasClass("active")) {
+                $(".dropdown_menu").hide()
+                $(".dropdown_footer li").removeClass("active")
+            } else {
+                $(".dropdown_menu").show()
+                self.changeActive($(this).index())
+            }
+        })
+
+        // 给 弹窗的 底部 一排按钮绑定点击事件
+        $(".dropdown_footer li").click(function (event) {
+            event.stopPropagation();
+            self.changeActive($(this).index())
+        });
+
+
+        for (var i = 0; i <= 12; i++) {
+            $(".gallery").append(`
+                   <img class="xxss" src="../img/gif/${i}.gif" alt="">
+                `)
+        }
+
+        $(".gallery img").click(function () {
+            self.userInfo.user_content = `
+             <div class="user_content clearpadding" style="font-size: ${this.fontSize}; color: ${this.fontColor} !important;">
+               <img class="gif" src="${$(this).attr('src')}" alt="">
+             </div>
+            `;
+
+            self.renderMessage("enter", self.userInfo)
+            self.socket.emit("sendChatMessage", self.userInfo);
+        })
+
+
+        // 渲染表情图
+        for (var i = 0;i <= 274; i++) {
+            $(".smiling").append(`
+              <img class="emm" src="../img/icon/${i}fix@2x.png" alt="">
+            `)
+        }
+        
+        // 给表情图绑定鼠标悬浮 和 离开 的事件
+        $(".smiling img").hover(
+            function () {
+                $(this).attr({
+                    src: `../img/icon/${$(this).index()}@2x.gif`
+                })
+            },
+            function (){
+                $(this).attr({
+                    src: `../img/icon/${$(this).index()}fix@2x.png`
+                })
+            },
+        );
+
+        $(".smiling img").click(function (event) {
+            event.stopPropagation();
+
+            $(".textarea").append($(this).clone())
+            $(".dropdown_menu").hide()
+            $(".dropdown_footer li").removeClass("active")
+        });
+
+        $("body").click(function (event) {
+
+            if ($(".dropdown_menu").css("display") != "none") {
+                if (!event.target.className.includes("xxss")) {
+                    $(".dropdown_menu").hide()
+                    $(".dropdown_footer li").removeClass("active")
+                }
+            }
+        })
+
+
+    }
+
+    changeActive(index) {
+
+        // 切换 弹窗底部 的 激活样式
+        $(".dropdown_footer li").eq(index).addClass("active").siblings().removeClass("active")
+
+        // 切换 内容的激活样式
+        $(".dropdown_body .body_item").eq(index).addClass("active").siblings().removeClass("active")
+
+        // 改变标题
+        $(".dropdown_title").text($(".dropdown_footer li").eq(index).text())
+    }
+
+
+
+    renderMessage(type = "service", data) {
+        $(".history").append(`
+            <li class="${ type =='enter' ? 'me' : '' }">
+                <img class="user_img" src="${data.user_img}" alt="">
+                <div class="right">
+                    <div class="user_name">${data.user_name}</div>
+                   ${data.user_content}
+                </div>
+            </li>
+        `);
+    }
+
+
+    EventSocket() {
+
+        // 修改顶部用户信息和群名称
+        $(".left img").attr({ src: this.userInfo.user_img })
+        $(".left span").text(this.userInfo.user_name);
+        $(".ground_name").text(this.userInfo.user_room);
+
+        this.socket.emit("JoinGroupChat", this.userInfo);
+        // 要现在用户数
+        this.socket.emit("OnLineUserList", this.userInfo);
+        this.socket.on("SendOnLineUserList", (res) => {
+            $(".online ul").empty();
+            res.forEach(v => {
+                $(".online ul").append(`
+                     <li>
+                        <div class="left">
+                            <img src="${v.user_img}" alt="">
+                            <span>${v.user_name}</span>
+                        </div>
+                        ${
+                            v.user_identity == 'leader'
+                            ? `<img class="icon" src="../img/other/admin.png" alt="">` 
+                            : `<div></div>`
+
+                         }
+                    </li>
+                `)
+            })
+        })
+
+        this.socket.on("getChatMessage", (res) => {
+            this.renderMessage('service', res);
+        })
+
+        this.socket.on("WelcomeUser", (res) => {
+            $(".history").append(`<li class="system">${res}</li>`)
+        })
+    }
+
+
+    // 拿到本地存储的用户信息，把用户加入群聊（如果群聊只有他一个人是创建群聊）
+    // 否则加入群聊
+
+    // 获取当前群聊的在线人数
+
+    // 发送消息
+}
+
+new Index();

历届学生/front-end-team/项目练习/上课项目/聊天室/fontend/js/page/login.js

@@ -0,0 +1,67 @@
+const { ipcRenderer } = require('electron');
+
+class Login {
+    constructor() {
+        this.renderImg();
+        this.enterRoom();
+    }
+
+
+    renderImg() {
+        var type = null;
+        for (var i = 1; i <= 10; i++) {
+            if (i == 3 || i == 4 || i == 5) {
+                type = "gif"
+            } else {
+                type = "jpg"
+            }
+
+            $(".modal-body").append(`
+              <img class="${i == 1 ? 'active': ''}" src="../img/${i}.${type}" alt="">
+            `)
+        }
+
+        $(".modal-body img").click(function () {
+            $(this).addClass("active").siblings().removeClass("active");
+
+            $(".login img").attr({
+                src: $(this).attr("src")
+            });
+
+            $('#myModal').modal('hide')
+        })
+    }
+
+
+    enterRoom() {
+        $(".enter").click(function () {
+            var username = $(".username").val();
+            var userroom = $(".userroom").val();
+
+            if (username.length == 0) {
+                new $.zui.Messager('用户名必填', {
+                    icon: 'bell'
+                }).show();
+
+                return;
+            }
+
+            if (userroom.length == 0) {
+                new $.zui.Messager('房间号必填', {
+                    icon: 'bell'
+                }).show();
+                return;
+            }
+
+            var userInfo = {
+                user_img: $(".login img").attr("src"),
+                user_name: username,
+                user_room: userroom
+            }
+            localStorage.setItem("userInfo", JSON.stringify(userInfo))
+            ipcRenderer.send('GoToIndex', 1)
+        })
+    }
+}
+
+new Login();