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

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