php websocket聊天室,支持私聊

后台代码:

<?php

//send用户加入
//send1发送信息
//send2退出登录

error_reporting(E_ALL ^ E_NOTICE);
ob_implicit_flush();

//连接服务器
$sk = new Sock(‘127.0.0.1‘,8000);
$sk->run();

class Sock{
    public $sockets;
    public $users;
    public $master;

    private $sda = array();//已接收的数据
    private $slen = array();//数据总长度
    private $sjen = array();//接收数据的长度
    private $ar = array();//加密key
    private $n = array();

    public function __construct($address, $port){
        $this->master = $this->WebSocket($address, $port);//resource(2, Socket)  //服务器监听
        var_dump($this->master);
        $this->sockets = array($this->master);//array (size=1) 0 => resource(2, Socket) 。运行两个php还是这样

        //var_dump($this->sockets);
        //file_put_contents(‘lz.text‘,var_dump($this->sockets), FILE_APPEND);
    }
    public function run(){
        while(true){
            $changes = $this->sockets;//$changes由多变1,但$this->sockets却只是稳定的+1;
            $write = NULL;
            $except = NULL;
            //1.运行select()系统调用在给定阵列插座与指定的超时
            //2.没有接收到数据就会一直处于阻塞状态,
            //3.若没有client过来,直阻塞进程,直到有client访问,返回1。
            //4.此时返回的changes,不是曾经的changes。虽然还只是一条记录,但已经不是服务器而是客户端

            /*select的特殊作用：！！！！！！！
            初始为array(0=>resource(2, Socket))
            1,初始状态返回为array(0=>resource(2, Socket))。但socket_accept可以得到resource(3, Socket)
            2,初始状态返回为array(0=>resource(2, Socket),1=>resource(3,Socket))。
            客户来的客户为resource(3,Socket)。则返回的数据为resource(3,Socket).!!!
            */
            var_dump($changes);
            $rr = socket_select($changes,$write,$except,NULL);
            var_dump($changes);
            var_dump("---*---");
            //exit;

            // file_put_contents(‘./lz1.text‘,json_encode($changes), FILE_APPEND);
            // file_put_contents(‘./lz.text‘,‘-----‘, FILE_APPEND);
            foreach($changes as $sock){
                //连接主机的client
                //$this->master永远是 resource(2, Socket)。相当于一个缓存。两种情况,1:为空,使进程阻塞。2：存刚接收的client。
                if($sock == $this->master){ //---此处只用来存数据了
                    //在socket套接字已创建使用socket_create()，必将与socket_bind()名字，告诉听连接socket_listen()，这个函数将接受传入的连接，插座。
                    //一旦成功连接，将返回一个!!新的套接字资源！！，该资源可用于通信。如果套接字上有多个连接，则第一个将被使用。
                    //如果没有挂起的连接，socket_accept()将阻塞直到连接成为现在。如果使用了非阻塞套接字已socket_set_blocking()或socket_set_nonblock()，错误将返回。
                    //返回socket_accept()插座资源不得用于接受新的连接。原来的听插座插座，但是,仍然是开放的，可以重复使用。
                    $client = socket_accept($this->master); //resource(3, Socket)。表示接受请求,并创建一个子链接!!
                    //var_dump($client);
                    //exit;
                    $key = uniqid();
                    $this->sockets[] = $client;
                    $this->users[$key] = array(
                        ‘socket‘ => $client,
                        ‘shou‘ => false
                    );
                    /*
                    array (size=1)
                    ‘57d607085f92a‘ =>  //$key
                    array (size=2)
                    ‘socket‘ => resource(3, Socket) //$socket的表现都一样,只有通过$key区分
                    ‘shou‘ => boolean false
                    */
                    // file_put_contents(‘lz.text‘,json_encode($this->users), FILE_APPEND);
                }else{ //---此处服务器与客户端发信息
                    $len = 0;
                    $buffer = ‘‘;
                    do{
                        /*
                        int socket_recv ( resource socket, string &buf, int len, int flags )
                        resource socket 是生成的套接字
                        string &buf 是接收缓冲区
                        int len 是你打算接收的长度
                        int flags 是一个标志
                        0x1 数据应该带外发送，所谓带外数据就是TCP紧急数据
                        0x2 使有用的数据复制到缓冲区内，但并不从系统缓冲区内删除。
                        0x4 不要将包路由出去。
                        以上三项与sock.h文件中定义完全相同
                        0x8 数据完整记录
                        0x100 数据完整处理
                        */
                        $l = socket_recv($sock,$buf,1000,0);//原来取数据是一个缓慢的过程,要一次一次取数据,并计算每次buf的长度,让总长度不超过设定值
                        //var_dump($l);
                        // exit;
                        // file_put_contents(‘lz.text‘,‘socket_recv‘, FILE_APPEND);
                        $len += $l;
                        $buffer.=$buf;
                    } while ($l == 1000);
                    $k = $this->search($sock);//跟据sock返回key值
                    // file_put_contents(‘./d.txt‘, $k.PHP_EOL,FILE_APPEND);
                    if($len < 7){ //发过来的消息太短了,系统就判断 断了,断掉链接。
                        $this->send2($k);//用户退出。1关闭这个$key值对应的socket、删除这条key记录。将sockets数组对象重新排列。
                        continue;
                    }
                    if(!$this->users[$k][‘shou‘]){//判断用户的握手字段是true？否则重新握手。
                        $this->woshou($k,$buffer);
                        //file_put_contents(‘lz.text‘,‘woshou‘, FILE_APPEND);
                    }else{ //如果用户已经握手,则与用户之间进行通信。终于可以发消息了！
                        $buffer = $this->uncode($
                        ,$k); //返编译
                        if($buffer == false){
                            continue;
                        }
                        $this->send($k,$buffer);
                    }
                }
            }

        }

    }

