ejemplitos web

teoria

esta es la teoria que el sapo usa para impresionar y dar consultoria a los consultores de software
y a los arquitectos (el programador que no programa y que solo vende humo lo siento tenia que decirlo)
para que cobren precios obsenos a los clientes para pagar los salarios obsenos de la gente de ti

protocolo
conjunto de reglas para establecer una comunicacion

protocolo web
son los protocolos que fueron creados para los browser(chrome ,firefox,opera,internet explorer)

tipos de comunicacion
fullduplex vidirecional
unidrecional vidirecional

protocolo web
   fullduplex -> websocket
   halfduples -> sse esta abilitado para enviar el proceso de una peticion
             http no esta abilitado para enviar el proceso de una peticion

protocolos sobre web
   stomp es un protocolo que corre sobre websocket
   rest es una pequeña capita ensima de http
   soap es lo mismo que rest pero mal echo solo funciona con xml con una estructura predifinida
      y puede o no trabajar sobre protocolo web a los arquitectos les guta usar
      para vender software mas "enterprise" y para perder el tiempo creando gigantesco archivos de configuracion en xml


y el sapo que protocolo te recomienda para cada caso de uso
   si quieres un chat multi room webosocket o stomp
   si quieres enviar notificaciones de progreso del estilo procesando 10% 20% 30% ....
   usa sse
   si quieres hacer ajax para que tu formulario tenga refresco parcial y no tenga que rellenar el formulario osea una aplicacion web estilo erp inventario facturacion
   usa http con un poquito de cariño de javascript
   soap es para amargarse la vida o para cobrar por horas
   pizarron colaborativo o paint colaborativo stomp o webscoket


apliacion en spring boot
   para http se usa la paqueteria de rest y las anotoaciones restcontroller o controller
   para soap ya ni me acuerdo me da ansiedad usa google "soap spring boot" y porfavor no obliges a los programadores a usar xml a mano
   para sse se usa webflux o sseemiter
   para websocket se usa TextWebSocketHandler
   para stomp se usa la anotacion MessageMapping

la aplicacion en javascript
   para http usa jquery o XMLHttpRequest(no necesita libreria) o cualquier libreria de moda axios
   para soap se usa lo mismo pero usualmente no se usa mucho en javascript mas se usa para comunicarte con otro servidor
   para sse usa EventSource (no necesita libreria)o axio
   para stomp usa la libreria stompjs

para tu proyecto solo lo buscas en la cajita del spring initializer XD

y recuerda que puedes acceder que puedes crear apliacion de escritorio o movil o integracion con otro servidor reconoce todos los protocolos web
hay libreria para todo

y si quieres hacer un tostadora smart y no se puede con protocolo web usa mqqt es tema aparte

ya les paso codigo de ejemplo mas rato pero estoy trabajando no se por que me pagan

Código

package com.example.demo;
 
 
import java.util.UUID;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
 
import org.springframework.http.HttpStatus; 
import org.springframework.http.ResponseEntity; 
import org.springframework.web.bind.annotation.GetMapping;
 
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyEmitter;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
 import org.springframework.web.servlet.mvc.method.annotation.StreamingResponseBody;
 
@RestController
 
public class ProgresController {
 
	   ExecutorService nonBlockingService = Executors.newCachedThreadPool();
 
    @GetMapping("rbe")
    public  ResponseBodyEmitter   handleRbe() {
        ResponseBodyEmitter emitter = new ResponseBodyEmitter();
        nonBlockingService.execute(() -> {
                try {
                	for(int c=0;c<30;c++) {
                		  emitter.send("rbe" );
                		  Thread.sleep(150);
                	}
 
                    emitter.complete();
                } catch (Exception ex) {
 
                      emitter.completeWithError(ex);
                }
            });
 
            return emitter;
        } 
 
    @GetMapping("sse")
    public SseEmitter handleSse() {
        SseEmitter emitter = new SseEmitter(1000l*5*60 );
 
        UUID randomUUID = UUID.randomUUID();
        nonBlockingService.execute(() -> {
            try {
            	for(int c=0;c<20;c++) {
            		emitter.send("sse "+c+" "+randomUUID);
            		Thread.sleep(100);
            	}
 
                emitter.complete();
            } catch (Exception ex) {
 
                emitter.completeWithError(ex);
            }
        });
 
        return emitter;
    }
    @GetMapping("srb")
    public ResponseEntity<StreamingResponseBody> handlesrb() {
        StreamingResponseBody stream = out -> {
            String msg = "srb";
            try {
            	for(int c=0;c<20;c++) {
                	out.write(msg.getBytes());
                	Thread.sleep(100);
                }	
			} catch (Exception e) {
 
			}
 
 
        };
        return new ResponseEntity(stream, HttpStatus.OK);
      }
}

Código

<html>
<body>
 
	<button id="btnclose">close sse</button>
 
	<h1>holis</h1>
	<span  id="log"></span>
	<div id="rbe"></div>
    <div id="sse"></div>
    <div id="srb"></div>
 
	<script>
 
	 var xhr = function(url) {
		    return new Promise(function(resolve, reject) {
		      try {
		        var xmhr = new XMLHttpRequest();
		        //Listen for API Response
		        xmhr.onreadystatechange = function() {
		          if (xmhr.readyState == XMLHttpRequest.DONE && xmhr.status == 200) return resolve(xmhr.responseText);
		        };
		        //Open connection
		        xmhr.open("GET", url, true);
		        //Additional headers as needed
		        //x.withCredentials = true;
		        //x.setRequestHeader("Accept", "application/json");
		        //x.setRequestHeader("Content-Type", "text/plain");
		        //Perform the actual AJAX call
		        xmhr.send();
		      } catch (ex) {
		        reject("Exception: Oh CORS's you've made a mistake!");
		      }
		    });
		  };
 
 
	 xhr('http://localhost:8080/rbe').then(function(success){
	    var el = document.getElementById('rbe');
	    el.appendChild(document.createTextNode(success));
	    el.appendChild(document.createElement('br'))
	  }); 
	  /**
	   * SSE
	   */
	var sse = new EventSource('http://localhost:8080/sse');
	  sse.onmessage = function (evt) {
	    var el = document.getElementById('sse');
	    el.appendChild(document.createTextNode(evt.data));
	    el.appendChild(document.createElement('br'))
	  };
	  sse.onerror=function(evt){
		  sse.close();
	  }
	  /* 
	   * SRB
	   */
	  xhr('http://localhost:8080/srb').then(function(success){
	    var el = document.getElementById('srb');
	    el.appendChild(document.createTextNode(success));
	    el.appendChild(document.createElement('br'))
	  });
 
 
	  document.getElementById("btnclose").onclick=function(){
		  sse.close();
	  }
	</script>
</body>
</html>