first commit

项目合集/聊天室/chat_fontend/js/.pydio

@@ -0,0 +1 @@
+04fc6e04-bae9-4cf1-8a3e-fa6b7941f4bc

项目合集/聊天室/chat_fontend/js/config/.pydio

@@ -0,0 +1 @@
+dd03d034-43c9-4cd9-8676-d4d20bd1893b

项目合集/聊天室/chat_fontend/js/config/index.js

@@ -0,0 +1,90 @@
+var config = {
+    SocketUrl: 'http://127.0.0.1:3000/',
+    // emoji表情
+    emoji: [
+        ['😀','😁','😂','😃','😄','😅','😆','😉','😊','😋','😎','😍','😘','😗','😙','😚','😇','😐',
+        '😑','😶','😏','😣','😥,','😮','😯','😪','😫','😴','😌','😛','😜','😝','😒','😓','😔','😕',
+        '😲','😷','😖','😞','😟','😤','😢','😭','😦','😧','😨','😬','😰','😱','😳','😵','😡','😠'],
+        ['👦','👧','👨','👩','👴','👵','👶','👱','👮','👲','👳','👷','👸','💂','🎅','👰','👼','💆',
+        '💇','🙍','🙎','🙅','🙆','💁','🙋','🙇','🙌','🙏','👤','👥','🚶','🏃','👯','💃','👫','👬','👭','💏','💑','👪'],
+        ['💪','👈','👉','☝','👆','👇','✌','✋','👌','👍','👎','✊','👊','👋','👏','👐','✍'],
+        ['👣','👀','👂','👃','👅','👄','💋','👓','👔','👕','👖','👗','👘','👙','👚','👛','👜',
+        '👝','🎒','💼','👞','👟','👠','👡','👢','👑','👒','🎩','🎓','💄','💅','💍','🌂'],
+        ['📱','📲','📶','📳','📴','☎','📞','📟','📠'],
+        ['♻','🏧','🚮','🚰','♿','🚹','🚺','🚻','🚼','🚾','⚠','🚸','⛔','🚫','🚳','🚭','🚯','🚱','🚷','🔞','💈'],
+        ['🙈','🙉','🙊','🐵','🐒','🐶','🐕','🐩','🐺','🐱','😺','😸','😹','😻','😼','😽','🙀','😿','😾',
+        '🐈','🐯','🐅','🐆','🐴','🐎','🐮','🐂','🐃','🐄','🐷','🐖','🐗','🐽','🐏','🐑','🐐','🐪','🐫',
+        '🐘','🐭','🐁','🐀','🐹','🐰','🐇','🐻','🐨','🐼','🐾','🐔','🐓','🦆','🦢','🕊','🦜','🦉','🐣',
+        '🐤','🐥','🐦','🐧','🐸','🐊','🐢','🐍','🐲','🐉','🐳','🐋','🐬','🐟','🐠','🐡','🐙','🐚','🐌',
+        '🐛','🐜','🐝','🐞','🦋'],
+        ['💐','🌸','💮','🌹','🌺','🌻','🌼','🌷','🌱','🌲','🌳','🌴','🌵','🌾','🌿','🍀','🍁','🍂','🍃'],
+        ['🌍','🌎','🌏','🌐','🌑','🌒','🌓','🌔','🌕','🌖','🌗','🌘','🌙','🌚','🌛','🌜','☀','🌝','🌞','⭐',
+        '🌟','🌠','☁','⛅,','☔','⚡','❄','🔥','💧','🌊'],
+        ['🍇','🍈','🍉','🍊','🍋','🍌','🍍','🍎','🍏','🍐','🍑','🍒','🍓','🍅','🍆','🌽','🍄','🌰','🍞','🍖',
+        '🍗','🍔','🍟','🍕','🍳','🍲','🍱','🍘','🍙','🍚','🍛','🍜','🍝','🍠','🍢','🍣','🍤','🍥','🍡','🍦',
+        '🍧','🍨','🍩','🍪','🎂','🍰','🍫','🍬','🍭','🍮','🍯','🍼','☕','🍵','🍶','🍷','🍸','🍹','🍺','🍻','🍴'],
+        ['🎪','🎭','🎨','🎰','🚣','🛀','🎫','🏆','⚽','⚾','🏀','🏈','🏉','🎾','🎱','🎳','⛳','🎣','🎽','v🎿','🏂'
+        ,'🏄','🏇','🏊','🚴','🚵','🎯','🎮','🎲','🎷','🎸','🎺','🎻','🎬'],
+        ['🌋','🗻','🏠','🏡','🏢','🏣','🏤','🏥','🏦','🏨','🏩','🏪','🏫','🏬','🏭','🏯','🏰','💒','🗼','🗽','⛪',
+        '⛲','🌁','🌃','🌆','🌇','🌉','🌌','🎠','🎡','🎢','🚂','🚃','🚄','🚅','🚆','🚇','🚈','🚉','🚊','🚝','🚞','🚋',
+        '🚌','🚍','🚎','🚏','🚐','🚑','🚒','🚓','🚔','🚕','🚖','🚗','🚘','🚚','🚛','🚜','🚲','⛽','🚨','🚥','🚦','🚧',
+        '⚓','⛵','🚤','🚢','✈','💺','🚁','🚟','🚠','🚡','🚀','🎑','🗿','🛂','🛃','🛄','🛅'],
+        ['💌','💎','🔪','💈','🚪','🚽','🚿','🛁','⌛','⏳','⌚','⏰','🎈','🎉','🎊','🎎','🎏','🎐','🎀','🎁','📯','📻',
+        '📱','📲','☎','📞','📟','📠','🔋','🔌','💻','💽','💾','💿','📀','🎥','📺','📷','📹','📼','🔍','🔎','🔬','🔭',
+        '📡','💡','🔦','🏮','📔','📕','📖','📗','📘','📙','📚','📓','📃','📜','📄','📰','📑','🔖','💰','💴','💵','💶',
+        '💷','💸','💳','✉','📧','📨','📩','📤','📥','📦','📫','📪','📬','📭','📮','✏','✒','📝','📁','📂','📅','📆','📇',
+        '📈','📉','📊','📋','📌','📍','📎','📏','📐','✂','🔒','🔓','🔏','🔐','🔑','🔨','🔫','🔧','🔩','🔗','💉','💊',
+        '🚬','🔮','🚩','🎌','💦','💨'],
+        ['♠','♥','♦','♣','🀄','🎴','🔇','🔈','🔉','🔊','📢','📣','💤','💢','💬','💭','♨','🌀','🔔','🔕','✡','✝','🔯',
+        '📛','🔰','🔱','⭕','✅','☑','✔','✖','❌','❎','➕','➖','➗','➰','➿','〽','✳','✴','❇','‼','⁉','❓','❔','❕'
+        ,'❗','©','®','™','🎦','🔅','🔆','💯','🔠','🔡','🔢','🔣','🔤','🅰','🆎','🅱','🆑','🆒','🆓','ℹ','🆔','Ⓜ','🆕',
+        '🆖','🅾','🆗','🅿','🆘','🆙','🆚','🈁','🈂','🈷','🈶','🈯','🉐','🈹','🈚','🈲','🉑','🈸','🈴','🈳','㊗','㊙','🈺',
+        '🈵','▪','▫','◻','◼','◽','◾','⬛','⬜','🔶','🔷','🔸','🔹','🔺','🔻','💠','🔲','🔳','⚪','⚫','🔴','🔵'],
+        ['🐁','🐂','🐅','🐇','🐉','🐍','🐎','🐐','🐒','🐓','🐕','🐖'],
+        ['♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓','⛎'],
+        ['🕛','🕧','🕐','🕜','🕑','🕝','🕒','🕞','🕓','🕟','🕔','🕠','🕕','🕡','🕖','🕢','🕗','🕣','🕘','🕤','🕙','🕥',
+        '🕚','🕦','⌛','⏳','⌚','⏰','⏱','⏲','🕰'],
+        ['💘','❤','💓','💔','💕','💖','💗','💙','💚','💛','💜','💝','💞','💟','❣'],
+        ['📱','📲','☎','📞','📟','📠','🔋','🔌','💻','💽','💾','💿','📀','🎥','📺','📷','📹','📼','🔍','🔎','🔬','🔭',
+        '📡','📔','📕','📖','📗','📘','📙','📚','📓','📃','📜','📄','📰','📑','🔖','💳','✉','📧','📨','📩','📤','📥','📦',
+        '📫','📪','📬','📭','📮','✏','✒','📝','📁','📂','📅','📆','📇','📈','📉','📊','📋','📌','📍','📎','📏','📐','✂',
+        '🔒','🔓','🔐','🔑']        
+    ],
+
+    GifLength: 13,
+
+    // qq 表情
+    // 静态png表情，渲染到页面上的时候需要加上：数字+fix@2x.png
+    PngImg: ['0','115','130','147','162','178','194','211','25','27','43','67','96',
+    '100','116','131','148','163','179','197','212','260','28','46','69','97',
+    '101','117','132','149','164','180','198','214','261','29','49','6','98',
+    '102','118','133','14','165','181','199','215','262','2','4','72','99',
+    '103','119','134','150','166','182','19','216','263','30','53','74','9',
+    '104','11','136','151','167','183','1','217','264','31','54','75',
+    '105','120','137','152','168','184','200','218','265','32','55','76',
+    '106','121','138','153','169','185','201','219','266','33','56','77',
+    '107','122','139','154','16','186','202','21','267','34','57','78',
+    '108','123','13','155','170','187','203','220','268','35','59','79',
+    '109','124','140','156','171','188','204','221','269','36','5','7',
+    '10','125','141','157','172','189','205','22','26','37','60','85',
+    '110','126','142','158','173','18','206','23','270','38','61','86',
+    '111','127','143','159','174','190','207','245','271','39','62','89',
+    '112','128','144','15','175','191','208','246','272','3','63','8',
+    '113','129','145','160','176','192','20','247','273','41','64','90',
+    '114','12','146','161','177','193','210','24','274','42','66','91'],
+
+    // 动态gif表情，和png对应。渲染到页面上的时候需要加上： 数字+@2x.gif
+    GifImg: ['0','111','123','136','148','15','171','184','198','20','22','266','2','42','61','78','9',
+    '100','112','124','137','149','160','172','185','199','210','23','267','30','43','62','79',
+    '101','113','125','138','14','161','173','186','19','211','245','268','31','46','63','7',
+    '102','114','126','139','150','162','174','187','1','212','246','269','32','49','64','85',
+    '103','115','127','13','151','163','175','188','200','214','247','26','33','4','66','86',
+    '104','116','128','140','152','164','176','189','201','215','24','270','34','53','67','89',
+    '105','117','129','141','153','165','177','18','202','216','25','271','35','54','69','8',
+    '106','118','12','142','154','166','178','190','203','217','260','272','36','55','6','90',
+    '107','119','130','143','155','167','179','191','204','218','261','273','37','56','72','91',
+    '108','11','131','144','156','168','180','192','205','219','262','274','38','57','74','96',
+    '109','120','132','145','157','169','181','193','206','21','263','27','39','59','75','97',
+    '10','121','133','146','158','16','182','194','207','220','264','28','3','5','76','98',
+    '110','122','134','147','159','170','183','197','208','221','265','29','41','60','77','99']
+}

