首页 > 移动平台 > 详细

简化移动端开发(NodeJs+Thrift+SocketIO+混编)

时间:2015-08-06 02:26:31      阅读:759      评论:0      收藏:0      [点我收藏+]

本文搭建一套基于Nodejs+SocketIO+Thrift+JSPTagEx,内含一套简单的客户端混编实现(WebView+Native),主要功能:

  1. 基于NodeJs+socket.io;
  2. 极容易实现聊天室和对聊,对聊已有接口;
  3. 服务端支持请求/响应,发布/订阅;
  4. 极简方式客户端异步调用服务端Java代码;
  5. JavaScript Bridge方式嵌入的浏览器能通过框架调取服务端数据,基于Socket;
  6. NodeJS通过Thrift RPC框架调用Java代码(异步);

通过这套框架,可容易实现如下应用:

  1. 聊天类移动应用;
  2. 服务端具有复杂业务的的移动应用(比如涉及工作流,复杂事务处理等);

服务端Java框架基于原创的JSPTagEx框架+Thrift组成,关于JSPTagEx详见博客点击这里,工程如下:


bubuko.com,布布扣
?可以看到Java工程是极其简单的,主要进行业务处理的类,利用注解标注服务名,接下来就是就是NodeJS,由于NodeJS部分比较简单,主要用来收集用户的请求信息和订阅信息,交由Java处理,通过NodeJS将用户传来的参数透传给Java代码,利用Java反射完成业务处理并将响应回传给客户端,比如我们主要实现了这些主要的接口,用网页测试:


bubuko.com,布布扣
?服务端的总体思路是充分利用NodeJS的高性能通信能力+Java对于很多业务方案都有现成的实现,快速的搭建完服务端后,接下来搭建移动端的实现,以Android为例:

?

在Android的Native调用后台服务代码(Socket.io部分以Android Service方式后台运行,代码略):

?

ioService.sendRequest("etf/listProducts.html?orgId=c53f3bfd4e28436b8ae373a23147e8f0", 
new Emitter.Listener(){
     @Override
     public void call(Object... args) {
          //UI处理
     }
});

?

其中etf/listProducts.html?orgId=c53f3bfd4e28436b8ae373a23147e8f0中的etf寻找后台Java注解服务名未etf的类,listProducts为该类下的方法名,?后面是参数列表,这里沿用了HTML URI的写法,主要为了解析字符串方便,发送的请求回调通过匿名类实现,Java的执行结果在args参数列表中,在该函数内可以更新UI等操作,针对有些移动端的业务(特别是对响应要求不高,不常使用的页面或列表为主的页面等)我们用Web实现更省时省力,那么Web中如何发送请求呢,通过js Bridge实现,如下:

?

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://192.168.1.63:8000/public/jquery.min.js"></script>
</head>
<body>
<button onclick="window.callJava.req(‘listProducts‘,‘etf/listProducts.html?orgId=c53f3bfd4e28436b8ae373a23147e8f0‘)">call Java Func</button>
<button onclick="window.callJava.req(‘getProduct‘,‘etf/getProduct.html?id=1‘)">call Java Func</button>
<div id="log"></div>

<script type="text/javascript">
function listProducts(json)
{
    $("#log").append("call listProducts<br/>");
    $.each(json,function(i,n){
        $("#log").append("ret:"+ n.product_en + "<br/>");
    });
}
function getProduct(json)
{
    $("#log").append("call getProduct<br/>");
    $("#log").append("ret:"+ json.product_en + "<br/>");
}
</script>

</body>
</html>

?

这里已请求/响应举例,发布订阅类似,总体效果图:

登录界面

bubuko.com,布布扣
?

Native界面处理请求/响应和发布/订阅



?
bubuko.com,布布扣
?

?网页处理请求/响应和发布订阅


bubuko.com,布布扣
?

?

简化移动端开发(NodeJs+Thrift+SocketIO+混编)

原文:http://cxlh.iteye.com/blog/2233066

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!