play框架 scala_使用Play框架和Scala使用服务器端事件的轻量级实时图表

最新推荐文章于 2024-06-11 09:57:20 发布

danpie3295

最新推荐文章于 2024-06-11 09:57:20 发布

阅读量133

点赞数

文章标签： java python javascript ajax js ViewUI

原文链接：https://www.javacodegeeks.com/2013/09/lightweight-real-time-charts-with-play-framework-and-scala-using-server-side-events.html

版权

play框架 scala

我将继续使用出色的Play框架和Scala语言进行一段不错的旅程，我想分享实时图表的另一种有趣的实现：这次使用轻量级服务器端事件，而不是本文前面介绍的全双工WebSockets技术。确实，如果您不需要双向通信，而仅需要服务器推送，则服务器端事件看起来很自然。而且，如果您使用的是Play Framework ，那么做起来也很容易。

让我们尝试覆盖相同的用例，以便公平地比较这两种实现：我们有几个主机，并且我们希望实时（在图表上）观察每个主机上的CPU使用情况。让我们从创建一个简单的Play Framework应用程序开始（选择Scala作为主要语言）：

play new play-sse-example

现在，当我们的应用程序的布局准备就绪时，下一步是创建一些起始网页（使用Play Framework的类型安全模板引擎）并将其命名为views / dashboard.scala.html 。看起来是这样的：

@(title: String, hosts: List[Host])

<!DOCTYPE html>
<html>
  <head>
    <title>@title</title>
    <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
    <script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
    <script src="@routes.Assets.at("javascripts/highcharts.js")" type="text/javascript"></script>
  </head>

  <body>
    <div id="hosts">
      <ul class="hosts">
        @hosts.map { host =>
          <li>               
            <a href="#" onclick="javascript:show( '@host.id' )"><b>@host.name</b></a>
          </li>
        }
      </ul>
    </div>    
    <div id="content">
    </div>
  </body>
</html>

<script type="text/javascript">
function show( hostid ) {
  $('#content').trigger('unload');

  $("#content").load( "/host/" + hostid,
    function( response, status, xhr ) {
      if (status == "error") {   
        $("#content").html( "Sorry but there was an error:" + xhr.status + " " + xhr.statusText);
      }
    }
  )
}
</script>

该模板看起来与WebSockets示例完全相同，只是一行内容不同，稍后将对此目的进行解释。

$('#content').trigger('unload');

该网页的结果是一个简单的主机列表。每当用户单击主机链接时，就会从服务器（使用AJAX ）获取特定于主机的视图并显示该视图。下一个模板是最有趣的模板，即views / host.scala.html ，其中包含许多重要的细节：

@(host: Host)( implicit request: RequestHeader )

<div id="content">
  <div id="chart"></div>

  <script type="text/javascript">
    var charts = []   
      charts[ '@host.id' ] = new Highcharts.Chart({                 
        chart: {
          renderTo: 'chart',
          defaultSeriesType: 'spline'            
        },           
        xAxis: {
          type: 'datetime'
        },   
        series: [{
          name: "CPU",
          data: []
        }
      ]
    }); 
  </script>     
</div>

<script type="text/javascript">
  if( !!window.EventSource ) {
    var event = new EventSource("@routes.Application.stats( host.id )");

    event.addEventListener('message', function( event ) { 
      var datapoint = jQuery.parseJSON( event.data );
      var chart = charts[ '@host.id' ];

      chart.series[ 0 ].addPoint({
        x: datapoint.cpu.timestamp,
        y: datapoint.cpu.load
      }, true, chart.series[ 0 ].data.length >= 50 );
    } );

    $('#content').bind('unload',function() {
      event.close();
    });                         
  }  
</script>

UI的核心组件是使用Highcharts库构建的简单图表。底部的脚本块尝试创建一个EventSource对象，该对象是浏览器端服务器端事件的实现。如果浏览器支持服务器端事件，则将创建到服务器端端点的相应连接，并且将从服务器收到的每个消息（ “消息”侦听器）更新图表。现在是解释此构造函数目的的好时机（与上述$（'＃content'）。trigger（'unload'）对应 ）：

$('#content').bind('unload',function() {
  event.close();
});

每当用户单击不同的主机时，都应关闭前一个事件流，并创建新的事件流。不这样做会导致创建越来越多的事件流，并用越来越多的事件侦听器充斥浏览器。为了克服这个问题，我们将unload方法绑定到具有id 内容的div元素，并在用户单击主机时一直调用它。这样，我们就一直关闭事件流，然后再打开新事件流。足够的UI，让我们继续到后端。

路由表和几乎所有代码都保持不变，除了两个小的方法更改， Statistics.attach和Application.stats 。让我们看一下如何在控制器端实现使用服务器端事件的服务器对主机CPU统计信息的推送（并映射到/ stats /：id URL）：

def stats( id: String ) = Action { request =>
  Hosts.hosts.find( _.id == id ) match {
    case Some( host ) =>
      Async { 
        Statistics.attach( host ).map { enumerator =>      
          Ok.stream( enumerator &> EventSource() ).as( "text/event-stream")
        }
      }
    case None => NoContent  
  }
}

很短的一段代码，可以完成很多事情。通过其ID找到相应的主机后，我们通过接收Enumerator实例“附加”到该主机：CPU统计数据的连续流。 Ok.stream（枚举数＆> EventSource（）） . as（“文本/事件流”）会将连续的统计数据流转换为客户端可以使用服务器端事件使用的事件流。

为了完成服务器端的更改，让我们看一下如何“附加”到主机的统计信息流：

def attach( host: Host ): Future[ Enumerator[ JsValue ] ] = {
  ( actor( host.id ) ? Connect( host ) ).map {      
    case Connected( enumerator ) => enumerator
  }
}

这就像返回Enumerator一样简单，并且由于我们使用的是Akka actor，因此使用Future和异步调用变得有些棘手。而且，就是这样！

实际上，我们的简单应用程序如下所示（使用Mozilla Firefox ），仅以Host 1和Host 2为例：