    public function close($k){
        socket_close($this->users[$k][‘socket‘]);
        unset($this->users[$k]);
        $this->sockets = array($this->master);
        foreach($this->users as $v){
            $this->sockets[]=$v[‘socket‘];
        }
        $this->e("key:$k close");
    }

    function search($sock){
        foreach ($this->users as $k => $v){
            if($sock == $v[‘socket‘]) return $k;
        }
        return false;
    }

    function WebSocket($address,$port){ //服务器监听
        //创建并返回一个套接字resource，也称作一个通讯节点。一个典型的网络连接由 2 个套接字构成，一个运行在客户端，另一个运行在服务器端。
        //协议，类型，具体协议
        $server = socket_create(AF_INET, SOCK_STREAM, SOL_TCP); //resource(2, Socket)
        //file_put_contents(‘lz.text‘,$server, FILE_APPEND);//supplied resource is not a valid stream resource
        //返回bool.套接字resource,协议级别,可用的socket选项,值。
        $r = socket_set_option($server, SOL_SOCKET, SO_REUSEADDR, 1);//boolean true

        //绑定 address 到 socket。 该操作必须是在使用 socket_connect() 或者 socket_listen() 建立一个连接之前。
        $r2 = socket_bind($server, $address, $port);//boolean true

        //在socket套接字已创建使用socket_create()定界与socket_bind()名称，它可以告诉听套接字传入的连接.
        $r3 = socket_listen($server);//boolean true

        $this->e(‘Server Started : ‘.date(‘Y-m-d H:i:s‘));
        $this->e(‘Listening on  : ‘.$address.‘ port ‘.$port);
        return $server;
    }

    function woshou($k,$buffer){
        //对接收到的buffer处理,并回馈握手！！
        $buf = substr($buffer,strpos($buffer,‘Sec-WebSocket-Key:‘)+18);
        $key = trim(substr($buf,0,strpos($buf,"\r\n")));

        $new_key = base64_encode(sha1($key."258EAFA5-E914-47DA-95CA-C5AB0DC85B11",true));

        $new_message = "HTTP/1.1 101 Switching Protocols\r\n";
        $new_message .= "Upgrade: websocket\r\n";
        $new_message .= "Sec-WebSocket-Version: 13\r\n";
        $new_message .= "Connection: Upgrade\r\n";
        $new_message .= "Sec-WebSocket-Accept: " . $new_key . "\r\n\r\n";
        socket_write($this->users[$k][‘socket‘],$new_message,strlen($new_message));//sokcet,buffer(缓冲区),长度
        $this->users[$k][‘shou‘]=true;
        return true;
    }

