Android 4.4 WebView实现WebSocket即时通讯

参考博客

 Android HTML5多线程&本地缓存&文件上传

Websocket协议的学习、调研和实现

 

Android版本要求及H5 api支持情况

在Android版本4.4之前,由于维护和开发Android版本时使用的是AppleWebkit开源内核,虽然也非常不错,但不支持许多html5 api,在Android4.4使用了Chromium才得以发展,

目前支持的html 5如下:

Web Workers支持javaScript多线程
WebSocket支持javascript套接字,TCP长链接
IDBFactory/indexDB支持索引数据库
ApplicationCache支持web离线缓存
postMessage/onMessage支持收发消息
ondeviceorientation,ondevicemotion,onorientationchange支持屏幕旋转,移动
onvolumechange支持声音改变
RequestAnimationFrame支持页面UI动画更新引擎
LocalStorage/sessionStorage支持本地缓存
FileReader支持本地文件读取
FormData支持模拟表单,表单模型
EventSource支持Server-Sent Events(SSE)功能,允许服务端推送数据到客户端。(通常叫数据推送)
CacheStorage不支持异步缓存
Promise不支持异步范式
Crypto不支持javascript加密API
WebAudio不支持流媒体播放
WebRTC不支持流媒体通讯
WebGL不支持Web GL图像框架
GeoLocation支持地理定位
Notification不支持web通知
Blob支持二进制数据对象

 

在这里我们主要了解WebSocket在Android WebView上的支持,这里给出一个基于php WebSocketServer的例子:

【以下例子来自开源中国博客】

体验位置:http://www.yxsss.com/ui/sk.html

请使用你的PC浏览器和你的Android4.4的设备上的浏览器

 

WebSocket Server端实现

php端

<?php
error_reporting(E_ALL ^ E_NOTICE);
ob_implicit_flush();
 
class Sock{
    public $sockets;
    public $users;
    public $master;
     
    private $rec_data_packets=array();//已接收的数据
    private $sum_length=array();//数据总长度
    private $rec_data_length=array();//接收数据的长度
    private $salt_key=array();//加密key
    private $per_data_len=array(); //每组数据长度
     
    public function __construct($address, $port,$maxLink=16){
        $this->master=$this->createSocketServer($address, $port,$maxLink);
        $this->sockets=array($this->master);
    }
     
    function run()
    {
        while(true){
            $changes=$this->sockets;
            $write=NULL;
            $except=NULL;
            
            socket_select($changes,$write,$except,NULL); 
            /**
            *  监听读写操作,socket_select (array &$read, array &$write, array &$except, $tv_sec, $tv_usec = null)
            *  $read 注意,这里使用了引用,$read表示要监听读操作的socket,socket_select可以调用多次,之前监听的socket不会被取消(注意,socket连接也是read)
            *  $write 注意,这里使用了引用,$read表示要监听写操作的socket,socket_select可以调用多次,之前监听的socket不会被取消
            *  $$except 监听异常的socket
            *  以上&read,&write,&except是被引用的,也就意味着变量的值可以输入输出,把监听到的socket输出,把想被监听的socket输入
            *  最后一个参数是超时时间,默认是0
            *  
            *  该函数会阻塞
            */
            foreach($changes as $sock){
                if($sock==$this->master){
                	/**
                	 * 接受客户端socket
                	 * @var unknown
                	 */
                    $client=socket_accept($this->master);
                    $key=uniqid();
                    $this->sockets[]=$client;
                    $this->users[$key]=array(
                        'socket'=>$client,
                        'handshake'=>false
                    );
                }else{
                    $len=0;
                    $buffer='';
                    do{
                        $l=socket_recv($sock,$buf,1000,0);
                        $len+=$l;
                        $buffer.=$buf;
                    }while($l==1000);
                    $k=$this->search($sock);
                    if($len<7){
                        $this->send2($k);
                        continue;
                    }
                    if(!$this->users[$k]['handshake']){
                        $this->handshake($k,$buffer);
                    }else{
                        $buffer = $this->uncode($buffer,$k);
                        if($buffer==false){
                            continue;
                        }
                        $this->send($k,$buffer);
                    }
                }
            }
             
        }
         
    }
     
    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;
    }
     
    /**
     * 
     * @param string $address 地址
     * @param int $port 端口
     * @param number $maxLink 最大连接数
     */
    function createSocketServer($address,$port,$maxLink=16){ 
    	
        $server = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
        socket_set_option($server, SOL_SOCKET, SO_REUSEADDR, 1);
        socket_bind($server, $address, $port);
        socket_listen($server,$maxLink);
        $this->e('Server Started : '.date('Y-m-d H:i:s'));
        $this->e('Listening on   : '.$address.' port '.$port);
        return $server;
    }
     
     /**
      * 握手
      * @param string $k 要握手的socket
      * @param byte $buffer 缓冲数据
      * @return boolean
      */
    function handshake($k,$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));
        $this->users[$k]['handshake']=true;
        return true;
         
    }
     
    function uncode($str,$key){
        $mask = array();  
        $data = '';  
        $msg = unpack('H*',$str);
        $head = substr($msg[1],0,2);  
        if ($head == '81' && !isset($this->sum_length[$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);
                $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->sum_length[$key] > 0){
            $len=$this->sum_length[$key];
            $mask=$this->salt_key[$key];
            $n=$this->per_data_len[$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->rec_data_length[$key])){
            $this->salt_key[$key]=$mask;
            $this->sum_length[$key]=$len;
            $this->rec_data_length[$key]=$dlen+intval($this->rec_data_length[$key]);
            $this->rec_data_packets[$key]=$this->rec_data_packets[$key].$data;
            $this->per_data_len[$key]=$n;
            return false;
        }else{
            unset($this->salt_key[$key],$this->sum_length[$key],$this->rec_data_length[$key],$this->per_data_len[$key]);
            $data=$this->rec_data_packets[$key].$data;
            unset($this->rec_data_packets[$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;
    }
     
    /**
     * @param string $k	发信息人的code 
     * @param string $ar 数据
     * @param string $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);
    }
}

$sk=new Sock('127.0.0.1',8000);
$sk->run();
?>

WebSocket Client端实现

client端

<!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"><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){
				so.send('type=add&ming='+n);
			}
		}
		
		so.onclose=function(){
			so=false;
			lct.appendChild(A.$$('<p class="c2">退出聊天室</p>'));
		}
		
		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="sk/'+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,'&lt;').replace(/>/g,'&gt;').replace(/\"/g,'&quot;');
		return encodeURIComponent(da);
	}
	function cuser(t,code){
		users

=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>

 

 

    原文作者:移动开发
    原文地址: https://my.oschina.net/ososchina/blog/644834
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