UseStudio.NodejsSocket/socket_chat/public/js/main.js

//设置 cookie
function setCookie(c_name,value,expiredays){  // 名称 值 时间
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
//获取 cookie
function getCookie(c_name){ // 名称
    if (document.cookie.length>0)
    {
    c_start=document.cookie.indexOf(c_name + "=")
    if (c_start!=-1)
        { 
        c_start=c_start + c_name.length+1 
        c_end=document.cookie.indexOf(";",c_start)
        if (c_end==-1) c_end=document.cookie.length
        return unescape(document.cookie.substring(c_start,c_end))
        } 
    }
    return ""
}

var socket='';
Socket = function(){
    this.socket='';
    this.init();
    this.content();
}
Socket.prototype={
    init:function(){
        this.socket = io.connect();
    },
    content:function(){
        if(getCookie("name")!=''){
            this.socket.emit('login',{"name":getCookie("name"),"img":localStorage.getItem('img'),"id":getCookie("id")});
        }

        this.socket.on('login',function(r){
            setCookie('id',r.id,10);
        });

        this.socket.on('AllUser',function(r){
            document.querySelector(".chat_room .user_list .list").innerHTML='';
            var html='';
    
            for (let i = 0; i < r.AllUser.length; i++) {
                if(getCookie("id") == r.AllUser[i].id){
                    var dd = "color:red;";
                }else{
                    var dd = "";
                }
                html += `
                <div class="list_1" id="`+r.AllUser[i].id+`" title="`+r.AllUser[i].name+`">
                    <div class="img" onclick="user_info(this,'`+r.AllUser[i].id+`')"><img src="`+r.AllUser[i].img+`" alt=""></div>
                    <div class="name" style="`+dd+`padding-bottom: 9px; height: 21px;overflow: hidden;box-sizing: border-box;margin-top: 6px;margin-left: 49px;">`+r.AllUser[i].name+`</div>
                </div>`;
            }
            document.querySelector(".chat_room .user_list .list").innerHTML=html;

        });
        
        
        this.socket.on('send',function(r){//接受信息
            
            if(r.id == getCookie("id")){//判断发送消息的对象是谁
                var type = "me";
            }else{
                var type = "other";
            }

            if(r.accept=="all"){//判断是否为公共聊天室

                let content = document.querySelectorAll(".chat_room>.content");
                for (let i = 0; i < content.length; i++) {
                    if(content[i].getAttribute("id") == r.accept){
                        chat_information(type,r.id,r.img,r.name,r.content,r.date,content[i]);
                        break;
                    }
                }

            }else{//私聊

                var bool = true;
                let length = document.querySelectorAll(".chat_room>.list .list_1")
                for (let i = 0; i < length.length; i++) {
                    if(length[i].getAttribute("id") == r.accept||length[i].getAttribute("id") == r.send){//判断是否有聊天用户列表
                        bool=false;
                    }
                }

                if(bool){
                    private_chat('',0,r.name,r.img,r.id);//私聊操作 显示用户列表 聊天框
                }


                let content = document.querySelectorAll(".chat_room>.content");
                for (let i = 0; i < content.length; i++) {
                    if(content[i].getAttribute("id") == r.accept||content[i].getAttribute("id") == r.send){//找到聊天框
                        chat_information(type,r.id,r.img,r.name,r.content,r.date,content[i]);//显示消息内容
                        break;
                    }
                }


            }

            var list = document.querySelectorAll(".chat_room>.list>.list_1");
            for (let i = 0; i < list.length; i++) {
                if(list[i].getAttribute("id") == r.send||list[i].getAttribute("id") == r.accept){
                    if(list[i].className!="list_1 on"){//接受信息的框如果不是在现在显示的  就加个红点提示有消息
                        if(!list[i].querySelector(".prompt")){
                            var prompt = document.createElement("div");
                            prompt.className = "prompt";
                            prompt.innerHTML = '.';
                            list[i].appendChild(prompt);
                        }
                    }
                    break;
                }
            }


        });
    }
}



if(getCookie("name")==''||localStorage.getItem('img')==''){//判断是否有设置名称和头像
    document.querySelector(".setting .img img").src=localStorage.getItem('img');
    document.querySelector(".setting .info .name").value=getCookie("name");
    document.querySelector(".setting").style.display='block';
}else{
    document.querySelector("body").removeChild(document.querySelector(".setting"));
    socket = new Socket();//new 一个socket对象
}




var chant_id="all";//当前聊天室id


changepic=function(This,img) {//头像上传后执行的函数  
    var reads= new FileReader();
    f=This.files[0];
    reads.readAsDataURL(f);

    fileSize =This.files[0].size;
    var size = fileSize / 1024;
    var fileMaxSize = 1024;//设置头像大小不能超过300K
    if (size > fileMaxSize) {
        alert("文件大小不能大于1M！");
        This.value = "";
        return false;
    }else if (size <= 0) {
        alert("文件大小不能为0M！");
    }
    reads.onload=function (e) {
        img.src=this.result;
    }
}

//  type 聊天类型id   id 聊天id   img 头像   name 名称  content 内容  date 时间 create_obj 创建在哪个div聊天框中
chat_information=function(type,id,img,name,content,date,create_obj){//添加消息内容

    var div = document.createElement("div");
    div.className=type;
    div.innerHTML=`
        <div class="img" id="`+id+`" onclick="user_info(this,'`+id+`')">
            <img src="`+img+`" alt="">
        </div>
        <p class="name">`+name+`</p><br/><br/>
        <p class="content">
            `+decodeURI(content)+`
            <span class="date">`+date+`</span>
        </p>`;
    create_obj.appendChild(div);
    create_obj.scrollTop = create_obj.scrollHeight;//将聊天框滚动到最底部
}

issetting=function(){//判断是否有设置头像 名称
    if(document.querySelector(".ok")){
        document.querySelector(".ok").onclick=function(){
            var img  = document.querySelector(".setting .img img").src;
            var name = document.querySelector(".setting_main .info .name").value;
            if(img==''||name==''){
                alert("不能为空，请重新输入！");
                return;
            }
            setCookie('name',name,10);      //设置cookie
            localStorage.setItem('img',img);//将头像放置到 localStorage中
            alert("设置成功!");
            document.querySelector("body").removeChild(document.querySelector(".setting"));
            socket = new Socket();//new 一个socket对象
        }
    }
}
issetting();

send=function(This){//发送消息
    if(This.parentNode.querySelector(".input_content").value.trim()==''){
        This.parentNode.querySelector(".input_content").value='';
        return false;
    }
    var type = chant_id;//获取当前聊天的id
    var img  = localStorage.getItem('img');//获取头像
    var name = getCookie("name");//获取用户名
    var content = This.parentNode.querySelector(".input_content").value;//获取聊天的内容
    content = encodeURI(content);//将聊天的内容url编码
    var DATE =new Date();
    var date = DATE.getHours()+":"+DATE.getMinutes()+":"+DATE.getSeconds();//时间

    This.parentNode.querySelector(".input_content").value='';//清空聊天框内容

    socket.socket.emit("send",{"accept":type,"send":getCookie("id"),'id':getCookie("id"),"img":img,"name":name,"content":content})//发送给请求给服务器
}

user_info=function(This,id){//点击头像 会显示该用户的信息 可进行私聊
    if(getCookie("id")==id){//如果点击的是自己的头像 就不显示
        alert("自己");
        return;
    }
    var div = document.createElement("div");
    div.className="setting";
    div.style.display='block';
    var html=`
        <div class="setting_main" style="height: 250px;">
            <div class="img">
                <img src="`+This.querySelector("img").src+`"/>
            </div>
            <div onclick="document.querySelector('body').removeChild(document.querySelector('.setting'))" style="position: absolute;top: 9px;right: 11px;color: #757575; cursor: pointer;">X</div>
            <div style="text-align: center;margin-top:10px;">`+This.parentNode.querySelector(".name").innerHTML+`</div>
            <input type="button" value="私聊" class="ok" onclick="private_chat(this,1,'`+This.parentNode.querySelector(".name").innerHTML+`','`+This.querySelector("img").src+`','`+id+`')">
        </div>`;
    div.innerHTML=html;
    document.querySelector("body").appendChild(div);

}

private_chat=function(This,bool,name,img,id){
    //私聊操作  This 触发对象  bool (判断是私聊的  还是被私聊的 1是私聊的 0被私聊)  name 名称  img 头像  id

    var qq = true;
    let list_1 = document.querySelectorAll(".chat_room>.list .list_1");
    for (let i = 0; i < list_1.length; i++) {
        if(list_1[i].getAttribute("id") == id){//判断聊天列表中 是否有该用户
            qq=false;
        }
    }

    if(qq){//聊天列表中没有改用户 创建聊天列表 创建聊天框
        var div = document.createElement("div");
        div.className = 'list_1';
        div.id = id;
        div.onclick=function(){char_list(this);};
        div.innerHTML=`
        <div class="img"><img src="`+img+`" alt=""></div>
        <div class="title">`+name+`</div>
        <div class="info"></div>`;

        var content_div = document.createElement("div");
        content_div.className = "content";
        content_div.id = id;
        content_div.style.display = "none";

        document.querySelector(".chat_room .list").appendChild(div);
        document.querySelector(".chat_room").appendChild(content_div);
    }

    if(bool==1){//如果是主动私聊的 就将跟该用户的聊天列表和聊天框显示出来
        chant_id = id;
        char_list_on(id)
        chat_room_content_on(id)
    }

    if(document.querySelector(".setting")){//删除查看用户信息的弹窗
        document.body.removeChild(document.querySelector(".setting"));
    }

}

char_list_on=function(id){//切换至某个用户列表显示
    let list_1 = document.querySelectorAll(".chat_room .list .list_1");
    for (let i = 0; i < list_1.length; i++) {
        list_1[i].className = "list_1";
        if(list_1[i].getAttribute("id") == id){
            list_1[i].className = "list_1 on";
            if(list_1[i].querySelector(".prompt")){
                list_1[i].removeChild(list_1[i].querySelector(".prompt"));
            }
        }
    }
}

chat_room_content_on=function(id){//切换至某个用户聊天框显示
    let content = document.querySelectorAll(".chat_room>.content");
    for (let i = 0; i < content.length; i++) {
        content[i].style.display = "none";
        if(content[i].getAttribute("id") == id){
            content[i].style.display = "block";
        }
    }
}

char_list=function(This){//列表点击切换 并切换聊天框
    chant_id=This.getAttribute("id");
    var length = document.querySelectorAll(".chat_room .list .list_1");
    for (let i = 0; i < length.length; i++) {
        length[i].className = "list_1";
    }
    This.className= "list_1 on";

    if(This.querySelector(".prompt")){
        This.removeChild(This.querySelector(".prompt"));
    }

    chat_room_content_on(This.getAttribute("id"));//切换至某个用户聊天框显示

}


document.querySelector(".input_content").onfocus=function(){//聊天输入框的回车事件
    document.onkeyup = function (e) {//按键信息对象以函数参数的形式传递进来了，就是那个e  
        var code = e.charCode || e.keyCode;  //取出按键信息中的按键代码(大部分浏览器通过keyCode属性获取按键代码，但少部分浏览器使用的却是charCode)  
        if (code == 13) {//code 为 13 是回车
            document.querySelector(".chat_room .input input").click();
        }
    }  
}