first commit

历届学生/font-end-nine/项目练习/学生项目/冯文焌/7node/聊天室/fonteng/js/index.js

@@ -0,0 +1,171 @@
+const { ipcRenderer } = require("electron");
+
+class Index {
+    constructor() {
+        this.color = "";
+        this.size = "13px";
+        //背景颜色
+        this.background = "";  
+        this.UserInfo = JSON.parse(localStorage.getItem("userInfo"));
+        this.socket = io("ws://127.0.0.1:3000");
+        // console.log(this.socket);
+        this.socketEmit()
+        this.bindEvent()
+    }
+ 
+
+
+
+    //程序发到后端
+    socketEmit() {
+        this.socket.emit("UserLogin", this.UserInfo)
+
+        this.socket.emit("getOnlineUser", this.UserInfo)
+        this.socket.on("PushMessage", (arg) => {
+            this.sendMessage(arg, "")
+        })
+
+        this.socket.on("PushShake", (arg) => {
+            ipcRenderer.send("startShake")
+        })
+
+        this.socket.on("PushOnlineUser", (arg) => {
+            $(".content_right .title").text(`群成员 ${arg.length}`)
+            $(".content_right ul").empty()
+            arg.forEach(v => {
+                $(".content_right ul").append(`
+                    <li>
+                        <div class="user">
+                            <img src="${v.img}" alt="">
+                            <span>${v.name}</span>
+                        </div>
+                        ${
+                            v.type == 1 
+                            ? `<i class="iconfont icon-eye"></i>`
+                            : v.type == 2
+                              ? `<i class="iconfont icon-gif"></i>`
+                              : ''
+                        }
+                    </li>
+                `)
+            });
+        })
+
+        this.socket.on("SystemMessage", (arg) => {
+            $(".content_left").append(`
+            <li class="system">
+                <span>${arg}</span>
+            </li>
+            `)
+        })
+    }
+
+    bindEvent() {
+        var self = this;
+        var Bself = this;
+
+        $(".header_left img").attr("src", this.UserInfo.img)
+        $(".header_left span").text(this.UserInfo.name)
+        $(".header_text").text(this.UserInfo.room)
+
+        $(".footer_input").keydown((e) => {
+         
+            if (e.keyCode == 13 || e.keyCode == 108) {
+                e.preventDefault();
+                this.UserInfo.content = `<div style="background:${this.background};color: ${this.color}; font-size: ${this.size};  padding: 5px 10px; border-radius: 4px;">${$(".footer_input").html()}</div>`
+                $(".footer_input").html("")
+                this.socket.emit("sendMessage", this.UserInfo)
+                this.sendMessage(this.UserInfo);
+            }
+        })
+
+        $(".menu_footer li").click(function() {
+            $(this).addClass("active").siblings().removeClass("active")
+            $(".menu_content div").eq($(this).index()).addClass("active").siblings().removeClass("active")
+
+            $(".menu_title").text($(this).text())
+        })
+
+
+        for (var i = 0; i <= 274; i++ ) {
+            $(".smiling").append(`
+                <img class="smiling_img" src="./img/icon/${i}fix@2x.png" alt="">
+            `)
+        }
+
+        for (var i = 0; i <= 12; i++ ) {
+            $(".gif").append(`
+                <img class="gif_img" src="./img/gif/${i}.gif" alt="">
+            `)
+        }
+
+        $(".gif img").click(function() {
+            $(".footer_input").append($(this).clone())
+        })
+
+        $(".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() {
+            $(".footer_input").append($(this).clone())
+        });
+
+        $(".footer_menu .aaa").click(function() {
+            if ($(".menu_footer li").eq($(this).index()).hasClass("active")) {
+                $(".footer_topmenu").hide()
+                $(".menu_footer li").eq($(this).index()).removeClass("active")
+              
+            } else {
+                $(".footer_topmenu").show()
+                $(".menu_footer li").eq($(this).index()).click()
+            }
+        })
+
+        $(".font input").on("input", function () {
+            self.color = $(this).val()
+        })
+
+        $(".font select").on("change", function () {
+            self.size = $(this).val()
+
+        })
+
+        $(".qipao input").on("input", function () {
+            console.log($(this).val());
+            Bself.background = $(this).val()
+            
+        })
+
+
+
+        $(".icon-shake").click(function () {
+            self.socket.emit("SetShake", self.UserInfo)
+        })
+       
+    }
+
+    sendMessage(data,type = "right") {
+        $(".content_left").append(`
+            <li class="${type}">
+                <img class="avth" src="${data.img}" alt="">
+                <div class="message">
+                    <div class="name">${data.name}</div>
+                    <div class="message_text">${data.content}</div>
+                </div>
+            </li>
+        `)
+    }
+
+}
+
+new Index();

历届学生/font-end-nine/项目练习/学生项目/冯文焌/7node/聊天室/fonteng/js/login.js

@@ -0,0 +1,67 @@
+const { ipcRenderer } = require("electron");
+
+class Login {
+    constructor () {
+        this.renderPage()
+    }
+
+
+    renderPage() {
+        var type = ""
+        for (var i = 1; i <= 10; i++) {
+
+            i == 3 || i == 4 || i == 5 
+            ? type = "gif" 
+            : type = "jpg"
+
+            $(".modal-body").append(`
+                <img src="./img/${i}.${type}" alt="">
+            `) 
+        }
+
+        // 绑定点击事件
+        $(".modal-body img").click(function () {
+            // 拿到图片地址    更换头像
+            $(".login img").attr("src",$(this).attr("src"))
+            //更换头像后自带关闭对话框
+            $('#myModal').modal('hide')
+        });
+
+
+        $(".enter").click(function() {
+            var name = $(".name").val();
+            var room = $(".room").val();
+
+            if (name.length == 0) {
+                new $.zui.Messager('用户名不能为空', {
+                    // 出来icon弹窗，默认在上方 
+                    icon: 'exclamation-sign',
+                    //图标是危险
+                    type: 'danger'
+                }).show();
+
+                return;
+            }
+
+            if (room.length == 0) {
+                new $.zui.Messager('房间号不能为空', {
+                    icon: 'exclamation-sign',
+                    type: 'danger'
+                }).show();
+
+                return;
+            }
+            //保存数据到本地   对象形式  （名字和值一样用简写）开发者模式应用本地file
+            localStorage.setItem("userInfo", JSON.stringify({
+                //用户名  房间号
+                name, room,
+                //  图片图纸也就是头像
+                img: $(".login img").attr("src")
+            }));
+                //调用这个方法给主进程发消息，跳转界面
+            ipcRenderer.send("openIndex",1)
+        })
+    }
+}
+
+new Login()