对于我们的一位客户，我们需要显示一张具有实时更新的车辆位置的地图。
因此，我开始使用Play制作原型！ 框架及其最新发布的版本2.0，使用Java API。 我从Play的网络聊天室开始！ 2.0个样本。

原型的目的是在地图上显示正在行驶的车辆。 车辆的位置通过REST调用发送到服务器（最后，它将由Android应用程序发送），并且连接的用户可以在其地图上实时查看车辆的行驶情况。

首先，让我们看一个小演示！

因此，首先，为了使事情变得更漂亮，我决定使用LessCss集成Twitter Bootstrap （v2.0.1）。 为此，我使用了下一篇文章中的技巧（这里没有困难）。

然后，我集成了OpenLayers ，一个用于地图可视化的Javascript框架。 我使用了Google Maps集成示例 ，并添加了一些KML图层。 这是在map.scala.html和maptracker.js文件中完成的，这里没什么花哨的（它是纯Javascript，而且我不是专家……）。

有趣的部分是使用WebSocket的部分。 在客户端，这是相当标准的：

var WS = window['MozWebSocket'] ? MozWebSocket : WebSocket
var mapSocket = new WS("@routes.Application.mapsocket().webSocketURL(request)");mapSocket.onmessage = function(event) {var data = JSON.parse(event.data);marker = moveMaker(map, marker, data.longitude, data.latitude);}// if errors on websocket
var onalert = function(event) {$(".alert").removeClass("hide");
} mapSocket.onerror = onalert;
mapSocket.onclose = onalert;

当客户端从websocket接收JSON数据时，它将在地图上移动标记。 并且如果在websocket上发生错误（例如，服务器已停止），则由于Twitter Bootstrap会显示一个相当大的错误：

在服务器端，websocket 由Application控制器创建，并由MapAnime.java Akka actor处理。 它访问Akka本机库来处理来自控制器的事件。

public class MapAnime extends UntypedActor {static ActorRef actor = Akka.system().actorOf(new Props(MapAnime.class));Map<String, WebSocket.Out<JsonNode>> registrered = new HashMap<String, WebSocket.Out<JsonNode>>();/*** * @param id* @param in* @param out* @throws Exception*/public static void register(final String id,final WebSocket.In<JsonNode> in, final WebSocket.Out<JsonNode> out)throws Exception {actor.tell(new RegistrationMessage(id, out));// For each event received on the socket,in.onMessage(new Callback<JsonNode>() {@Overridepublic void invoke(JsonNode event) {// nothing to do}});// When the socket is closed.in.onClose(new Callback0() {@Overridepublic void invoke() {actor.tell(new UnregistrationMessage(id));}});}public static void moveTo(float longitude, float latitude) {actor.tell(new MoveMessage(longitude, latitude));}@Overridepublic void onReceive(Object message) throws Exception {if (message instanceof RegistrationMessage) {// Received a Join messageRegistrationMessage registration = (RegistrationMessage) message;Logger.info("Registering " + registration.id + "...");registrered.put(registration.id, registration.channel);} else if (message instanceof MoveMessage) {// Received a Move messageMoveMessage move = (MoveMessage) message;for (WebSocket.Out<JsonNode> channel : registrered.values()) {ObjectNode event = Json.newObject();event.put("longitude", move.longitude);event.put("latitude", move.latitude);channel.write(event);}} else if (message instanceof UnregistrationMessage) {// Received a Unregistration messageUnregistrationMessage quit = (UnregistrationMessage) message;Logger.info("Unregistering " + quit.id + "...");registrered.remove(quit.id);} else {unhandled(message);}}public static class RegistrationMessage {public String id;public WebSocket.Out<JsonNode> channel;public RegistrationMessage(String id, WebSocket.Out<JsonNode> channel) {super();this.id = id;this.channel = channel;}}public static class UnregistrationMessage {public String id;public UnregistrationMessage(String id) {super();this.id = id;}}public static class MoveMessage {public float longitude;public float latitude;public MoveMessage(float longitude, float latitude) {this.longitude = longitude;this.latitude = latitude;}}}

控制器调用“ register”和“ moveTo”方法，它们将消息发送到Akka系统。 这些消息由“ onReceive”方法处理。 例如，当它收到MoveMessage时，它将创建一个具有经度和纬度的JSON对象，并通过websocket发送给客户端。

我还快速编写了一个测试类 ， 该类分析文本文件，并每100毫秒将具有新位置的REST请求发送到服务器。

该项目托管在Github上 。 它可与Google Chrome v17和Firefox v11一起使用。

为了测试

• 下载播放！ 2.0
• 克隆Git仓库
• 在项目目录中开始“播放运行”
• 连接到“ http：// localhost：9000 / map ”
• 在另一个终端中，运行“播放测试”以发送REST请求并让车辆行驶

我现在需要解决的问题是应用程序不是无状态的，因为在Actor中，我存储了已连接客户端的Map 。 也许我需要看一下Redis或其他任何东西，将不胜感激。

因此，总而言之，我能够快速开发出可运行的原型，并且我想我将尝试使用Play！ 在多个项目中为2.0

有什么好的：

• 高产
• 基于Scala的Typesafe视图模板
• LessCss集成
• Akka整合
• 使用Google Closure编译器编译的javascript
• 暂时不用学习Scala，万岁！

有待改进：

• Scala的编译时间应该增加，因为在我的PC上，编译视图最多需要4s的时间，并且会中断我的流程 （当从IDE切换到Web浏览器时，我使用“〜run”命令获得1s）。
• Scala编译器错误是神秘的
• 我无法在Heroku上部署该演示，因为它不支持（但？）websockets

更新：稍后，我使用类似的技术从@steve_objectify发现了一篇文章： http : //www.objectify.be/wordpress/?p=341

参考：来自JCG合作伙伴 Sebastian Scarano的Twitter Bootstrap，WebSockets，Akka和OpenLayers的Play！ing（2.0），来自Play框架的乐趣！ 博客。