Formulario de Mantenimiento con WebSocket

1.- Crear el paquete model y dentro del paquete creamos la clase

Usuario

package model;

public class Usuario {

private int id;
private String codigo;
private String nombre;

public int getId() {

return id;
}
public void setId(int id) {
this.id = id;
}
public String getCodigo() {
return codigo;
}
public void setCodigo(String codigo) {
this.codigo = codigo;
}
public String getNombre() {
return nombre;
}
public void setNombre(String nombre) {
this.nombre = nombre;
}
}

2.- Crear el paquete socket y crear la Clase UsuarioManager.java

package socket;
import java.util.ArrayList;
import javax.enterprise.context.ApplicationScoped;
import java.util.HashSet;
import java.util.List;
import java.util.Set;
import javax.json.JsonObject;
import javax.json.spi.JsonProvider;
import javax.websocket.Session;
import model.Usuario;

@ApplicationScoped
public class UsuarioManager {
private int deviceId = 1;
private final Set<Session> sessions = new HashSet<>();
private final Set<Usuario> usuarios = new HashSet<>();

public List<Usuario> getUsuarios() {

return new ArrayList<>(usuarios);
}
public void addSession(Session session) {
sessions.add(session);
for (Usuario usuario : usuarios) {
JsonObject addMessage = createAddMessage(usuario);
enviarASession(session, addMessage);
}
}
public void addUsuario(Usuario usuario) {
usuario.setId(deviceId);
usuarios.add(usuario);
deviceId++;
JsonObject addMessage = createAddMessage(usuario);
enviarATodasLasSessiones(addMessage);
}
public void removeUsuario(int id) {
Usuario usuario = getDeviceById(id);
if (usuario != null) {
usuarios.remove(usuario);
JsonProvider provider = JsonProvider.provider();
JsonObject removeMessage = provider.createObjectBuilder()
.add("action", "remove")
.add("id", id)
.build();
enviarATodasLasSessiones(removeMessage);
}
}
private Usuario getDeviceById(int id) {
for (Usuario usuario : usuarios) {
if (usuario.getId() == id) {
return usuario;
}
}
return null;
}
 private JsonObject createAddMessage(Usuario usuario) {
JsonProvider provider = JsonProvider.provider();
JsonObject addMessage = provider.createObjectBuilder()
.add("action", "add")
.add("id", usuario.getId())
.add("codigo", usuario.getCodigo())
.add("nombre", usuario.getNombre())
.build();
return addMessage;
}
private void enviarATodasLasSessiones(JsonObject message) {
for (Session session : sessions) {
enviarASession(session, message);
}
}

private void enviarASession(Session session, JsonObject message) {

try {
session.getBasicRemote().sendText(message.toString());
} catch (Exception ex) {
sessions.remove(session);
}
}
}

3.- Creamos la Clase UsuarioSocket.java dentro del paquete socket

package socket;

import java.io.StringReader;
import javax.enterprise.context.ApplicationScoped;
import javax.inject.Inject;
import javax.json.Json;
import javax.json.JsonObject;
import javax.json.JsonReader;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import model.Usuario;

@ApplicationScoped
@ServerEndpoint("/acciones")
public class UsuarioSocket {

@Inject
 private UsuarioManager usuarioManager;

@OnOpen
public void open(Session session) {
usuarioManager.addSession(session);

@OnMessage
public void handleMessage(String message, Session session) {
try (JsonReader reader = Json.createReader(new
StringReader(message))) {
JsonObject jsonMessage = reader.readObject();

if ("add".equals(jsonMessage.getString("action"))) {
Usuario usuario = new Usuario();
usuario.setCodigo(jsonMessage.getString("codigo"));
usuario.setNombre(jsonMessage.getString("nombre"));
usuarioManager.addUsuario(usuario);
}
if ("remove".equals(jsonMessage.getString("action"))) {
int id = (int) jsonMessage.getInt("id");
usuarioManager.removeUsuario(id);
}
}
}
}

4.- Creamos el estilo estilo.css

.contenedor-tabla{
display: table;
}
.contenedor-fila{
display: table-row;
border: 2px solid #000000;
}
.contenedor-columna{
display: table-cell;
border: 1px solid #000000;
vertical-align: middle;
padding: 10px;
}

5.- Creamos el archivo websocket.js

window.onload = init;
var socket = new
WebSocket("ws://localhost:8080/Mantenimiento/acciones");
socket.onmessage = onMessage;
function onMessage(event) {
var usuario = JSON.parse(event.data);
if (usuario.action === "add") {
visualizarUsuario(usuario);
}
}
function removeUsuario(element) {
var id = element;
var DeviceAction = {
action: "remove",
id: id
};
socket.send(JSON.stringify(DeviceAction));
}
function visualizarUsuario(device) {
var table = document.getElementById("tabla");

var col1 = document.createElement("div");

col1.setAttribute("class", "contenedor-columna");
col1.innerHTML = device.codigo;

var col2 = document.createElement("div");

col2.setAttribute("class", "contenedor-columna");
col2.innerHTML = device.nombre;

var col3 = document.createElement("div");

col3.setAttribute("class", "contenedor-columna");
col3.innerHTML = "<a href=\"#\" OnClick=removeUsuario(" + device.id +
")>Eliminar</a>";

var fila = document.createElement("div");

fila.setAttribute("class", "contenedor-fila");
fila.setAttribute("id", device.id);

fila.appendChild(col1)
fila.appendChild(col2)
fila.appendChild(col3)

table.appendChild(fila);

}
function addUsuario(codigo, nombre) {
var UsuarioAction = {
action: "add",
codigo: codigo,
nombre: nombre
};
socket.send(JSON.stringify(UsuarioAction));
}

function showForm() {
document.getElementById("FormularioAgregarUsuario").style.display = '';
}

function hideForm() {
document.getElementById("FormularioAgregarUsuario").style.display =
"none";
}

function formSubmit() {
var formulario = document.getElementById("FormularioAgregarUsuario");
var codigo = formulario.elements["codigo"].value;
var nombre = formulario.elements["nombre"].value;
hideForm();
document.getElementById("FormularioAgregarUsuario").reset();
addUsuario(codigo, nombre);
}

function init() {
hideForm();
}

6.- Finalmente modificamos el arhivo index.html

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<script src="websocket.js"></script>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div>Mantenimiento de Usuario</div>
<div id="AgregarUsuario">
<div class="button">
<a href="#" OnClick="showForm()">Agregar Usuario</a>
</div>
<form id="FormularioAgregarUsuario">
<h3>Agregar Usuario</h3>
<table>
<tr>
<td>Codigo
</td>
<td><input type="text" name="codigo" id="codigo">
</td>
</tr>
<tr>
<td>Nombre:
</td>
<td><input type="text" name="nombre" id="nombre">
</td>
</tr>
</table>
 <input type="button" class="button" value="Agregar"
onclick=formSubmit()>
<input type="reset" class="button" value="Cancelar"
onclick=hideForm()>
</form>
</div>
<br />

<h3>Listado</h3>
<div id="contenido">
<div id="tabla" class="contenedor-tabla">
<div id="fila" class="contenedor-fila">
<div id="col1" class="contenedor-columna">
Codigo
</div>
<div id="col2" class="contenedor-columna">
Nombre
</div>
<div id="col3" class="contenedor-columna">
Eliminar
</div>
</div>
</div>
</div>
</body>
</html>