iOS客户端和h5页面的互相调用,服务器和客户端间通信方式

简介: iOS客户端和h5页面的互相调用,服务器和客户端间通信方式

大家知道,客户端的域名或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。不会有因为细节问题让大家不能使用或抄袭的别人文章。

目录
相关文章
|
2天前
|
Java 数据安全/隐私保护
深入剖析:Java Socket编程原理及客户端-服务器通信机制
【6月更文挑战第21天】Java Socket编程用于构建网络通信,如在线聊天室。服务器通过`ServerSocket`监听,接收客户端`Socket`连接请求。客户端使用`Socket`连接服务器,双方通过`PrintWriter`和`BufferedReader`交换数据。案例展示了服务器如何处理每个新连接并广播消息,以及客户端如何发送和接收消息。此基础为理解更复杂的网络应用奠定了基础。
|
2天前
|
Java 应用服务中间件 开发者
【实战指南】Java Socket编程:构建高效的客户端-服务器通信
【6月更文挑战第21天】Java Socket编程用于构建客户端-服务器通信。`Socket`和`ServerSocket`类分别处理两端的连接。实战案例展示了一个简单的聊天应用,服务器监听端口,接收客户端连接,并使用多线程处理每个客户端消息。客户端连接服务器,发送并接收消息。了解这些基础,加上错误处理和优化,能帮你开始构建高效网络应用。
|
2天前
|
IDE Java 开发工具
从零开始学Java Socket编程:客户端与服务器通信实战
【6月更文挑战第21天】Java Socket编程教程带你从零开始构建简单的客户端-服务器通信。安装JDK后,在命令行分别运行`SimpleServer`和`SimpleClient`。服务器监听端口,接收并回显客户端消息;客户端连接服务器,发送“Hello, Server!”并显示服务器响应。这是网络通信基础,为更复杂的网络应用打下基础。开始你的Socket编程之旅吧!
|
2天前
|
缓存 监控 Java
Java Socket编程最佳实践:优化客户端-服务器通信性能
【6月更文挑战第21天】Java Socket编程优化涉及识别性能瓶颈,如网络延迟和CPU计算。使用非阻塞I/O(NIO)和多路复用技术提升并发处理能力,减少线程上下文切换。缓存利用可减少I/O操作,异步I/O(AIO)进一步提高效率。持续监控系统性能是关键。通过实践这些策略,开发者能构建高效稳定的通信系统。
|
2天前
|
网络协议 Java Linux
探索Java Socket编程:实现跨平台客户端-服务器通信的奥秘
【6月更文挑战第21天】Java Socket编程示例展示了如何构建跨平台聊天应用。服务器端使用`ServerSocket`监听客户端连接,每个连接启动新线程处理。客户端连接服务器,发送并接收消息。Java的跨平台能力确保代码在不同操作系统上无需修改即可运行,简化开发与维护。
|
2天前
|
Java
Java Socket编程与多线程:提升客户端-服务器通信的并发性能
【6月更文挑战第21天】Java网络编程中,Socket结合多线程提升并发性能,服务器对每个客户端连接启动新线程处理,如示例所示,实现每个客户端的独立操作。多线程利用多核处理器能力,避免串行等待,提升响应速度。防止死锁需减少共享资源,统一锁定顺序,使用超时和重试策略。使用synchronized、ReentrantLock等维持数据一致性。多线程带来性能提升的同时,也伴随复杂性和挑战。
|
2天前
|
安全 Java 网络安全
Java Socket编程教程:构建安全可靠的客户端-服务器通信
【6月更文挑战第21天】构建安全的Java Socket通信涉及SSL/TLS加密、异常处理和重连策略。示例中,`SecureServer`使用SSLServerSocketFactory创建加密连接,而`ReliableClient`展示异常捕获与自动重连。理解安全意识,如防数据截获和中间人攻击,是首要步骤。通过良好的编程实践,确保网络应用在复杂环境中稳定且安全。
|
8天前
|
Linux 数据库 iOS开发
超级签名源码/超级签/ios分发/签名端本地linux服务器完成签名
该系统完全在linux下运行,不存在使用第三方收费工具,市面上很多系统都是使用的是第三方收费系统,例如:某心签名工具,某测侠等,不开源而且需要每年交费,这种系统只是在这些工具的基础上套了一层壳。请需要系统的放大你们的眼睛。
13 0
|
26天前
|
消息中间件 存储 JSON
服务器的异步通信——RabbitMQ2
服务器的异步通信——RabbitMQ
21 0
|
26天前
|
消息中间件 缓存 中间件
服务器的异步通信——RabbitMQ1
服务器的异步通信——RabbitMQ
13 0