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

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();