大家知道,客户端的域名或IP地址是固定不变的,而客户端的ip地址一般是随机变换的。所以客户端可以直接通过域名向服务器发送请求消息,而服务器无法主动主动向客户端发送消息,只能通过客户端的回调来给客户端发送信息或调用客户端的函数。
那么服务器怎么随时联系客户端呢?通过客户端轮训来通过回调的方式给客户端传递消息,十分浪费流量,要不断建立http通道,既浪费时间也浪费流量以及电量,也不及时。所以最佳方式是服务器和客户端建立可信的socket连接,这样传递消息既即使,又省流量,电量。socket通信的效率是http通信效率的30倍。
而h5页面如何和客户端之间如何通信呢?它可没有能力建立socket连接啊?只能通过回调的方式通信了。
ios客户端如何调用h5页面呢?我自己写了一个通用处理类(下载地址:http://download.csdn.net/download/jia12216/10133034),很简单,几行代码就可以了。下面是调用的代码:
-(void)auctionGuide:(UIButton *)button{
AECommonJSBridgeAndProgressViewController *jsWebview = [AECommonJSBridgeAndProgressViewController new];
NSString *urlSTR= [NSString stringWithFormat:@"%@/getAuctionGuide.ns",kBaseURL];
[jsWebview setupWithUrl:urlSTR handleNameArray:[NSArray arrayWithObjects:@"callPhone", nil] handleTimes:1];
[self.navigationController pushViewController:jsWebview animated:YES];
}
简单吧?传递一个url地址就可以了。传递一个回调函数名数组就可以了。我这个h5页面最多只支持处理3个回调函数,handleTimes参数代表回调的函数个数。我的h5通用处理类会自动注册h5调用的函数。我这个类使用了ReactiveCocoa库(@weakify(self),@strongify(self);),用于处理block。在Podfile文件中增加pod ‘ReactiveCocoa’,'2.5’就可以导入ReactiveCocoa。
这个处理h5的通用类我放到资源文件里混点分。当然你也可以用其它方式调用h5,注册函数也很简单。在网上一搜一大把。
h5页面如何写回调ios客户端,我在网上查一个几十篇文章,试了很多遍,结果没有发现一个是正确的,都不能回调ios客户端。看来问题就出在细节处理上。为何没有一个详细的文章介绍呢!我毕竟不是专业 写h5页面的,把几篇文章结合一下才调用ios客户端成功。下面是h5页面回调iOS客户端注册的函数了的详细代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="zh-CN" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="renderer" content="webkit">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>竞拍指南</title>
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 80%;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var IRL =null;
var userAgentStr=null;
var u = navigator.userAgent,
app = navigator.appVersion;
function callPhone(){
var tel = document.getElementById("tel").innerText;
var data = {"tel":tel};
var ua = window.navigator.userAgent.toLowerCase();
if( isbrowser().versions.ios ){
IRL.callHandler('callPhone',data, function(responseData) {alert(responseData);});
}else if(window.AndroidWebView){
RL.h5CallPhone(tel);
}
}
function isbrowser() {
// 浏览器判断
return window.browser = {
versions: function () {
var u = navigator.userAgent,
app = navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
}
function InitWebViewJavascriptBridge(callback) {
var ua = window.navigator.userAgent.toLowerCase();
if (window.AndroidWebView || !isbrowser().versions.ios || ua.match(/MicroMessenger/i) == 'micromessenger') {
return;
}
function _callback(bridge) {
IRL= bridge;
if (callback) callback(bridge);
}
window.WVJBCallbacks = [_callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function () {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
InitWebViewJavascriptBridge();
</script>
<body>
<div class="main">
暂无
<span onclick="callPhone()" id="tel">15890341205</span>
</div>
</body>
</html>
千万要注意要用IRL存下这个bridge,h5页面就是通过他回调的ios客户端的函数,callPhone是ios注册的函数名。我想会写h5页面都看得懂这个代码吧!我致力于让大家少走弯路,直接能使用的开发技术。我的文章都是来源于实际的app。不会有因为细节问题让大家不能使用或抄袭的别人文章。