master

分支 (1)

管理

管理

master

frontend102
/
teamChatRoom.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="teamChatRoomStyle.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/2.3.1/socket.io.js"></script>
</head>
<body>
    <!-- 登录界面 -->
    <div class="loginBackground" >
        <div class="loginbox">
            <div class="title"><h1>欢迎登录后台管理~</h1></div>
                <div class="input">
                   <span>管理员</span>
                   <input id="uname" type="text" placeholder="请输入用户名">
                </div>
                <div class="input">
                  <span>密&nbsp;&nbsp;&nbsp;码</span>
                  <input id="password" type="password" placeholder="请输入密码">
                </div>
                <div class="loginBox">
                    <button id="login">
                     <span class="loginText">登录</span>
                    </button>
                </div>
        </div>
    </div>

    <!-- 聊天框 -->
    <div class="chatroom" >
      <div class="box">
        <div class="hd">
            <div class="hdl">
                <button id="btnCustomer" class="crCuscClick">
                    Customer
                </button>
                <button id="btnTeammember" class="crTeam">
                    Teamate
                </button>
            </div>
        </div>

       <div class="body">
            <!-- 在线用户列表 -->
            <div class="cusOnlines">
                <div class="onlineText">OnlineList</div>
                <div class="cusOnlinesT"></div>
            </div>
            <div class="teamOnlines">
                <div class="onlineText">OnlineList</div>
                <div class="teamOnlinesT"></div>
            </div>

            <div class="cl">
                <!-- 群聊天记录 -->
                <div class="clt"></div>
                <div class="clr">
                    <textarea class="p2pInput" id="ct" type="text"></textarea>
                    <button class="teamSend" id="send">Send</button>
                </div>
            </div>

       </div>

        <!-- team个人聊天 -->
        <div class="p2p" id="dv">
            <div class="p2phd"></div>
            <div class="list"></div>
            <div>
                <button class="close">X</button>
                <textarea class="p2pInput" type="text" id="msg"></textarea>
                <button class="teamSend" id="tosend">Send</button>
            </div>
      </div>

        <!-- customer个人聊天 -->
        <div class="a2c" id="acdv">
            <div class="acP2phd"></div>
            <div class="acList"></div>
            <div>
                <button class="acClose">X</button>
                <textarea class="acP2pInput" type="text" id="acMsg"></textarea>
                <button class="ACteamSend" id="acTosend">Send</button>
            </div>
      </div>
    </div>

    <script>
      //链接socket
        const startsocket=(uname)=>{
            const sc=io('http://127.0.0.1:7001?uname='+uname)
            //连接成功
            sc.on('connect',()=>{
                console.log('连接成功')
                sc.emit('getOnlines')//主动获取在线用户列表
                sc.emit('getCusOnlines')//主动获取在线顾客列表
                sc.emit('getHistory')//去获取群聊历史

            })//链接成功

            //点击Teamate 选择
            document.getElementById('btnTeammember').addEventListener('click',()=>{
                document.getElementById("btnCustomer").classList.replace("crCuscClick","crCus")
                document.getElementById("btnTeammember").classList.replace("crTeam","crTeamClick")
                document.querySelector(".cusOnlines").style.display="none";
                document.querySelector(".teamOnlines").style.display="flex";
            })
            //点击Customer
            document.getElementById('btnCustomer').addEventListener('click',()=>{
                document.getElementById("btnTeammember").classList.replace("crTeamClick","crTeam")
                document.getElementById("btnCustomer").classList.replace("crCus","crCuscClick")
                document.querySelector(".cusOnlines").style.display="flex"
                document.querySelector(".teamOnlines").style.display="none"
                // document.querySelector(".crCuscClick").style.display="flex"
            })

            //点击给所有人发送消息
            document.getElementById('send').addEventListener('click',()=>{
                const ct=document.getElementById('ct').value
                const from=document.getElementById('uname').value
                const to ="all"
                sc.emit('send',{from,to,ct})
                document.getElementById('ct').value=''
            })

            //点击队员头像显示弹框
            document.querySelector('.teamOnlinesT').addEventListener('click',ev=>{
                const classname=ev.target.classList.contains('u')
                if(!classname) return;
                const u=ev.target.id;
                const uname=document.getElementById('uname').value
                const  p2pdom=document.querySelector('.p2p');
                if(u!==uname){
                    if(document.getElementById(u).querySelector('.newMessage')){
                    document.getElementById(u).querySelector('.newMessage').innerHTML="" }
                    p2pdom.style.display="block";
                    document.querySelector('.p2phd').innerHTML=` <div class="p2phdT">与<span id="teamTalk">${u}</span>对话框</div>`
                    const curdom =document.querySelector('.cur')
                    curdom ? curdom.classList.remove('cur'):""
                    ev.target.classList.add('cur')
                    sc.emit('getp2phis', {from:uname,to:u} ) // 拉取跟当前用户的历史聊天记录
                }
            })

            //点击顾客显示弹框
            document.querySelector('.cusOnlinesT').addEventListener('click',ev=>{
                const classname=ev.target.classList.contains('cus')
                if(!classname) return;
                const cus=ev.target.id;
                const uname=document.getElementById('uname').value
                const  p2pdom=document.querySelector('.a2c');
                if(document.getElementById(cus).querySelector('.newMessage')){//新消息的提醒
                    document.getElementById(cus).querySelector('.newMessage').innerHTML="" }
                    p2pdom.style.display="block";
                    document.querySelector('.acP2phd').innerHTML=` <div class="acP2phdT">与<span id="cusTalk">${cus}</span>对话框</div>`

                    const curdom =document.querySelector('.cur')
                    curdom ? curdom.classList.remove('cur'):""
                    ev.target.classList.add('cur')

                    sc.emit('getCusAdminHistory', {from:cus,to:cus} ) // 拉取跟当前用户的历史聊天记录
            })


            //点击关闭Team弹框
            document.querySelector('.close').addEventListener('click',()=>{
                const u=document.getElementById("teamTalk").innerText;
                document.querySelector('.p2phd').innerText=""
                document.querySelector('.list').innerText=""
                document.querySelector('.p2p').style.display="none"
                if(document.getElementById(u).querySelector('.newMessage')){
                    document.getElementById(u).querySelector('.newMessage').innerHTML=""
                }
            })
             //点击关闭customer弹框
            document.querySelector('.acClose').addEventListener('click',()=>{
                const u=document.getElementById("cusTalk").innerText;
                document.querySelector('.acP2phd').innerText=""
                document.querySelector('.acList').innerText=""
                document.querySelector('.a2c').style.display="none"
                if(document.getElementById(u).querySelector('.newMessage')){
                    document.getElementById(u).querySelector('.newMessage').innerHTML=""
                }
            })

            //发送给队员点对点发送消息
            document.getElementById('tosend').addEventListener('click',()=>{
                const ct=document.getElementById('msg').value;
                const from=document.getElementById('uname').value;
                const to=document.querySelector('.cur').id;
                sc.emit('p2pmsg',{ct,from,to})
                document.getElementById('msg').value=''
            })

             //点对点发送给顾客消息
            document.getElementById('acTosend').addEventListener('click',()=>{
                const ct=document.getElementById('acMsg').value;
                const from=document.getElementById('uname').value;
                const to=document.querySelector('.cur').id;
                sc.emit('sendToAdmin',{ct,from:"allAdmin",to})
                document.getElementById('acMsg').value=''
            })


            //on是接收
            //接收方客户端用on方法实时监听 对方向服务器emit的事件


            //Team发送方的消息
            sc.on('newmsg',(res)=>{
                const uname=document.getElementById('uname').value
                let isme=""
                // let teamText="teamText"
                if(uname===res.from) isme='isme'
                document.querySelector('.clt').insertAdjacentHTML('beforeend',isme?`
                    <div class="isme">
                    <div class="Text">
                        <div class= "ismeText"> ${res.ct}</div>
                        <span class="fromName">${res.from}</span>
                    </div>
                </div>
                    `:
                    `
                    <div class="notMe">
                    <div class="Text">
                        <span class="fromName">${res.from}</span>
                        <div class="teamText" > ${res.ct}</div>
                    </div>
                </div>
                    `)
            })

            //推送给双方 个人聊天记录 newa2cmsg
            sc.on('newp2pmsg',res=>{
                let isme="";
                const uname=document.getElementById('uname').value
                if(uname===res.from) isme='isme'
                if(!document.getElementById(`${res.from}`).querySelector('.newMessage')) {
                    document.getElementById(`${res.from}`).insertAdjacentHTML('beforeend',isme!=="isme"?`
                        <span  class="newMessage">New message to you!</span>
                    `:"")
                }
                document.querySelector(".list").insertAdjacentHTML('beforeend',isme?`
                    <div class="isme">
                    <div class="Text">
                        <div class= "ismeText"> ${res.ct}</div>
                        <span class="fromName">${res.from}</span>
                    </div>
                </div>
                    `:
                    `
                    <div class="notMe">
                    <div class="Text">
                        <span class="fromName">${res.from}</span>
                        <div class="teamText" > ${res.ct}</div>
                    </div>
                </div>
                    `)
            })

            //发送p2p个人历史聊天记录 Cushis
            sc.on('p2his',list=>{
                const uname = document.getElementById('uname').value;
                 list.map(res=>{
                    let isme ='';
                    // -  ${new Date(res.time).toLocaleTimeString()}
                    if(uname===res.from) isme = 'isme'
                    document.querySelector(".list").insertAdjacentHTML('beforeend',isme?`
                    <div class="isme">
                    <div class="Text">
                        <div class= "ismeText"> ${res.ct}</div>
                        <span class="fromName">${res.from}</span>
                    </div>
                </div>
                    `:
                    `
                    <div class="notMe">
                    <div class="Text">
                        <span class="fromName">${res.from}</span>
                        <div class="teamText" > ${res.ct}</div>
                    </div>
                </div>
                    `)
                 })
            })

            //顾客  推送给双方 个人聊天记录
            sc.on('newa2cmsg',res=>{
                let isme="";
                const uname=document.getElementById('uname').value
                if(res.from==="allAdmin") isme='isme'
                if(!document.getElementById(`${res.from!=="allAdmin" ? res.from :res.to}`).querySelector('.newMessage')) {
                    document.getElementById(`${res.from!=="allAdmin" ? res.from :res.to}`).insertAdjacentHTML('beforeend',isme!=="isme"?`
                        <span  class="newMessage">New message to you!</span>
                    `:"")
                }
                document.querySelector(".acList").insertAdjacentHTML('beforeend',isme?`
                    <div class="isme">
                    <div class="Text">
                        <div class= "ismeText"> ${res.ct}</div>
                        <span class="fromName">me</span>
                    </div>
                </div>
                    `:
                    `
                    <div class="notMe">
                    <div class="Text">
                        <span class="fromName">${res.from}</span>
                        <div class="teamText" > ${res.ct}</div>
                    </div>
                </div>
                    `)
            })


            //监听在线团队用户变化
            sc.on('onlines',(res)=>{
                document.querySelector('.teamOnlinesT').innerHTML=res.map(r=>`
                <div class='u' id='${r}'>
                    <image class="userPortrait" src="image\\userPortrait.png"/>
                       <div class="user_info">
                            <div class="infoFromName">Team ${r}</div>
                       </div>
                </div>
                `).join('')
            })
               //监听在线顾客变化
            sc.on('cusOnlines',(res)=>{
                document.querySelector('.cusOnlinesT').innerHTML=res.map(r=>`
                <div class='cus' id='${r}'>
                    <image class="userPortrait" src="image\\userPortrait.png"/>
                       <div class="user_info">
                            <div class="infoFromName">Customer ${r}</div>
                       </div>
                </div>
                `).join('')
            })

            //监听历史数据的推送

            //Team历史记录
            sc.on('newhis',list=>{
                list.reverse()
                const uname=document.getElementById('uname').value;
                list.map(res=>{
                    let isme ='';
                    if(uname===res.from) isme = 'isme'
                    document.querySelector('.clt').insertAdjacentHTML('beforeend',isme?`
                    <div class="isme">
                    <div class="Text">
                        <div class= "ismeText"> ${res.ct}</div>
                        <span class="fromName">${res.from}</span>
                    </div>
                </div>
                    `:
                    `
                    <div class="notMe">
                    <div class="Text">
                        <span class="fromName">${res.from}</span>
                        <div class="teamText" > ${res.ct}</div>
                    </div>
                </div>
                    `)
                })
            })


            //监听cus历史记录
            sc.on('Cushis',res=>{
                res.reverse()
                res.map((res,index)=>{
                        let isme ='';
                        // -  ${new Date(res.time).toLocaleTimeString()}
                        if(res.from==='allAdmin') isme = 'isme'
                        document.querySelector(".acList").insertAdjacentHTML('beforeend',isme?`
                        <div class="isme">
                        <div class="Text">
                            <div class= "ismeText"> ${res.ct}</div>
                            <span class="fromName">me</span>
                        </div>
                    </div>
                        `:
                        `
                        <div class="notMe">
                        <div class="Text">
                            <span class="fromName">${res.from}</span>
                            <div class="teamText" > ${res.ct}</div>
                        </div>
                    </div>
                        `)
                    })
                })
        }
        //用户登录
        const dologin=()=>{
            const uname=document.getElementById('uname').value;
            window.localStorage.setItem('uname',uname)
            document.querySelector('.loginBackground').style.display="none"
            document.querySelector('.chatroom').style.display="flex"
            startsocket(uname)
        }
        //点击登录
        document.getElementById('login').addEventListener('click',dologin)//用户登录

    </script>
</body>
</html>