原始帖子可以在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一起使用。

為了測試

• 下載播放！ 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框架的樂趣！ 博客。

翻譯自: https://www.javacodegeeks.com/2012/04/playing-20-with-twitter-bootstrap.html

總結

以上是生活随笔為你收集整理的使用Twitter Bootstrap，WebSocket，Akka和OpenLayers玩（2.0）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。