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

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