Esse repositório faz parte do desafio disponível nessa thread do twitter e também nesse post de dev.to.
Por favor, note que o código disponível aqui não tem qualidade de produção e não deveria ser usado para referência sobre como desenvolver uma API para SSE.
- O fonte da API para consumir os eventos de cotação está disponível em src.
https://www.highcharts.com/demo e https://www.highcharts.com/demo/dynamic-click-to-add - para referência de gráficos dinâmicos.
Para executar a imagem docker diretamente do dockerhub (sem precisar fazer build):
docker run --rm -p 8080:80 zanfranceschi/desafio-02-frontend_e_sse
Se preferir fazer o build da imagem, siga os passos à seguir.
cd ./src
Para construir a imagem docker, execute:
docker build -t desafio-02-frontend_e_sse .
Para executar um container, execute:
docker run --rm -p 8080:80 desafio-02-frontend_e_sse
Os exemplos têm como premissa que você esteja executando o container docker na porta 8080.
Requisição:
GET http://localhost:8080/cotacoes
A resposta será do tipo "text/event-stream". Use o seguinte como exemplo para iniciar.
const source = new EventSource('http://localhost:8080/cotacoes');
source.onmessage = function (event) {
console.log(event.data);
};
source.onopen = function(event) {
console.log('onopen');
};
source.onerror = function(event) {
console.log('onerror');
}
Você também pode usar o arquivo ./src/frontend.html ou acessar http://localhost:8080 após ter subido a imagem docker como uma referência.
A imagem seguinte é a minha sugestão de resolução:
O fonte para essa sugestão de resolução com a biblioteca highcharts está em ./src/frontend-com-grafico.html.
Também é possível ver o funcionamento dessa página através do container acessando http://localhost:8080/frontend
Abaixo você encontra exemplos de resoluções criados pela comunidade:
FAÇA SEU PULL REQUEST E INCLUA SUA SOLUÇÃO AQUI!!!