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

本文搭建一套基于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详见博客点击这里,工程如下:


简化移动端开发(NodeJs+Thrift+SocketIO+混编)_第1张图片
 可以看到Java工程是极其简单的,主要进行业务处理的类,利用注解标注服务名,接下来就是就是NodeJS,由于NodeJS部分比较简单,主要用来收集用户的请求信息和订阅信息,交由Java处理,通过NodeJS将用户传来的参数透传给Java代码,利用Java反射完成业务处理并将响应回传给客户端,比如我们主要实现了这些主要的接口,用网页测试:


简化移动端开发(NodeJs+Thrift+SocketIO+混编)_第2张图片
 服务端的总体思路是充分利用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>

 

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

登录界面

简化移动端开发(NodeJs+Thrift+SocketIO+混编)_第3张图片
 

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



 
简化移动端开发(NodeJs+Thrift+SocketIO+混编)_第4张图片
 

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


简化移动端开发(NodeJs+Thrift+SocketIO+混编)_第5张图片
 

 

你可能感兴趣的:(socket)