    function uncode($str,$key){ //返编译
        $mask = array();
        $data = ‘‘;
        $msg = unpack(‘H*‘,$str);//unpack() 函数从二进制字符串对数据进行解包。
        $head = substr($msg[1],0,2);
        if ($head == ‘81‘ && !isset($this->slen[$key])) {
            $len=substr($msg[1],2,2);
            $len=hexdec($len);
            if(substr($msg[1],2,2)==‘fe‘){
                $len=substr($msg[1],4,4);
                $len=hexdec($len);//hexdec() 函数把十六进制转换为十进制。
                $msg[1]=substr($msg[1],4);
            }else if(substr($msg[1],2,2)==‘ff‘){
                $len=substr($msg[1],4,16);
                $len=hexdec($len);
                $msg[1]=substr($msg[1],16);
            }
            $mask[] = hexdec(substr($msg[1],4,2));
            $mask[] = hexdec(substr($msg[1],6,2));
            $mask[] = hexdec(substr($msg[1],8,2));
            $mask[] = hexdec(substr($msg[1],10,2));
            $s = 12;
            $n=0;
        }else if($this->slen[$key] > 0){
            $len=$this->slen[$key];
            $mask=$this->ar[$key];
            $n=$this->n[$key];
            $s = 0;
        }

        $e = strlen($msg[1])-2;
        for ($i=$s; $i<= $e; $i+= 2) {
            $data .= chr($mask[$n%4]^hexdec(substr($msg[1],$i,2)));
            $n++;
        }
        $dlen=strlen($data);

        if($len > 255 && $len > $dlen+intval($this->sjen[$key])){
            $this->ar[$key]=$mask;
            $this->slen[$key]=$len;
            $this->sjen[$key]=$dlen+intval($this->sjen[$key]);
            $this->sda[$key]=$this->sda[$key].$data;
            $this->n[$key]=$n;
            return false;
        }else{
            unset($this->ar[$key],$this->slen[$key],$this->sjen[$key],$this->n[$key]);
            $data=$this->sda[$key].$data;
            unset($this->sda[$key]);
            return $data;
        }
    }
    function code($msg){ //编译
        $frame = array();
        $frame[0] = ‘81‘;
        $len = strlen($msg);
        if($len < 126){
            $frame[1] = $len<16?‘0‘.dechex($len):dechex($len);
        }else if($len < 65025){
            $s=dechex($len);
            $frame[1]=‘7e‘.str_repeat(‘0‘,4-strlen($s)).$s;
        }else{
            $s=dechex($len);
            $frame[1]=‘7f‘.str_repeat(‘0‘,16-strlen($s)).$s;
        }
        $frame[2] = $this->ord_hex($msg);
        $data = implode(‘‘,$frame);
        return pack("H*", $data);
    }

    function ord_hex($data) {
        $msg = ‘‘;
        $l = strlen($data);
        for ($i= 0; $i<$l; $i++) {
            $msg .= dechex(ord($data{$i}));
        }
        return $msg;
    }
    //用户加入
    function send($k,$msg){
        parse_str($msg,$g);//把查询字符串解析到变量中
        $ar = array();
        if($g[‘type‘] == ‘add‘){
            $this->users[$k][‘name‘] = $g[‘ming‘];
            $ar[‘type‘] = ‘add‘;
            $ar[‘name‘] = $g[‘ming‘];
            $key = ‘all‘;
        }else{
            $ar[‘nrong‘] = $g[‘nr‘];
            $key = $g[‘key‘];
        }
        $this->send1($k,$ar,$key);
    }

