使用Twitter Bootstrap，WebSocket，Akka和OpenLayers玩（2.0）

原始帖子可以在ekito网站上找到。

对于我们的一位客户，我们需要显示一张具有实时更新的车辆位置的地图。
因此，我开始使用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一起使用。

为了测试