tomcat上的本地phantomjs / highcharts导出服务器

时间:2016-01-13 17:42:36

标签: highcharts phantomjs

我已经在本网站和互联网上搜索过,但没有得到明确的理解。

我已根据Setting Up Export Server

在CentOS 6.7上成功安装了phantomjs和highcharts

以下是必需的.js文件 “/软件/ phantomjs / highcharts / highcharts出口 - 服务器 - 主/ phantomjs”:

  • highcharts-convert.js highcharts-more.js highstock.js highmaps.js d3-funnel.js gauge.min.js exports.js jquery.1.9.1.min.js

我对phantomjs,尤其是highcharts非常陌生 - 我要做的是为在一台服务器(服务器B)上运行的批处理程序提供一种方法,将POST请求发送到服务器A上的导出服务器并返回。 png或.pdf文件。

战争部署在Tomcat上,10个独立的服务器从端口7777开始运行,PhantomJS服务器也按照以下命令和app-convert.js配置文件在127.0.0.1:3003运行:

phantomjs highcharts-convert.js -host 127.0.0.1 -port 3003
  phantomjs属性      

主机和端口phantomjs监听

     
    

host = 127.0.0.1     port = 7777

  
     

phantomjs可执行文件的位置可以是例如>的/ usr / local / bin中/ phantomjs

     
    

exec = / software / phantomjs / phantomjs

  
     

在此指定脚本的替代位置(整个路径!)>启动Phantomjs服务器。 F.eks /home/bert/scripts/my-highcharts-convert.js   如果您使用与export-server捆绑在一起的脚本,请保留为空。

     
    

script =

  
     connect用于连接与作为HTTP服务器运行的phantomjs的属性>      

以毫秒为单位的所有值

     

指定当连接是>时从phantomjs读取时的超时。建立

     
    

readTimeout = 6000

  
     

打开与phantomjs的通信链接时使用的超时>服务器

     
    

connectTimeout = 1000

  
     

安排了对phantomjs服务器的整个请求,最大超时可以持续>达到这个价值。这是因为在java中你不能依赖上面两个>超时。

     
    

maxTimeout = 6500

  
     游泳池属性      

您可以在池中运行的幻像服务器数量。

     
    

poolSize = 10

  
     

池实现为BlockingQueue。当要求幻像服务器时>连接没有任何可用,它等待毫秒数>由maxWait定义

     
    

maxWait = 6000

  
     

将文件保存在临时文件夹中以保留特定的retainTime,在>中定义。毫秒

     
    

retentionTime = 300000

  

我可以点击http://my-server/highcharts-export-web/演示页面,它可以在浏览器中正常运行。

我遇到的问题:

  1. 我想用于远程批处理程序的URL是什么?
  2. 是// my-server / highcharts-export-web /应该适用于我的 远程通话?
  3. webapp是否设计为接收来自非浏览器客户端的直接请求?
  4. 什么进程调用服务器池中的10台服务器?
  5. 有人可以举例说明如何设置远程调用导出服务器(它们每天会运行多次)并从批处理程序返回.png或.pdf吗?

    由于 布赖恩

1 个答案:

答案 0 :(得分:0)

We have had success! Part of the problem was calling a hosted server in HTTP from HTTPS (javascript doesn't like it.

We are also a coldfusion house so this first example is a straight server-side call with a mostly minified basic chart.

Note: We did have success calling HTTP from HTTPS server-side through the cfhttp tag (which is similar to PHP cURL stuff)...

<!--- first we need to create a small chart --->
{
"xAxis":{
    "categories":["Jan","Feb","Mar"]
    },
    "series":[{
        "data":[29.9,71.5,106.4]
    }]
}

<!--- lets go a little bit larger (I cut in something bigger below...
--->
<cfsavecontent variable="stringItForMe">
<cfprocessingdirective suppressWhiteSpace="true">
{xAxis: {categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']},series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]}
</cfprocessingdirective>
</cfsavecontent>

<!--- next we encode the variable the parameter names will normally have double quotes for cleanliness but highcharts exports works without them. --->

<cfset stepTwo = URLEncodedFormat(stringItForMe)>

<!---
setting my URL target...
--->

<cfset urlMaker = "http://targetServer:10001/highcharts-export-web/">


<cfhttp url="#urlMaker#" result="r" method="post" timeout="1">
<cfhttpparam type="HEADER" name="Content-Type" value="application/x-www-form-urlencoded; charset=UTF-8">
<cfhttpparam name="data" type="body" value="async=true&type=jpeg&width=800&options=#stepTwo#">
</cfhttp>

<cfset targetImage = urlMaker&r.fileContent>

<cfoutput><img src="#targetImage#"/></cfoutput>

Now this second one is javascript/jQuery it was pulled from a jsfiddle example provided by highsoft but I don't remember if I found it on the forum or the exprt server page, but we called the highcharts hosted export server over HTTPS and it worked (how every our in house rendering looked much better, I think we have some additional dependencies but either way success on both...

We had to debug this javascript to get the coldfusion version of this to function.

<br><br>
<button id='b'>Run Code</button>
<div id="container"></div>

<script>
$(function () {
    $("#b").click(testPOST);

    //var exportUrl = 'http://targetServer:10001/highcharts-export-web/';
    var exportUrl = 'https://export.highcharts.com/';

    function testPOST() {

        var optionsStr = JSON.stringify({
            "xAxis": {
                "categories": ["Jan", "Feb", "Mar"]
            },
                "series": [{
                "data": [29.9, 71.5, 106.4]
            }]
        }),
        dataString = encodeURI('async=true&type=jpeg&width=400&options=' + optionsStr);

        if (window.XDomainRequest) {
            var xdr = new XDomainRequest();
            xdr.open("post", exportUrl+ '?' + dataString);
            xdr.onload = function () {
                console.log(xdr.responseText);
                $('#container').html('<img src="' + exporturl + xdr.responseText + '"/>');
            };
            xdr.send();
        } else {
            $.ajax({
                type: 'POST',
                data: dataString,
                url: exportUrl,
                success: function (data) {
                    console.log('get the file from relative url: ', data);
                    $('#container').html('<img src="' + exportUrl + data + '"/>');
                },
                error: function (err) {
                    debugger;
                    console.log('error', err.statusText)
                }
            });
        }

    }
});
</script>

I think with these two working examples someone could port it to PHP, or other languages with little problem. just keep in mind to have your console open if in javascript and debug on in Coldfusion :)

Lastly, one of the most frustrating parts of this discovery was hitting the server, talking to the server but pulling back the default export example page in data OR filecontent (for Coldfusion), it had us scratching our heads because we didn't know how to get passed that part and just get our file.