项目合集/聊天室/chat_fontend/js/lib/.pydio

@@ -0,0 +1 @@
+52027c29-105f-42b7-bbe4-1769b1385dd3

项目合集/聊天室/chat_fontend/js/page/.pydio

@@ -0,0 +1 @@
+c788588c-b94a-45f8-ad89-02d7da09a2e4

项目合集/聊天室/chat_fontend/js/page/index.js

@@ -0,0 +1,267 @@
+class Index {
+    constructor() {
+        this.UserInfo = JSON.parse(localStorage.getItem("UserInfo"))
+        this.onSocket()
+        this.bindIconClick()
+        this.RenderEmoji()
+    }
+
+    onSocket() {
+
+        // 设置用户的头像和名字
+        $(".main_header span").text(this.UserInfo.name)
+        $(".main_header img").attr("src", `../img/${this.UserInfo.url}`)
+
+        // 显示欢迎信息
+        ws.socket.on("WelcomeUser", (res) => {
+            $(".height").append(`
+                <li class="system">
+                    <p>${res}</p>
+                </li>
+            `);
+
+            $(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
+        })
+
+        // 获取在线用户数量
+        ws.socket.on("RoomOnline", (res) => {
+            $(".right_list").empty()
+            res.forEach(v => {
+                $(".right_list").append(`
+                    <li>
+                        <img alt="" src="../img/${v.url}">
+                        <span>${v.name}</span>
+                    </li>
+                `)
+            })
+
+        })
+
+        // 获取后端给的聊天内容，设置到页面上
+        ws.socket.on("SetMessage", (res) => {
+            $(".height").append(`
+                <li>
+                    <img class="tx" alt="" src="../img/${res.url}">
+                    <div class="r_text">
+                        <p>${res.name}</p>
+                        <div class="c_text" style="background:${res.back}">
+                        ${res.message}
+                        </div>
+                    </div>
+                </li>
+            `);
+            $(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
+        })
+
+        // 从后端拿到历史记录，然后渲染页面
+        ws.socket.on("SetHistory", (res) => {
+            res.forEach(v => {
+                $(".height").append(`
+                        <li class="${v.name == this.UserInfo.name ? 'me_message' : ''}">
+                            <img class="tx" alt="" src="../img/${v.url}">
+                            <div class="r_text">
+                                <p>${v.name}</p>
+                                <div class="${v.message.indexOf("<img src=") != -1 ? 'clearQiPao' : ''} c_text" style="background:${v.back}">
+                                  ${v.message}
+                                </div>
+                            </div>
+                        </li>
+                `);
+
+                $(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
+            })
+        })
+
+        // 开始抖动
+        ws.socket.on("StartShake", (res) => {
+            $(".main").addClass("startAn")
+            setTimeout(function () {
+                $(".main").removeClass("startAn")
+            }, 3000)
+        })
+
+        // 加入房间
+        ws.socket.emit("JoinRoom", this.UserInfo)
+        // 获取历史聊天记录
+        ws.socket.emit("GetHistoryList", this.UserInfo)
+
+        $(document).keydown((event) => {
+            if (event.keyCode == 13) {
+                event.preventDefault();
+                var UserInput = $(".main_input textarea").val();
+                // 获取设置的颜色
+                var color = $(".main_input textarea").css("color"),
+                    size = $(".main_input textarea").css("font-size");
+                var styleText = `<span style="color: ${color}; font-size: ${size}">${UserInput}</span>`;
+                this.UserInfo.message = styleText;
+                this.UserInfo.back = document.querySelector(".qipao_select").style.color
+
+
+
+                ws.socket.emit("SendMessage", this.UserInfo)
+                $(".height").append(`
+                    <li class="me_message">
+                        <img class="tx" alt="" src="../img/${this.UserInfo.url}">
+                        <div class="r_text">
+                            <p>${this.UserInfo.name}</p>
+                            <div class="c_text" style="background:${this.UserInfo.back}">
+                                ${this.UserInfo.message}
+                            </div>
+                        </div>
+                    </li>
+                `);
+
+                $(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
+
+                $(".main_input textarea").val("")
+            }
+        });
+    }
+
+    // 遍历表情 绑定事件
+    RenderEmoji() {
+        // 遍历表情
+        config.emoji.forEach(v => {
+            v.forEach(s => {
+                $(".emoji").append(`<span>${s}</span>`)
+            })
+        })
+        var slec = this;
+        $(".emoji span").on("click", function () {
+            slec.innerEmoji($(this).text())
+        })
+
+        // 遍历动图
+        for (var i = 0; i < config.GifLength; i++) {
+            $(".gif").append(`
+                <img src="../img/gif/${i}.gif" alt="${i}"/>
+            `)
+        }
+        // 为动图绑定事件
+        $(".gif img").on("click", function () {
+            slec.UserInfo.message = $(this)[0].outerHTML;
+            ws.socket.emit("SendMessage", slec.UserInfo)
+            $(".height").append(`
+                    <li class="me_message">
+                        <img class="tx" alt="" src="../img/${slec.UserInfo.url}">
+                        <div class="r_text">
+                            <p>${slec.UserInfo.name}</p>
+                            <div class="clearQiPao c_text">
+                              ${slec.UserInfo.message}
+                            </div>
+                        </div>
+                    </li>
+                `);
+
+            $(".left_chat").animate({ scrollTop: $(".height").outerHeight() }, 1);
+
+            $(".main_input textarea").val("")
+        })
+
+
+        $('.font').click(function(e){
+            e.stopPropagation()
+        })
+        // 选择字体大小
+        $('.font select').change(function (e) {
+            var data = $(this).val();
+            $(".main_input textarea").css("font-size", data)
+        });
+
+        // 设置颜色
+        $('.font input').bind("input propertychange", function (e) {
+            $(".main_input textarea").css("color", $(this).val())
+        })
+
+        // 设置颜色
+        $('.qipao input').bind("input propertychange", function (e) {
+            console.log("11111");
+            $(".qipao_select").css("color", $(this).val())
+        })
+
+
+    }
+
+    /**
+     * 在光标的指定位置插入字符
+     * @param {*} myValue 
+     */
+    innerEmoji(myValue) {
+        var $t = $(".main_input textarea")[0];
+        if ($t.selectionStart || $t.selectionStart == "0") {
+            var startPos = $t.selectionStart;
+            var endPos = $t.selectionEnd;
+            var scrollTop = $t.scrollTop;
+            $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
+            $t.focus();
+            $t.selectionStart = startPos + myValue.length;
+            $t.selectionEnd = startPos + myValue.length;
+            $t.scrollTop = scrollTop;
+        } else {
+            this.value += myValue;
+            $t.focus();
+        }
+    }
+
+    /**
+     * 为底部工具栏图标绑定点击事件
+     */
+    bindIconClick() {
+        var self = this;
+        var isShowEmoji = false;
+        var isShowGif = false;
+        $(".tools i").on("click", function () {
+            switch ($(this).index()) {
+                // 表情 被点击
+                case 0:
+                    console.log("表情");
+                    if (isShowEmoji) {
+                        $(".emoji").css({
+                            width: 0,
+                            height: 0
+                        });
+                        isShowEmoji = false
+                    } else {
+                        $(".emoji").css({
+                            width: "402px",
+                            height: "200px"
+                        });
+                        isShowEmoji = true
+                    }
+                    break;
+                case 1:
+                    console.log("动图");
+                    if (isShowGif) {
+                        $(".gif").css({
+                            width: 0,
+                            height: 0
+                        });
+                        isShowGif = false
+                    } else {
+                        $(".gif").css({
+                            width: "415px",
+                            height: "200px"
+                        });
+                        isShowGif = true
+                    }
+                    break;
+                case 2:
+                    console.log("字体");
+                    $('.font').toggle()
+                    break;
+                // 抖动 被点击 
+                case 3:
+                    console.log("抖动");
+                    ws.socket.emit("Shake", self.UserInfo)
+                    break;
+                case 4:
+                    console.log("气泡");
+                    $('.qipao').toggle()
+                    break;
+            }
+
+        })
+    }
+}
+
+new Index()

项目合集/聊天室/chat_fontend/js/page/login.js

@@ -0,0 +1,77 @@
+class Login {
+    constructor() {
+        this.ImgList = [
+            '1.jpg','2.jpg','3.gif','4.gif','5.gif',
+            '6.jpg','7.jpg','8.jpg','9.jpg','10.jpg'
+        ];
+        this.UserChiooseImg = "1.jpg"
+        this.RenderUserImg()
+        this.bindClickEnterRoom()
+        this.onSocket()
+    }
+
+
+    RenderUserImg() {
+        this.ImgList.forEach((v,i)=>{
+            $(".chiooseUserImg").append(`
+                <li class="${i == 0 ? 'active' : ''}">
+                    <img src="../img/${v}" alt="">
+                </li>
+            `);
+        });
+
+        // 绑定选中事件
+        var li = $(".chiooseUserImg li");
+        var self = this;
+        li.on("click", function() {
+            // 切换激活样式
+            $(this).addClass("active").siblings().removeClass("active");
+            // 获取你点击li的下标
+            var index = $(this).index();
+            // 将用户选中的图片保存到 UserChiooseImg
+            self.UserChiooseImg = self.ImgList[index];
+        });
+
+        $(".setUserImage").on("click", () => {
+            $(".login img").attr("src", `../img/${this.UserChiooseImg}`)
+            $('#chiooseImg').modal('hide')
+        })
+    }
+
+    bindClickEnterRoom() {
+        $(".icon-tubiaozhizuomoban").on("click", () => {
+            var name = $(".name").val();
+            var room = $(".room").val();
+
+            if (name.length == 0) {
+                new $.zui.Messager('用户名不能为空！', {
+                    icon: 'exclamation-sign',
+                    type: 'danger'
+                }).show();
+            } else {
+                ws.socket.emit("UserLogin", {
+                    name: name,
+                    url: this.UserChiooseImg,
+                    room: room
+                });
+            }
+        })
+    }
+
+    onSocket() {
+        // 如果用户已存在
+        ws.socket.on("UserAlready", res => {
+            new $.zui.Messager(res, {
+                icon: 'exclamation-sign',
+                type: 'danger'
+            }).show();
+        })
+
+        ws.socket.on("LoginSuccess", (res) => {
+           localStorage.setItem("UserInfo", JSON.stringify(res))
+           go("index.html")
+        })
+    }
+}
+
+new Login();

项目合集/聊天室/chat_fontend/js/utils/.pydio

@@ -0,0 +1 @@
+58a92044-19be-4658-9f8f-dd32342abdc3

项目合集/聊天室/chat_fontend/js/utils/index.js

@@ -0,0 +1,3 @@
+function go (url) {
+    location.href = url
+}

项目合集/聊天室/chat_fontend/js/utils/socket.js

@@ -0,0 +1,16 @@
+/**
+ * 对 Socket.io 进行封装，方便再其他页面直接使用
+ */
+class WebSocket {
+    constructor () {
+        this.socket = null;
+        this.CreatedWebSocket()
+    }
+
+    CreatedWebSocket() {
+        this.socket = io(config.SocketUrl)
+    }
+
+}
+
+var ws = new WebSocket()