Un WebSocket es una aplicaci\u00f3n as\u00edncrona, de mensajer\u00eda bidireccional a trav\u00e9s de una \u00fanica conexi\u00f3n TCP permitiendo una comunicaci\u00f3n en ambas direcciones simult\u00e1neamente. Este\u00a0protocolo aprovecha una actualizaci\u00f3n de la cabecera HTTP, con los WebSockets de\u00a0HTML5 podemos crear aplicaciones en tiempo real con una arquitectura muy sencilla.<\/p>\n
<\/p>\n
Ahora vamos a poner a prueba los Sockets desarrollando una juego\u00a0de cartas muy conocido usando la tecnolog\u00eda Java JSR 356, AngularJS y Maven.<\/p>\n
Lo primero es crear\u00a0una clase que represente una carta:<\/p>\n
public class Card {\r\n\r\nprivate String rank;\r\nprivate String suit;\r\nprivate int value;\r\nprivate int sort;\r\n\r\n...\r\n}<\/pre>\nLos tipos de cartas y los valores los voy a colocar en un Enum:<\/p>\n
public enum Suits {\r\n SPADES, DIAMONDS, CLUBS, HEARTS\r\n}\r\n<\/pre>\npublic enum FaceCards {\r\n TWO(\"2\", 2),\r\n THREE(\"3\", 3),\r\n FOUR(\"4\", 4),\r\n FIVE(\"5\", 5),\r\n SIX(\"6\", 6),\r\n SEVEN(\"7\", 7),\r\n EIGHT(\"8\", 8),\r\n NINE(\"9\", 9),\r\n TEN(\"10\", 10),\r\n J(\"J\", 10),\r\n Q(\"Q\", 10),\r\n K(\"K\", 10),\r\n A(\"A\", 11);\r\n\r\n private final String rank;\r\n private final int value;\r\n\r\n private FaceCards(String rank, int value) {\r\n this.rank = rank;\r\n this.value = value;\r\n }\r\n\r\n public String getRank() {\r\n return rank;\r\n }\r\n\r\n public int getValue() {\r\n return value;\r\n }\r\n\r\n}<\/pre>\nAhora creamos una\u00a0la clase que contenedora de cartas o un Maso este representa las 52 cartas del Juego:<\/p>\n
public class Deck {\r\n\r\n private final List<Card> cards;\r\n\r\n public Deck() {\r\n \/\/ Crear paquete de 52 cartas\r\n this.cards = new ArrayList<>();\r\n for (Suits p : Suits.values()) {\r\n \/\/System.out.printf(\"Suits %s\\n\", p);\r\n int i = 0;\r\n for (FaceCards f : FaceCards.values()) {\r\n Card card = new Card();\r\n card.setSuit(p.toString());\r\n card.setRank(f.getRank());\r\n card.setSort(i);\r\n card.setValue(f.getValue());\r\n \/\/System.out.printf(\"Face %s - %s\\n\", f.getRank(), f.getValue());\r\n i++;\r\n cards.add(card);\r\n }\r\n }\r\n \r\n \/\/ Barajear las cartas\r\n Random random = new Random();\r\n Collections.shuffle(cards, random);\r\n\r\n }\r\n\r\n public List<Card> getCards() {\r\n return cards;\r\n }\r\n \r\n public Card dealCard() {\r\n return cards.remove(0);\r\n }\r\n\r\n}<\/pre>\nEn el constructor se inicia el maso con\u00a052 cartas y se barajan usando colecciones de Java.<\/p>\n
Al jugador lo vamos a representar con la clase Player:<\/p>\n
public class Player {\r\n\r\n private String playerName;\r\n private double balance;\r\n<\/pre>\nUna mano o una partida la vamos a representar con la Clase Hand<\/p>\n
public class Hand {\r\n\r\n private final List<Card> cards;\r\n private int score;\r\n\r\n public Hand() {\r\n this.cards = new ArrayList<>();\r\n }\r\n\r\n public List<Card> getCards() {\r\n return cards;\r\n }\r\n\r\n public void addCard(Card card) {\r\n this.cards.add(card);\r\n if (\"A\".equalsIgnoreCase(card.getRank())) {\r\n if (score <= 10) {\r\n score += 11;\r\n } else {\r\n score += 1;\r\n }\r\n } else {\r\n \/\/ No es \"A\" tomar el valor de la carta\r\n score += card.getValue();\r\n }\r\n \/\/ Recalcular para cambiar el valor del \"A\"\r\n if(score > 21) {\r\n score = 0;\r\n for (Card cardTmp : cards) {\r\n if (\"A\".equalsIgnoreCase(cardTmp.getRank())) {\r\n score += 1;\r\n } else {\r\n \/\/ No es \"A\" tomar el valor de la carta\r\n score += cardTmp.getValue();\r\n }\r\n }\r\n }\r\n }\r\n\r\n public int getScore() {\r\n return score;\r\n }\r\n\r\n public boolean isBlackjack() {\r\n return score == 21;\r\n }\r\n\r\n public boolean isGameOver() {\r\n return score > 21;\r\n }\r\n\r\n}\r\n<\/pre>\nEn esta clase tenemos los siguientes m\u00e9todos:<\/p>\n
Ahora vamos a desarrollar una clase con la l\u00f3gica del Juego:<\/p>\n
public class Blackjack21 implements Serializable {\r\n\r\n private final Logger LOG = LoggerFactory.getLogger(Blackjack21.class);\r\n private String gameStatus;\r\n private Deck deck;\r\n private Hand playerHand;\r\n private Hand dealerHand;\r\n private final Player player;\r\n private double bet;\r\n \r\n public Blackjack21(Player player, double bet) throws Exception {\r\n this.bet = bet;\r\n this.player = player;\r\n if (bet > player.getBalance()) {\r\n throw new Exception(\"El monto apostado \" + bet + \", es superior a su saldo \" + player.getBalance());\r\n }\r\n \/\/ Comprometer el saldo del cliente\r\n player.decreaseBalance(bet);\r\n \/\/ Crear una nueva mano\r\n deck = new Deck();\r\n \/\/ Jugador\r\n playerHand = new Hand();\r\n \/\/ Crupier\r\n dealerHand = new Hand();\r\n\r\n \/\/ Repartir primeras 4 cartas\r\n playerHand.addCard(deck.dealCard());\r\n dealerHand.addCard(deck.dealCard());\r\n playerHand.addCard(deck.dealCard());\r\n dealerHand.addCard(deck.dealCard());\r\n gameStatus = \"OPEN\";\r\n \/\/ Validar si el juego no ha terminado en la primera mano\r\n if (dealerHand.isBlackjack() && playerHand.isBlackjack()) {\r\n LOG.info(\"Hay un empate entre el crupier y el jugador se retorna su apuesta inicial\");\r\n player.increaseBalance(bet);\r\n gameStatus = \"TIE\";\r\n }\r\n if (playerHand.isBlackjack()) {\r\n LOG.info(\"El jugador tiene Blackjack! gana 3 a 2\");\r\n player.increaseBalance(bet * 1.5);\r\n gameStatus = \"BLACKJACK\";\r\n }\r\n \/\/Validar si el Crupier tiene Blackjack\r\n if (dealerHand.isBlackjack()) {\r\n LOG.info(\"El Crupier tiene Blackjack! el jugador pierde\");\r\n gameStatus = \"LOSE\";\r\n }\r\n }\r\n \r\n public void hitDealer() {\r\n if(dealerHand.getScore() <=21 && dealerHand.getScore() >= playerHand.getScore()) {\r\n \/\/ El crupier gana\r\n LOG.info(\"El crupier gana! Crupier: \" +dealerHand.getScore() + \" Player: \"+playerHand.getScore());\r\n gameStatus = \"LOSE\";\r\n }\r\n else {\r\n Card card = deck.dealCard();\r\n LOG.info(\"La carta del crupier es: \" + card);\r\n dealerHand.addCard(card);\r\n if(dealerHand.isGameOver()) {\r\n \/\/ El jugador gana\r\n LOG.info(\"El jugador gana!\");\r\n gameStatus = \"WIN\";\r\n player.increaseBalance(this.bet * 2);\r\n }\r\n if(dealerHand.isBlackjack()) {\r\n \/\/ El crupier gana\r\n LOG.info(\"El crupier gana! Crupier: \" +dealerHand.getScore() + \" Player: \"+playerHand.getScore());\r\n gameStatus = \"LOSE\";\r\n }\r\n }\r\n \r\n }\r\n\r\n public void hit() {\r\n Card card = deck.dealCard();\r\n LOG.info(\"La carta del jugador es: \" + card);\r\n playerHand.addCard(card);\r\n if (playerHand.isGameOver()) {\r\n gameStatus = \"LOSE\";\r\n }\r\n if (playerHand.isBlackjack()) {\r\n gameStatus = \"WIN\";\r\n player.increaseBalance(this.bet * 2);\r\n }\r\n }\r\n\r\n public void stand() {\r\n if (\"OPEN\".equalsIgnoreCase(gameStatus)) {\r\n gameStatus = \"STAND\";\r\n }\r\n }\r\n\r\n public void split() {\r\n \/\/ FIXME Tengo que implemetar el SPLIT\r\n }\r\n\r\n public void doubles(double bet) throws Exception {\r\n if (bet > player.getBalance()) {\r\n throw new Exception(\"No tiene saldo para doblar la apuesta \" + bet + \" < \" + player.getBalance());\r\n }\r\n player.decreaseBalance(bet);\r\n this.bet += bet;\r\n Card card = deck.dealCard();\r\n playerHand.addCard(card);\r\n if (playerHand.isGameOver()) {\r\n gameStatus = \"LOSE\";\r\n }\r\n if (playerHand.isBlackjack()) {\r\n gameStatus = \"WIN\";\r\n player.increaseBalance(this.bet * 2);\r\n }\r\n }\r\n\r\n public String getGameStatus() {\r\n return gameStatus;\r\n }\r\n\r\n public void setGameStatus(String gameStatus) {\r\n this.gameStatus = gameStatus;\r\n }\r\n\r\n public Hand getPlayerHand() {\r\n return playerHand;\r\n }\r\n\r\n public Hand getDealerHand() { \r\n if(\"OPEN\".equalsIgnoreCase(gameStatus)) {\r\n Hand hideHand = new Hand();\r\n hideHand.addCard(dealerHand.getCards().get(0));\r\n return hideHand;\r\n }\r\n else {\r\n return dealerHand;\r\n }\r\n \r\n }\r\n\r\n public double getBet() {\r\n return bet;\r\n }\r\n\r\n public void setBet(double bet) {\r\n this.bet = bet;\r\n } \r\n}<\/pre>\nHasta este punto solo hemos realizado la l\u00f3gica del juego, ahora vamos a comenzar a implementar el socket.<\/p>\n
La clase SocketMessage representa el formato del mensaje con el cual vamos ha realizar la comunicaci\u00f3n cliente – servidor.<\/p>\n
public class SocketMessage {\r\n private final Logger LOG = LoggerFactory.getLogger(SocketMessage.class);\r\n \r\n private String listener;\r\n private String type;\r\n private String message;\r\n\r\n public String getListener() {\r\n return listener;\r\n }\r\n\r\n public void setListener(String listener) {\r\n this.listener = listener;\r\n }\r\n\r\n public String getMessage() {\r\n return message;\r\n }\r\n\r\n public void setMessage(String message) {\r\n this.message = message;\r\n }\r\n\r\n public String getType() {\r\n return type;\r\n }\r\n\r\n public void setType(String type) {\r\n this.type = type;\r\n }\r\n\r\n public static class MessageEncoder implements Encoder.Text<SocketMessage> {\r\n\r\n @Override\r\n public void init(EndpointConfig config) {\r\n }\r\n\r\n @Override\r\n public String encode(SocketMessage message) throws EncodeException {\r\n return Json.createObjectBuilder()\r\n .add(\"listener\", message.getListener())\r\n .add(\"type\", message.getType())\r\n .add(\"message\", message.getMessage()).build().toString();\r\n }\r\n\r\n @Override\r\n public void destroy() {\r\n }\r\n }\r\n\r\n public static class MessageDecoder implements Decoder.Text<SocketMessage> {\r\n\r\n private JsonReaderFactory factory = Json.createReaderFactory(Collections.<String, Object>emptyMap());\r\n\r\n @Override\r\n public void init(EndpointConfig config) {\r\n }\r\n\r\n @Override\r\n public SocketMessage decode(String str) throws DecodeException {\r\n SocketMessage message = new SocketMessage();\r\n JsonReader reader = factory.createReader(new StringReader(str));\r\n JsonObject json = reader.readObject();\r\n message.setListener(json.getString(\"listener\"));\r\n message.setMessage(json.getString(\"message\"));\r\n message.setType(json.getString(\"type\"));\r\n return message;\r\n }\r\n\r\n @Override\r\n public boolean willDecode(String str) {\r\n return true;\r\n }\r\n\r\n @Override\r\n public void destroy() {\r\n }\r\n }\r\n}\r\n<\/pre>\nLa clase\u00a0WebSocketsDispatcher ser\u00e1 la encarga de despachar los mensajes a todos los clientes conectados al socket.<\/p>\n
import java.util.Map;\r\nimport javax.websocket.Session;\r\nimport org.slf4j.Logger;\r\nimport org.slf4j.LoggerFactory;\r\n\r\npublic class WebSocketsDispatcher {\r\n\r\n private final Logger LOG = LoggerFactory.getLogger(WebSocketsDispatcher.class);\r\n\r\n public void dispatch(String listener, SocketMessage message) {\r\n try {\r\n if (listener == null || \"ALL\".equalsIgnoreCase(listener)) {\r\n for (Map.Entry<String, Session> entry : ServerEndpoint.getListenerMap().entrySet()) {\r\n Session session = entry.getValue();\r\n session.getBasicRemote().sendObject(message);\r\n\r\n LOG.info(\"To: \" + message.getListener() + \";; Who: \" + message.getMessage() + \" \");\r\n \r\n }\r\n } else {\r\n\r\n Session session = ServerEndpoint.getListenerMap().get(message.getListener());\r\n session.getBasicRemote().sendObject(message);\r\n\r\n LOG.info(\"To: \" + message.getListener() + \";; Who: \" + message.getMessage() + \" \");\r\n \r\n }\r\n\r\n } catch (Exception e) {\r\n LOG.error(\"Error dispatch {}\", e);\r\n e.printStackTrace();\r\n }\r\n }\r\n}\r\n<\/pre>\nLa clase ServerEndpoint crea un punto de acceso usando la especificaci\u00f3n de Java JSR 356<\/p>\n
@javax.websocket.server.ServerEndpoint(value = \"\/server\", encoders = {SocketMessage.MessageEncoder.class}, decoders = {SocketMessage.MessageDecoder.class})\r\npublic class ServerEndpoint {\r\n\r\n private final Logger LOG = LoggerFactory.getLogger(ServerEndpoint.class);\r\n private static final Set<Session> sessions = Collections.synchronizedSet(new HashSet<Session>());\r\n private static ConcurrentHashMap<String, Session> sessionsMap = new ConcurrentHashMap<String, Session>();\r\n private static WebSocketsDispatcher webSocketsDispatcher = new WebSocketsDispatcher();\r\n\r\n @OnOpen\r\n public void onOpen(Session session) {\r\n sessions.add(session);\r\n }\r\n\r\n @OnClose\r\n public void onClose(Session session) {\r\n sessions.remove(session);\r\n }\r\n\r\n @OnMessage\r\n public void onMessage(SocketMessage message, Session client)\r\n throws IOException, EncodeException {\r\n LOG.info(\"websockets onMessage {} \/ {} \", message.getListener(), message.getMessage());\r\n\r\n if (\"Handshake\".equalsIgnoreCase(message.getType())) {\r\n Player player = new Player(message.getListener(), 1000);\r\n client.getUserProperties().put(\"player\", player);\r\n sessionsMap.put(message.getListener(), client);\r\n } else if (\"Bye\".equalsIgnoreCase(message.getType())) {\r\n \/\/ Terminar sesion del usuario\r\n try {\r\n client.close(new CloseReason(CloseCodes.NORMAL_CLOSURE, \"Game finished\"));\r\n } catch (IOException e) {\r\n throw new RuntimeException(e);\r\n }\r\n sessionsMap.remove(message.getListener());\r\n } else {\r\n \/\/String oldCmd = (String) client.getUserProperties().get(\"cmd\");\r\n play(message, client);\r\n }\r\n\r\n for (Session session : sessions) {\r\n session.getBasicRemote().sendObject(message);\r\n }\r\n }\r\n\r\n private void play(SocketMessage message, Session session) {\r\n try {\r\n session.getUserProperties().put(\"cmd\", message.getType());\r\n\r\n Player player = (Player) session.getUserProperties().get(\"player\");\r\n Blackjack21 blackjack21;\r\n \/\/ Si es dibujar\r\n if (\"DRAW\".equalsIgnoreCase(message.getType())) {\r\n double bet = Double.parseDouble(message.getMessage());\r\n blackjack21 = new Blackjack21(player, bet);\r\n session.getUserProperties().put(\"blackjack21\", blackjack21);\r\n } else {\r\n blackjack21 = (Blackjack21) session.getUserProperties().get(\"blackjack21\");\r\n }\r\n\r\n if (\"OPEN\".equalsIgnoreCase(blackjack21.getGameStatus())) {\r\n if (\"HIT\".equalsIgnoreCase(message.getType())) {\r\n blackjack21.hit();\r\n } else if (\"STAND\".equalsIgnoreCase(message.getType())) {\r\n blackjack21.stand();\r\n } else if (\"SPLIT\".equalsIgnoreCase(message.getType())) {\r\n blackjack21.split();\r\n } else if (\"DOUBLE\".equalsIgnoreCase(message.getType())) {\r\n double bet = Double.parseDouble(message.getMessage());\r\n blackjack21.doubles(bet);\r\n\r\n }\r\n\r\n ObjectMapper mapper = new ObjectMapper();\r\n HashMap<String, Object> map = new HashMap<>();\r\n map.put(\"blackjack21\", blackjack21);\r\n WebSocketsDispatcher wss = ServerEndpoint.getWebSocketsDispatcher();\r\n\r\n String json = mapper.writeValueAsString(map);\r\n SocketMessage responseMessage = new SocketMessage();\r\n responseMessage.setListener(message.getListener());\r\n responseMessage.setMessage(json);\r\n responseMessage.setType(\"CURRENT_GAME\");\r\n wss.dispatch(message.getListener(), responseMessage);\r\n\r\n } \r\n \r\n if (\"STAND\".equalsIgnoreCase(blackjack21.getGameStatus())) {\r\n \/\/ Le toca jugar al crupier\r\n\r\n while (\"STAND\".equalsIgnoreCase(blackjack21.getGameStatus())) {\r\n blackjack21.hitDealer();\r\n \r\n ObjectMapper mapper = new ObjectMapper();\r\n HashMap<String, Object> map = new HashMap<>();\r\n map.put(\"blackjack21\", blackjack21);\r\n WebSocketsDispatcher wss = ServerEndpoint.getWebSocketsDispatcher();\r\n String json = mapper.writeValueAsString(map);\r\n SocketMessage responseMessage = new SocketMessage();\r\n responseMessage.setListener(message.getListener());\r\n responseMessage.setMessage(json);\r\n responseMessage.setType(\"CURRENT_GAME\");\r\n wss.dispatch(message.getListener(), responseMessage);\r\n }\r\n\r\n }\r\n\r\n } catch (Exception e) {\r\n e.printStackTrace();\r\n LOG.error(\"Play ERROR {}\", e);\r\n }\r\n }\r\n\r\n public static WebSocketsDispatcher getWebSocketsDispatcher() {\r\n return webSocketsDispatcher;\r\n }\r\n\r\n protected static ConcurrentHashMap<String, Session> getListenerMap() {\r\n return sessionsMap;\r\n }\r\n}\r\n<\/pre>\nYa tenemos listo el socket del lado del servidor, ahora vamos a desarrollar el cliente web usando AngularJS.<\/p>\n
El archivo\u00a0services.js inicia el servicio del lado del cliente usando AngularJS y WebSockets de JavaScript<\/p>\n
angular.module('starter')\r\n .factory('WSS', function ($rootScope, API) {\r\n var websocket;\r\n var open = 0;\r\n return {\r\n isOpen: function () {\r\n return open;\r\n },\r\n subscribe: function () {\r\n websocket = new WebSocket(API.WSS_SOCKET);\r\n websocket.onopen = function (event) {\r\n console.log(\"ws opened\");\r\n open = 1;\r\n var message = {\r\n \"listener\": \"listener:\" + MASTER_ID,\r\n \"message\": \"subscribe\",\r\n \"type\": \"Handshake\"\r\n };\r\n websocket.send(JSON.stringify(message));\r\n };\r\n websocket.onmessage = function (event) {\r\n var json = JSON.parse(event.data);\r\n if (json.type === \"CURRENT_GAME\") {\r\n $rootScope.$broadcast('rootScope:broadcast', ['blackjack21', JSON.parse(event.data)]);\r\n }\r\n };\r\n websocket.onclose = function (event) {\r\n console.log(event.data);\r\n };\r\n websocket.onerror = function (event) {\r\n console.log(event.data);\r\n };\r\n return websocket;\r\n },\r\n closeSocket: function () {\r\n if (websocket !== undefined) {\r\n var message = {\r\n \"listener\": \"listener:\" + MASTER_ID,\r\n \"message\": \"unsubscribe\",\r\n \"type\": \"Bye\"\r\n };\r\n websocket.send(JSON.stringify(message));\r\n }\r\n open = 0;\r\n },\r\n sendMessage: function (msg, type) {\r\n if (websocket !== undefined) {\r\n var message = {\r\n \"listener\": \"listener:\" + MASTER_ID,\r\n \"message\": msg+\"\",\r\n \"type\": type\r\n };\r\n websocket.send(JSON.stringify(message));\r\n }\r\n }\r\n \r\n };\r\n });\r\n<\/pre>\nPodemos ver como se implementa el metodo sendMessage que enviara los mensajes al socket y la implantaci\u00f3n de los m\u00e9todos escuchadores de WebSockets, donde podemos\u00a0resaltar el m\u00e9todo\u00a0onmessage que traduce los mensajes enviados desde el servidor y son enviados a toda la aplicaci\u00f3n usando\u00a0\u00a0$rootScope.$broadcast de AngularJS.<\/p>\n
El archivo constants.js creamos la variable WSS_SOCKET con el URI del Socket<\/p>\n
angular.module('starter')\r\n .constant(\"API\", {\r\n \"WSS_SOCKET\": \"ws:\/\/\"+ (document.location.hostname === \"\" ? \"localhost\" : document.location.hostname)+ \":\" + (document.location.port === \"\" ? \"8080\" : document.location.port) + \"\/blackjack21\/server\",\r\n }\r\n);\r\n<\/pre>\nEl fichero mainController.js<\/p>\n
angular.module('starter')\r\n .controller('MainCtrl', ['$rootScope', '$scope', '$state', '$location', '$http', 'API', 'WSS', '$cookies', function ($rootScope, $scope, $state, $location, $http, API, WSS, $cookies) {\r\n $scope.bet = '1';\r\n $scope.blackjack21 = {};\r\n $rootScope.$on('rootScope:broadcast', function (event, data) {\r\n \/\/console.log(data);\r\n $scope.blackjack21 = {};\r\n if (data !== undefined && data.length > 0) {\r\n if ('blackjack21' === data[0]) {\r\n $scope.blackjack21 = (JSON.parse(data[1].message)).blackjack21;\r\n $scope.$apply();\r\n } \r\n }\r\n });\r\n if (WSS.isOpen() === 0) {\r\n $scope.wss = WSS.subscribe();\r\n }\r\n\r\n $scope.commad = function (type) {\r\n WSS.sendMessage($scope.bet, type);\r\n \/\/console.log(type);\r\n };\r\n\r\n }]);\r\n<\/pre>\nVamos a crear una interfaz muy simple en HTML,<\/p>\n
<input type=\"text\" class=\"form-control text-right\" ng-model=\"bet\" required placeholder=\"0.00\">\r\n \r\n <button type=\"button\" class=\"btn btn-default\" ng-disabled=\"blackjack21.gameStatus !== 'OPEN'\" ng-click=\"commad('DOUBLE')\">DOUBLE<\/button>\r\n <button type=\"button\" class=\"btn btn-default\" ng-disabled=\"blackjack21.gameStatus !== 'OPEN'\" ng-click=\"commad('SPLIT')\">SPLIT<\/button>\r\n <button type=\"button\" class=\"btn btn-default\" ng-disabled=\"blackjack21.gameStatus !== 'OPEN'\" ng-click=\"commad('HIT')\">HIT<\/button>\r\n <button type=\"button\" class=\"btn btn-default\" ng-disabled=\"blackjack21.gameStatus !== 'OPEN'\" ng-click=\"commad('STAND')\">STAND<\/button>\r\n <button type=\"button\" class=\"btn btn-default\" ng-click=\"commad('DRAW')\">DRAW<\/button>\r\n\r\n <h2>{{blackjack21.gameStatus}}<\/h2>\r\n\r\n <p><i>{{blackjack21.playerHand.score}}<\/i> <\/p>\r\n \r\n <div class=\"cardstack\" style=\"font-size: 18px;\">\r\n <div ng-repeat=\"cards in blackjack21.playerHand.cards\" class=\"card rank{{cards.rank}}{{cards.suit}}\">{{cards.rank}} <\/div>\r\n <p><\/p>\r\n <\/div>\r\n \r\n <p><i>{{blackjack21.dealerHand.score}}<\/i> <\/p>\r\n \r\n <div class=\"cardstack\" style=\"font-size: 18px;\">\r\n <div ng-repeat=\"cards in blackjack21.dealerHand.cards\" class=\"card rank{{cards.rank}}{{cards.suit}}\">{{cards.rank}} <\/div>\r\n <p><\/p>\r\n <\/div><\/pre>\nComo vemos ya tenemos una aplicaci\u00f3n en tiempo real usando Java WebSocket y AngularJS<\/p>\n
Si lo quieres ver en funcionamiento:<\/p>\n