<?php /*a:1:{s:77:"F:\wpf\WpfApp1\WpfApp1\bin\x64\Debug\web\im/plugin/chat/view/index\index.html";i:1598862069;}*/ ?>
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>

<title>HTML5 websocket 网页聊天室 javascript php</title>

<style type="text/css">

body,p{margin:0px; padding:0px; font-size:14px; color:#333; font-family:Arial, Helvetica, sans-serif;}

#ltian,.rin{width:98%; margin:5px auto;}

#ltian{border:1px #ccc solid;overflow-y:auto; overflow-x:hidden; position:relative;}

#ct{margin-right:111px; height:100%;overflow-y:auto;overflow-x: hidden;}

#us{width:110px; overflow-y:auto; overflow-x:hidden; float:right; border-left:1px #ccc solid; height:100%; background-color:#F1F1F1;}

#us p{padding:3px 5px; color:#08C; line-height:20px; height:20px; cursor:pointer; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

#us p:hover,#us p:active,#us p.ck{background-color:#069; color:#FFF;}

#us p.my:hover,#us p.my:active,#us p.my{color:#333;background-color:transparent;}

button{float:right; width:80px; height:35px; font-size:18px;}

input{width:100%; height:30px; padding:2px; line-height:20px; outline:none; border:solid 1px #CCC;}

.rin p{margin-right:160px;}

.rin span{float:right; padding:6px 5px 0px 5px; position:relative;}

.rin span img{margin:0px 3px; cursor:pointer;}

.rin span form{position:absolute; width:25px; height:25px; overflow:hidden; opacity:0; top:5px; right:5px;}

.rin span input{width:180px; height:25px; margin-left:-160px; cursor:pointer}

 

#ct p{padding:5px; line-height:20px;}

#ct a{color:#069; cursor:pointer;}

#ct span{color:#999; margin-right:10px;}

.c2{color:#999;}

.c3{background-color:#DBE9EC; padding:5px;}

.qp{position:absolute; font-size:12px; color:#666; top:5px; right:130px; text-decoration:none; color:#069;}

#ems{position:absolute; z-index:5; display:none; top:0px; left:0px; max-width:230px; background-color:#F1F1F1; border:solid 1px #CCC; padding:5px;}

#ems img{width:44px; height:44px; border:solid 1px #FFF; cursor:pointer;}

#ems img:hover,#ems img:active{border-color:#A4B7E3;}

#ems a{color:#069; border-radius:2px; display:inline-block; margin:2px 5px; padding:1px 8px; text-decoration:none; background-color:#D5DFFD;}

#ems a:hover,#ems a:active,#ems a.ck{color:#FFF; background-color:#069;}

.tc{text-align:center; margin-top:5px;}

</style>

</head>

 

<body>

<div id="ltian">

    <div id="us" class="jb"></div>

    <div id="ct"></div>

    <a href="javascript:;" class="qp" onClick="this.parentNode.children[1].innerHTML=''">清屏</a>

</div>

<div class="rin">

    <button id="sd">发送</button>

    <span><img src="http://www.yxsss.com/ui/sk/t.png" title="表情" id="imgbq"></span>

    <p><input id="nrong"></p>

</div>

<div id="ems"><p></p><p class="tc"></p></div>

<script>

if(typeof(WebSocket)=='undefined'){

    alert('你的浏览器不支持 WebSocket ，推荐使用Google Chrome 或者 Mozilla Firefox'); 

}

</script>

<script src="<?php echo htmlentities($js); ?>/chat.js" type="text/javascript"></script>

<script>

(function(){

    var key='all',mkey;

    var users={};

    var url='ws://127.0.0.1:8800';
  //var url='<?php echo htmlentities((isset($config['protocol']) && ($config['protocol'] !== '')?$config['protocol']:'')); ?>://<?php echo htmlentities((isset($config['host']) && ($config['host'] !== '')?$config['host']:'')); ?>:<?php echo htmlentities((isset($config['port']) && ($config['port'] !== '')?$config['port']:'')); ?>';
    var so=false,n=false;

    var lus=A.$('us'),lct=A.$('ct');

    function st(){

         var uid="<?php echo session('uid'); ?>";
		 if(uid<1){
		   location.href="<?php echo url('index/user/login'); ?>";
		 }
        //n=prompt('请给自己取一个响亮的名字：');
        n="<?php echo htmlentities((isset($user['username']) && ($user['username'] !== '')?$user['username']:'')); ?>";
        n=n.substr(0,16);

        if(!n){

            return ;   

        }

        //创建socket，注意URL的格式：ws://ip:端口

        so=new WebSocket(url);

        //握手监听函数

        so.onopen=function(){

            //状态为1证明握手成功，然后把client自定义的名字发送过去

            if(so.readyState==1){

                so.send('type=add&ming='+n);

            }

        }

         

        //握手失败或者其他原因连接socket失败，则清除so对象并做相应提示操作

        so.onclose=function(){

            so=false;

            lct.appendChild(A.$$('<p class="c2">退出聊天室</p>'));

        }

         

        //数据接收监听，接收服务器推送过来的信息，返回的数据给msg，然后进行显示

        so.onmessage=function(msg){

            eval('var da='+msg.data);

            var obj=false,c=false;

            if(da.type=='add'){

                var obj=A.$$('<p>'+da.name+'</p>');

                lus.appendChild(obj);

                cuser(obj,da.code);

                obj=A.$$('<p><span>['+da.time+']</span>欢迎<a>'+da.name+'</a>加入</p>');

                c=da.code;

            }else if(da.type=='madd'){

                mkey=da.code;

                da.users.unshift({'code':'all','name':'大家'});

                for(var i=0;i<da.users.length;i++){

                    var obj=A.$$('<p>'+da.users[i].name+'</p>');

                    lus.appendChild(obj);

                    if(mkey!=da.users[i].code){

                        cuser(obj,da.users[i].code);

                    }else{

                        obj.className='my';

                        document.title=da.users[i].name;

                    }

                }

                obj=A.$$('<p><span>['+da.time+']</span>欢迎'+da.name+'加入</p>');

                users.all.className='ck';

            }

             

            if(obj==false){

                if(da.type=='rmove'){

                    var obj=A.$$('<p class="c2"><span>['+da.time+']</span>'+users[da.nrong].innerHTML+'退出聊天室</p>');

                    lct.appendChild(obj);

                    users[da.nrong].del();

                    delete users[da.nrong];

                }else{

                    da.nrong=da.nrong.replace(/{\\(\d+)}/g,function(a,b){

                        return '<img src="<?php echo htmlentities($img); ?>/qq/'+b+'.gif">';

                    }).replace(/^data\:image\/png;base64\,.{50,}$/i,function(a){

                        return '<img src="'+a+'">';

                    });

                    //da.code 发信息人的code

                    if(da.code1==mkey){

                        obj=A.$$('<p class="c3"><span>['+da.time+']</span><a>'+users[da.code].innerHTML+'</a>对我说：'+da.nrong+'</p>');

                        c=da.code;

                    }else if(da.code==mkey){

                        if(da.code1!='all')

                        obj=A.$$('<p class="c3"><span>['+da.time+']</span>我对<a>'+users[da.code1].innerHTML+'</a>说：'+da.nrong+'</p>');

                        else

                        obj=A.$$('<p><span>['+da.time+']</span>我对<a>'+users[da.code1].innerHTML+'</a>说：'+da.nrong+'</p>');

                        c=da.code1;

                    }else if(da.code==false){

                        obj=A.$$('<p><span>['+da.time+']</span>'+da.nrong+'</p>');

                    }else if(da.code1){

                        obj=A.$$('<p><span>['+da.time+']</span><a>'+users[da.code].innerHTML+'</a>对'+users[da.code1].innerHTML+'说：'+da.nrong+'</p>');

                        c=da.code;

                    }

                }

            }

            if(c){

                    obj.children[1].onclick=function(){

                        users[c].onclick();

                    }

                }

            lct.appendChild(obj);

            lct.scrollTop=Math.max(0,lct.scrollHeight-lct.offsetHeight);

             

        }

    }

    A.$('sd').onclick=function(){

        if(!so){

             return st();

        }

        var da=A.$('nrong').value.trim();

        if(da==''){

            alert('内容不能为空');

            return false;  

        }

        A.$('nrong').value='';

        so.send('nr='+esc(da)+'&key='+key);

    }

    A.$('nrong').onkeydown=function(e){

        var e=e||event;

        if(e.keyCode==13){

            A.$('sd').onclick();

        }

    }

    function esc(da){

        da=da.replace(/</g,'<').replace(/>/g,'>').replace(/\"/g,'"');

        return encodeURIComponent(da);

    }

    function cuser(t,code){

        users[code]=t;

        t.onclick=function(){

            t.parentNode.children.rcss('ck','');

            t.rcss('','ck');

            key=code;

        }

    }

    A.$('ltian').style.height=(document.documentElement.clientHeight - 70)+'px';

    st();

     

 

    var bq=A.$('imgbq'),ems=A.$('ems');

    var l=80,r=4,c=5,s=0,p=Math.ceil(l/(r*c));

    var pt='<?php echo htmlentities($img); ?>/qq/';

    bq.onclick=function(e){

        var e=e||event;

        if(!so){

             return st();

        }

        ems.style.display='block';

        document.onclick=function(){

            gb();  

        }

        ct();

        try{e.stopPropagation();}catch(o){}

    }

     

    for(var i=0;i<p;i++){

        var a=A.$$('<a href="javascript:;">'+(i+1)+'</a>');

        ems.children[1].appendChild(a);

        ef(a,i);

    }

    ems.children[1].children[0].className='ck';

     

    function ct(){

        var wz=bq.weiz();

        with(ems.style){

            top=wz.y-242+'px';

            left=wz.x+bq.offsetWidth-235+'px';

        }

    }

         

    function ef(t,i){

        t.onclick=function(e){

            var e=e||event;

            s=i*r*c;

            ems.children[0].innerHTML='';

            hh();

            this.parentNode.children.rcss('ck','');

            this.rcss('','ck');

            try{e.stopPropagation();}catch(o){}

        }

    }

     

    function hh(){

        var z=Math.min(l,s+r*c);

        for(var i=s;i<z;i++){

            var a=A.$$('<img src="'+pt+i+'.gif">');

            hh1(a,i);

            ems.children[0].appendChild(a);

        }

        ct();

    }

     

    function hh1(t,i){

        t.onclick=function(e){

            var e=e||event;

            A.$('nrong').value+='{\\'+i+'}';

            if(!e.ctrlKey){

                gb();

            }

            try{e.stopPropagation();}catch(o){}

        }

    }

     

    function gb(){

        ems.style.display='';

        A.$('nrong').focus();

        document.onclick='';

    }

    hh();

    A.on(window,'resize',function(){

        A.$('ltian').style.height=(document.documentElement.clientHeight - 70)+'px';

        ct();

    }) 

 

    var fimg=A.$('upimg');

    var img=new Image();

    var dw=400,dh=300;

    A.on(fimg,'change',function(ev){

        if(!so){

            st();

            return false;

        }

        if(key=='all'){

            alert('由于资源限制 发图只能私聊');

            return false;  

        }

        var f=ev.target.files[0];

        if(f.type.match('image.*')){

            var r = new FileReader();

            r.onload = function(e){

                img.setAttribute('src',e.target.result);

            };

            r.readAsDataURL(f);

        }

    });

    img.onload=function(){

        ih=img.height,iw=img.width;

        if(iw/ih > dw/dh && iw > dw){

            ih=ih/iw*dw;

            iw=dw;

        }else if(ih > dh){

            iw=iw/ih*dh;

            ih=dh;

        }

        var rc = A.$$('canvas');

        var ct = rc.getContext('2d');

        rc.width=iw;

        rc.height=ih;

        ct.drawImage(img,0,0,iw,ih);

        var da=rc.toDataURL();

        so.send('nr='+esc(da)+'&key='+key);

    }

     

})();

</script>

</body>

</html>