    function getusers(){
        $ar = array();
        foreach($this->users as $k => $v){
            $ar[]=array(‘code‘ => $k,‘name‘ => $v[‘name‘]);
        }
        return $ar;
    }
    //$k 发信息人的code $key接受人的 code
    function send1($k,$ar,$key=‘all‘){
        $ar[‘code1‘]=$key;
        $ar[‘code‘]=$k;
        $ar[‘time‘]=date(‘m-d H:i:s‘);
        $str = $this->code(json_encode($ar));
        if($key == ‘all‘){
            $users = $this->users;
            if($ar[‘type‘] == ‘add‘){
                $ar[‘type‘] = ‘madd‘;
                $ar[‘users‘] = $this->getusers();
                $str1 = $this->code(json_encode($ar));
                socket_write($users[$k][‘socket‘],$str1,strlen($str1));//发送者
                unset($users[$k]);
            }
            foreach($users as $v){
                socket_write($v[‘socket‘],$str,strlen($str));//接收者
            }
        }else{
            socket_write($this->users[$k][‘socket‘],$str,strlen($str));//发送者
            socket_write($this->users[$key][‘socket‘],$str,strlen($str));//接收者
        }
    }

    //用户退出
    function send2($k){
        $this->close($k);
        $ar[‘type‘]=‘rmove‘;
        $ar[‘nrong‘]=$k;
        $this->send1(false,$ar,‘all‘);
    }

    function e($str){
        //$path=dirname(__FILE__).‘/log.txt‘;
        $str = $str."\n";
        //error_log($str,3,$path);
        echo iconv(‘utf-8‘,‘gbk//IGNORE‘,$str);
    }

}

前台代码:

<!DOCTYPE html>
<html>
<head>
    <title>php websocket聊天室 - 支持私聊</title>
    <meta charset="utf-8" />
</head>
<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>
<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">
            <img src="http://www.yxsss.com/ui/sk/e.png" title="上传图片">
            <form>
                <input type="file" title="上传图片" id="upimg">
            </form>
        </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="http://www.yxsss.com/ui/p/a.js" type="text/javascript"></script>
<script>
(function(){
    var key = ‘all‘,mkey;
    var users = {};
    var url = ‘ws://127.0.0.1:8000‘;
    var so = false,n=false;
    var lus = A.$(‘us‘),lct = A.$(‘ct‘);
    function st(){

        n = prompt(‘请给自己取一个响亮的名字：‘);
        n = n.substr(0,16);
        if(!n){
            return ;
        }
        so = new WebSocket(url);
        //连接聊天室事件
        so.onopen = function(){
            if(so.readyState==1){
                // alert(‘连接成功‘);
                console.log(‘聊天室连接成功‘);
                so.send(‘type=add&ming=‘+n);
            }
        }
         //断开连接事件
        so.onclose=function(){
            so = false;
            lct.appendChild(A.$$(‘<p class="c2">退出聊天室</p>‘));
        }
         //接收消息事件
        so.onmessage = function(msg){
            console.log(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 style="color:blue;">[‘+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="sk/‘+b+‘.gif">‘;
                    }).replace(/^data\:image\/png;base64\,.{50,}$/i,function(a){
                        //base_64图片
                        return ‘<img src="‘+a+‘">‘;
                    });

                    //da.code1(接受者的code) data.code 发送者的cide
                    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=‘sk/‘;
    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>

引入的js代码(a.js),防止连接失效

var _w=window,_d=document;
String.prototype.trim=function(){return this.replace(/(^\s+)|(\s+$)/g,‘‘)};
HTMLElement.prototype.rcss=function(a,b){
    if(a==‘‘){
        eval(‘var s = new RegExp(/\\b‘+b+‘\\b/)‘);
        if(!s.test(this.className)){
            this.className=this.className.trim()+‘ ‘+b;
        }
    }else{
        eval(‘var s=this.className.replace(/\\b‘+a+‘\\b/g,b)‘);
        this.className=s.trim();
    }
    return this;
}
HTMLElement.prototype.del=function(){
    this.parentNode.removeChild(this);
}
Array.prototype.each=HTMLCollection.prototype.each=NodeList.prototype.each=function(f){
    for(var i=0,l=this.length;i<l;i++){
        f(this[i],i,this);
    }
    return this;
}
HTMLCollection.prototype.rcss=NodeList.prototype.rcss=function(a,b){
    this.each(function(t){t.rcss(a,b);});
    return this;
}
NodeList.prototype.del=function(){
    this.each(function(t){t.del();});
}
HTMLElement.prototype.prev=function(){
    return this.previousElementSibling||this.previousSibling;
}
HTMLElement.prototype.next=function(){
    return this.nextElementSibling||this.nextSibling;
}
HTMLElement.prototype.weiz=function(){
        var y=this.offsetTop,x=this.offsetLeft,e=this.offsetParent;
        while(e){
            y+=e.offsetTop;
            x+=e.offsetLeft;
            e=e.offsetParent
        };
        return{
            ‘y‘:y,‘x‘:x
        }
}
A={
    $:function(id){
        return _d.getElementById(id);
    },
    $$:function(a){
        if(a.indexOf(‘<‘)==-1){
            return _d.createElement(a);
        }
        else{
            var _1=_d.createElement(‘div‘);
            _1.innerHTML=a;
            return _1.children[0];
        }
    },
    r:function(n,m,f){
        if(f){
            return Math.random()*(m-n)+n
        }else{
            return Math.round(Math.random()*(m-n)+n);
        }
    },
    aj:function(url,data,f,gs){
        var self=this;
        var k=url.replace(/[^\w]/g,‘‘);
        if(typeof(self.ajone[k])==‘undefined‘){
            self.ajone[k]=true;
            if(_w.XMLHttpRequest){
                var xm=new XMLHttpRequest()
            }
            else{
                var M=[‘MSXML2.XMLHTTP‘,‘Microsoft.XMLHTTP‘,‘MSXML2.XMLHTTP.5.0‘,‘MSXML2.XMLHTTP.4.0‘,‘MSXML2.XMLHTTP.3.0‘];
                for(n=0;n<M.length;n++){
                    try{
                        var xm=new ActiveXObject(M[n]);
                        break
                    }
                    catch(e){}
                }
            };
            xm.open("post",url,true);
            xm.setRequestHeader("is_ajax","1");
            xm.onreadystatechange=function(){
                if(xm.readyState==4){
                    if(xm.status==200){
                        delete self.ajone[k];
                        if(f){
                            if(typeof(f)==‘string‘)A.$(f).innerHTML=xm.responseText;
                            else{
                                if(gs&&gs==‘json‘){
                                    eval(‘var _j=‘+xm.responseText);
                                    eval(f(_j))
                                }
                                else eval(f(xm.responseText))
                            }
                        }
                    }
                }
            };
            xm.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
            xm.send(data)
        }
    },
    on:function(el,ev,fn){
        if(el.attachEvent){
            el.attachEvent("on"+ev,function(){
                fn.apply(el,arguments)
            })
        }
        else{
            el.addEventListener(ev,fn,false)
        }
    },
    fnr:function(f){
        var s=[];
        for(var i=0,l=f.length;i<l;i++){
            if(f[i].name&&f[i].name!=‘‘){
                switch(f[i].tagName.toLowerCase()){
                    case‘select‘:for(var a=0;a<f[i].length;a++){
                        if(f[i][a].selected){
                            s.push(f[i].name+‘=‘+encodeURIComponent(f[i][a].value))
                        }
                    };
                    break;
                    default:switch(f[i].type.toLowerCase()){
                        case‘radio‘:var fo=f[f[i].name];
                        for(var a=0;a<fo.length;a++){
                            if(fo[a].checked){
                                s.push(fo[a].name+‘=‘+encodeURIComponent(fo[a].value));
                                break
                            }
                        };
                        i+=(fo.length-1);
                        break;
                        case‘checkbox‘:if(f[i].checked){
                            s.push(f[i].name+‘=‘+encodeURIComponent(f[i].value))
                        };
                        break;
                        default:s.push(f[i].name+‘=‘+encodeURIComponent(f[i].value));
                        break
                    }
                }
            }
        };
        return s.join(‘&‘)
    }
};

原文地址：https://www.cnblogs.com/wanghjun/p/9830601.html