[Música] Olá tudo bem seja muito bem-vindo ao terceiro dia da imersão full stack e full cycle eu sou o Wesley e se você ainda não assistiu aos vídeos anteriores Eu recomendo fortemente que você volte os assista pois já avançamos bastante no nosso projeto prático no nosso vídeo anterior nós colocamos a mão na massa no front end da nossa aplicação foi um passo muito importante pois agora a Gente tem uma base sólida dinâmica e performática pronta pra gente poder interagir com o restante do nosso sistema Hoje a gente vai avançar mais um degrau mergulhando no uso
de web sockets Mas afinal o que que são os taus do websockets de forma simples eles possibilitam que o cliente e o servidor eles mantenham uma conexão aberta bidirecional diferente do modelo clássico de request e response que a gente conhece ali no http onde cada Cliente solicita ao servidor que vai trazer uma resposta já com os websockets assim que o servidor possui uma informação nova ele pode imediatamente enviá-la oo Cliente sem precisar que o cliente ele fique consultando o servidor a todo momento Essa abordagem Ela traz inúmeras vantagens em primeiro lugar temos a comunicação em
tempo real Já que as informações elas chegam instantaneamente ao front-end essa forma de comunicação reduz a sobrecarga de Rede pois não é necessário mais ficar enviando solicitações periódicas basta uma única conexão ativa e que tudo vai tá funcionando e embora possa parecer um pouco complexo o uso de websocket se tornou cada vez mais simples graças a diversas bibliotecas e frameworks no nosso caso o backend foi desenvolvido em nestjs que oferece recursos para lidar com websockets de forma bem descomplicada garantindo uma integração tranquila com o front-end em nextjs Grandes empresas já utilizam esse tipo de tecnologia
para fornecer experiências mais fluídas e dinâmicas sem que o usuário ele precise ficar recarregando manualmente Ou esperar por diversos intervalos aí de atualização e no vídeo de hoje nós vamos fazer a integração do nosso backend e do nosso front end utilizando websockets Nós criamos o nosso backend usando o nestjs o nosso front end usando o nextjs mas a gente sabe que numa corretora num home broker Nós precisamos ter essas informações atualizadas em tempo real e por conta disso trabalhar com uma arquitetura e tecnologias utilizando websockets é uma das formas mais performáticas e garantidas que nós
temos para que a gente possa avaliar e ter acesso em tempo real a todos os dados que estão sendo trafegados através da nossa corretora agora antes de a gente colocar a mão na massa dá uma olhada na história desse nosso aluno que faz parte do nosso Curso p ccho e que em breve aí a gente vai abrir as matrículas então fica ligado eu tive um Burnout aquele momento que você que você tá estagnado e que você não começa a ver possibilidades Mas você estuda estuda estuda e nada acontece eu cheguei a sair sim da área
né eu tenho basicamente aos 14 anos aí no geral fui fazer alguma as coisas pessoais que eu achava interessante por não ter dado certo eu voltei a trilhar essa área novamente quando eu Voltei eu voltei com mais garra com mais determinação que foi aí que poucos meses depois eu conheci a full pych eu tava procurando realmente uma plataforma que desse sentido verdadeiro não fosse mais um curso mais um dinheiro investido que realmente não me agradasse não me satisfaze a fyo realmente foi assim um diferencial que trouxe e uma segurança no conhecimento que era passado que
abriu a minha mente e que facilitou muito hoje dentro da empresa que eu Trabalho a poder est interagindo com as equipes com as squads Foi uma foi uma segurança para eu poder est participando por exemplo das reuniões dentro as squads falar sobre por exemplo falar sobre uma tecnologia que realmente Hoje eu aprendi dentro da plataforma para mim eu falo de uma forma mais eu posso dizer que olha essa solução aqui vai ajudar se eu pudesse resumir o Hugo antes e o depois eu era o meu maior limitador hoje eu sou mais atuo mais como devops
Voltado pra área de desenvolvimento eu posso dizer que eu adquiri algumas formações tá e não foram umaem nem duas foram algumas até formações internacionais mas a Full pycon para mim ela trouxe um diferencial de Carisma conteúdo uma evolução correta é uma evolução direcionada e isso a f pyo faz muito bem daqui pra frente tenho certeza que a Full pych para mim Ela ajudou a trilhar esse caminho de de sucesso e realização na minha Carreira bom pessoal agora bora pra tela do computador do luí Carlos onde ele fará essa implementação Lembrando que no vídeo de amanhã
a gente vai começar a juntar as peças com um microsserviço que eu vou desenvolver na linguagem go então também fica ligado aí salve 10 beleza Luiz Carlas na área Então vamos continuar a nossa jornada no desenvolvimento do Home Broker vamos agora meter a mão no websocket Que bom ter você aqui comigo firme juntos nós Vamos chegar a conclusão desse projeto tá então bora meter a mão no código vamos entender quais vão ser as tecnologias usadas aqui durante essa aula e também o que que nós vamos ter que fazer então Mais Uma Vez vamos usar typescript
JavaScript como as linguagens principais e claro lá do front Change next com react mais uma vez e lado do back node com o nest e aqui estão as duas tecnologias novas principais aqui dessa aula nós vamos utilizar o modo Streams do Mongo DB e o socket io para poder fazer websockets porque no node eu consigo fazer com o próprio node mas o socket I uma Lib que Abstrai algumas alguns detalhes e ainda o nest vai estar abstraindo mais detalhes do socket io nós vamos nos preocupar mais em criar de fato eh essa comunicação em si
ali preocupado em fazer o disparo das mensagens ou receber Prim os eventos já tudo Organizado tá então durante a aula nós vamos criar o servidor de web soet aí nós vamos criar as ordens de compra e venda via esses websockets não vai ser via http Apesar que a gente criou um http ali apenas para poder fazer um teste né Nós vamos ter uma coleção do Diário do ativo Isso aqui vai ser feito mais pro final da aula porque toda vez que ele muda de preço nós vamos manter o histórico Isso aqui vai acabar indo pro
gráfico aí para esse Change Streams nós vamos ter duas tarefas pegar a mudança do preço dos ativos e pegar os novos Diários do ativo aí vai ser esse recurso do mong DB nós vamos disparar os eventos de mudança desses dos preços ativos e também dos Diários e web socket lá pro next para que a gente possa tanto mudar os preços nos lugares respondentes e também ir atualizando o gráfico e tem integração do socket io com o nextjs então nós temos muita tarefa aqui durante essa Aula nesse material também eu deixei algumas coisas sobre como que
funciona o websocket vocês podem dar uma lida também eu queria mostrar aqui um pouquinho do que vai acontecer né mais na questão do Change streams que vai ser esse cenário aqui então nós vamos ter um mongo usando um camaradinha que é o op logs eu vou falar disso mais tarde e aí através do evn mirror do node que nós vamos ficar ouvindo tudo que tá acontecendo lá então É isso vamos lá pessoal então voltando pro nosso backend do Home Broker construído com rest nós vamos construir esse servidor de websocket vai ser interessante porque ele vai
dar toda a facilidade e vai abstrair toda os detalhes de criação desse servidor consigo criar servidores de websocket com apenas o node JS ou utilizando o socket I alb mais famosa é que ela vai dar uma série de outras facilidades mas o nest vai abstrair mais detalhes ainda Então vamos lá primeira coisa que eu vou fazer aqui vai ser a instalação do @ nestjs websockets e @ nestjs platform trocke io que essa Lib aqui que faz a integração do nest com socket io permitindo aí criar o servidor de websocket essa parte aqui é mais genérica
aí do nest Pronto agora pra gente poder criar o nosso servidor de websocket nós vamos ter que ter um Gateway então vou fazer o comando aqui nest Generate Gateway orders a gente vai ver que agora vai ter um Gateway aqui que é uma classe que vai ter esse websocket Gate com um subscribe que ele cria por padrão então um G vai ser um serviço de websockets quando o nest montar a aplicação ele varre todo mundo que tem esse websocket GAT para poder buscar esse subscribe message e outras coisas que nós podemos Ter então eu posso
ter quantos gateways eu quiser inclusive até criar múltiplos servidores de websocket dentro da mesma aplicação o nest é muito poderoso por isso que ele Abstrai toda esses detalhes de criação do Servidor e permite que a gente vá muito mais longe ainda então esse Gate ele tem que ficar registrado no meu módulo em questão então ele tá registrado aqui em providers ele já vai carregar então vamos fazer o seginte Aqui primeira eu não est rodando meu banco de dados eu rodar aqui o meu Mongo e só por precaução como eu tava fazendo teste de algumas coisas
aqui eu vou matar esse nest aqui da vida e aí a gente pode abrir aqui o start Dev novamente e aí nós vamos ver aqui um log importante mostrando que orders Gate subscribed to the message message n que esse message aqui vai ser um evento nós lidamos sempre com websocket através de Eventos o client EV envia eventos pro servidor e o servidor envia eventos para os clientes eu posso disparar de uma vez uma mensagem para milhares ou milhões de clientes que estão conectados comigo tá vamos fazer aqui uma brincadeira com Postman Olha só eh o
Postman é uma ferramenta para poder brincar com essas requisições http mas eu consigo me comunicar com o servidor de websocket eu venho aqui em file New Vou marcar não websocket mas socket Io aí eu coloco aqui WS que é o protocolo do websocket bar 2 p bar bar localhost na porta 3000 e aqui eu me conecto primeira coisa me conectei então ele tá mostrando né que eu posso adicionar a lista Ness para receber mensagens e estou conectado vamos fazer aqui uma mudança na aplicação Esse payload é a mensagem que eu posso receber aqui então eu
vou colocar um consol log Ele vai recarregar isso vai fazer com que ele desconecte do servidor de websocket preciso me conectar novamente Então agora eu posso enviar a mensagem eu posso enviar inclusive um Jon já eu marco aqui ó Jon nós podemos enviar texto Jon binário Então vamos colocar aqui name hello world e aqui que é o evento que é o mesmo que tá lá com decorat em cima do método vou Jogar message Então tá vendo a setinha para cima enviei o evento nós vamos ver agora no conso log que eu consegui capturar essa informação
Como que eu consigo emitir um evento cliente eu posso emitir de for espont tendo se eu pegar aqui uma do de weets eu tenho todos os clientes que estão conectados mas no caso aqui por exemplo eu posso pegar esse evento que eu acabei de receber e aquele client ali a Instância do Cent eu posso Emitir um message Ok com texto qualquer enfim posso fazer qualquer coisa então agora olha só quando eu me conectar e mandar a minha mensagem acho que ele deu um erro aqui Ah pera aí eu esqueci da eu tenho que colocar um
como é que eu posso message response que eu tenho que emitir para um evento Né por isso que deu erro ali então pronto antes disso venho aqui em eventos e coloca quero ouvir o message response Então faço um Listen agora ele está conectado nesse evento Então quando eu enviar a mensagem eu enviei a mensagem depois recebi o ok então a troca de mensagens agora é assim ela é bidirecional Ela é espontânea qualquer momento o cliente envia ao que ele quer o servidor também envia ele pode às vezes enviar depois que recebeu algo do Cliente ou
de alguma outra forma aconteceu alguma coisa aqui na minha aplicação se eu tiver instância dos clientes ou de um cliente específico faço um emit passo qual é o evento o segredo tá sempre aqui em volta do evento né Depois a gente vai fazer a parte do websocket do cliente Mas a questão é como que a gente vai fazer aqui a criação de orders Então a primeira coisa que eu vou fazer imagine como o GAT n é uma porta de entrada pra Minha aplicação como um Controller só que o Controller tá usando o http aqui a
gente tá usando websocket então para poder criar a Order eu já tem um serviço para isso né que é o Order service como o Order service tá registrado em providers eu consigo injetá-lo aqui então o primeiro ponto é definir qual é o evento que eu vou receber Qual o nome do evento a gente pode criar meio que uma espécie de um roteamento não tenho verbos aqui nem Nada do tipo então eu posso criar assim orders Create que aí fica organizado porque se eu tiver outras operações eu posso sempre prefixar com orders barra alguma coisa e
fica fácil de entender né então aqui eu vou receber esse payload né então eu vou chamar o meu ord service P Create eu tenho que passar aqui o asset ID que vai ser Eh payload agora eu tenho que Verificar aqui no frontend deixa eu pegar aplicação e jogar ela facilmente para cá quero só confirmar como que a gente fez nos formulários né a gente colocou de fato no estilo k Case shares e o price tá então aqui vai ser asset ID Wallet ID que nós não estamos trabalhando com cção tá sendo passado vai ser dessa
forma também aí tem o Type se é compra ou venda eh tem o Shares tudo pegando do payload Ou melhor aqui é shares né I colocando errado aqui e Price payload pon Price se eu quiser melhorar isso aqui ainda e eu posso tipar isso aqui falando assim ó tem o asset ID que é tem string porque a gente já recebe o objeto pronho aqui nós podemos F gente Pris de um Type typ shar e prém deixa dear mostando aques avisos al PR gente estar usando o n como tipo e aqui eu tenho que colocar um
a né então aqui vem ayn é assincrono não retorna essa string aqui eu posso pegar a Order e devolvê-la return Order eh O que que ele tá achando aqui comigo será que eu Coloquei Price Olha só Price tá como se é erro da da aula que a gente montou Nossa aplicação provavelmente Às vezes você Tava acompanhando lá você viu então aqui eu criei a Order e fez o retorno dela então estou criando a minha Order pelo websocket que vai reduzir a latência permitindo que os clientes cri mais rápido então vamos fazer aqui o seguinte agora
eu não tenho banco Ah o banco de dados já tá rolando Né primeiro a gente tem que fazer aqui criação de um ativo eh e de uma Wallet então eu posso pegar essa turminha aqui e vamos jogá-la para cá então agora na verdade até melhor para editar isso aqui no V code pegar aqui eu posso pegar os dois pontos colocar aspas Aqui aí fica mais fácil para editar lá então Eh vamos colocar aqui no share 5 e o preço 100 aí aqui eu tenho que pegar o ID de uma de um asset qualquer agora vem
aqui já vou colocar a Order como buy aqui faltou vírgula e agora o Wallet V consultar todas as Wallet disponíveis vou pegar essa aqui jogar para Pronto então tudo bonitinho aqui então aqui vai virar orders Create E aí esse retorno que tá aqui ele é interessante porque quando eu faço lado do client por exemplo um socket emit que é o que o Postman tá fazendo ali eu passo aqui o evento e os dados a gente pode confiar que os dados foram enviados Mas a gente não tem a certeza porque tá sendo enviado via rede Né
tudo pode acontecer mas eu posso ter um retorno aqui que a gente chama de acknowledgement ou simplesmente e que é essa confirmação de resposta então eu consigo configurar isso aqui no post marcando o E então agora primeira coisa Vamos conectar e agora eu vou enviar os dados e olha que legal enviei que os mesmos dados ali de cima ele me retornou a Order criada Inclusive tem o ID lá então Eh aqui eu já tenho a resposta né tá vendo que eu recebi no eu recebo com o mesmo evento mas é a confirmação se eu receb
isso eu sei que deu certo então pronto já estamos conseguindo criar orders pelo websocket Vamos pro nosso front chend aqui então primeira coisa que eu vou fazer é instalar o socket I client que é a parte client da biblioteca né a gente já tá usando a parte server embutida ali no nest Mas agora vamos aqui pra parte cli Primeira coisa que eu vou fazer aqui na raiz da minha aplicação pode ser até fora da pasta app tem mod aqui na raiz agora vou criar mais um na raiz que vai ser o socket trç iu como
nós podemos usar a conexão do socket io em vários arquivos em vários componentes né então tô criando aqui separado eu vou criar uma variável de socket aí eu chamo iio passando qual é o endereço de websocket qual é http 2 p bar bar local Roxo na porta 3000 né Nós temos aquele handshake que inicia com http é a própria porta que a gente já tá rodando ali com a nossa aplicação mas eu vou passar aqui uma segunda informação que é o aut connect igual a false se eu não passo isso aqui quando eu chamo já
essa função ele tenta conectar E no caso aqui de uma aplicação react tem toda aquela questão de como o componente funciona né eu tenho a função que é o componente E eu não posso colocar a chamada do socket solta vou ter que usar um Hook ali de client qualquer né o use effect ou alguma coisa semelhante eu não quero que ele já esteja conectado né eu vou pedir para ele conectar no momento específico ele já pode estar conectado porque outro componente já fez a conexão mas se eu chamar aqui que a função Connect ten aqui
a função Connect se eu chamara várias vezes já Tiver conectado el não faz nada mas é bom a gente ter controle fazendo com que a gente decida quando ele vai se conectar aí aqui em cima eu preciso importar que eu não fiz o I from socket ient aí agora aqui a gente vai ter aete tem aqui a função Connect pronto tá beleza aí aqui no caso do nosso formulário né que é onde nós estamos Com todos os campos e etc esse formulário aqui a gente volta aquele com aquela briga né de server component versus client
component que nós vimos na aula anterior nós entendemos a diferença entre um outro server component não tem interatividade a gente não pode usar nada específico ali que seja i do browser eventos e coisas assim e esse Order for ele é um server component porque ele não tem o US client Aqui em cima e para usar o websocket eu vou precisar que ele seja um client mas é o ponto vou passar esse componente inteiro para client valeria a pena vale sabe por até a gente não vai trabalhar com isso aqui por conta do tempo mas claro
que a gente vai acrescentar validação para esses campos e outras coisas assim acaba que isso aqui seria bom ser um client tá teria muitas coisas para poder ter um formulário Bacana Então vou Passar isso totalmente para client beleza né aí eu vou ter aqui um formulário melhor um um método para quando eu clicar no botão de submeter vai disparar esse submit aqui então vou colocar o on submit vai ser a função on submit ali de cima aqui eu recebo o evento da submissão que é do tipo form event que tá modelado aqui pelo react e
coloco Que é o evento que a tag que a gente tá manipulando né é o próprio formulário beleza a primeira coisa cancelo a submissão para ele não recarregar a página e pego os dados eu posso criar um New form data passando event current ele passa a Instância aqui do formulário E aí eu tenho acesso a todas as informações aqui facilmente não preciso usar US state ou nada para poder Capturar os valores de tudo que eu preciso certo beleza então feito isso eu vou chamar o meu socket ponto Connect tá vendo ó Eu quero me conectar
nesse momento às vezes eu posso já estar conectado mas eu tenho que chamar aí eu vou fazer um socket.on emit para orders Create passando os dados na verdade aqui eu Tenho que tomar cuidado que o form data eu não posso enviar ele eu tenho que converter ele para um data Então vou colocar assim ó data Object from entries form data entries que o form Dea seria mais usado se eu fosse enviar um um arquivo né muito utilizado aí para uploads e etc que a gente tem que pegar as informações dessa forma Então essa linha aqui
Converte para um objeto padrão a gente vai acabar tendo né o asset ID é igual a Wallet ID é igual e etc então aqui eu passo o meu deira mas o ponto é que quando eu faço esse emite aqui eu faço ele no modo noec eh eu não sei exatamente se o evento chegou lá no servidor se o servidor Proc s com sucesso porque veja eu posso estar enviando os dados e poderia ter até uma resposta de um erro aqui né então eu posso fazer a emissão dessa forma quando Eu não preciso verificar se aquele
evento foi emitido mas aí para poder ter aquela mesma opção aqui do Postman com o e nós vamos mudar para emite o FC aí ele vai ser uma promessa diferente do que era antes ele fica esperando ali o retorno né então Aqui nós temos a resposta que vai ser do tipo order a gente já criou esse tipo lá no models já né nós já temos esse tipo lá no models aqui Model a Nossa Order então eu tenho aqui a minha Order aí eu poderia Na verdade até já ter um uma mensagenzinha bacana para poder mostrar
que a aud foi criada com sucesso vou usar aqui uma Lib chamada rea to que vai permite criar essas mensagens flutuantes né então vou chamar assim ó toast na verdade deixa eu importar acho que code ainda não se ligou como que é Import Toast react Toy aí tenho aqui o toast Vamos colocar assim ordem de translated Type ou seja vai colocar ordem de compra ou ordem de venda de response Na verdade eu acho que vou mudar esse response para neworder melhor neworder ou seja compra de cinco de seis etc ações De props asset sbol criada
com sucesso e aí eu posso colocar aqui o tipo dessa mensagem pode dar uma olhada lá na biblioteca nós temos várias e tipos de mensagens tem de falha informação warning que fica ali no lado de amarelo e bege né E aí a posição que eu quero colocar lá no canto do lado direito ele vai flutuar dessa forma aqui ó para que esse Toast funcione eu tenho que passar lá no layout E cadê o layout da aplicação aqui na pasta app né aqui posso colocar ele dentro do B tem que passar o to container vou explicar
o que é isso aqui então aqui em cima Import toast container component toast Container aí esse aqui vai ser o novo componente que a gente vai criar chamar de toast container E aí Aqui nós vamos exportar toast container de toast container Lib aí aqui em cima eu vou importar toast container tanto de toast container Né toast container lip from Opa from react toast esse contêiner aqui é para poder fazer o controle do número de mensagens flutuantes né porque vamos sup ainda mais uma aplicação financeira dessa eh vai acontecendo as coisas e vai pingando notificação então
a tendência é que venha a primeira notificação a segunda vem embaixo dela aí daqui a pouco você tem a a sua Aplicação empilhando um monte de notificações E aí você não tem controle a gente poderia ter assim no máximo três notificações por vez aí tem o delay Se não me engano é 5 segundos para poder apagar então esse to container aqui ele é um context eh Api para que a gente possa fazer esse controle aí das mensagens que estão sendo abertas n então é algo que precisa do browser se eu passar somente esse Toso Contêiner
da Lib direto pro layout que ela vai ela tem que ficar num lugar mais ancestral é o Next não sabe que ele é um precisa de client né então por isso que a gente tá reexport fazendo a mesma coisa que a gente fez na aula anterior com as abas do float bite a gente não teve que fazer esse comportamento então é a mesma coisa tá agora o que que ele tá achando aqui comigo ele tá mostrando coloquei container tá certinho tá Colocando uma area Label ali eu não quero colocar isso aqui não tem necessidade tá
então feito voltando aqui para Tá ok vamos ver se a gente consegue criar uma nova ordem né então tenho que colocar aqui a porta 31 verdade eu tô dentro de imersão tem que next front Change d na porta 31 senão vai ter colisão Então vamos abrir aqui uma nova aba 3001 aí esse toast container Deixa eu ver se eu importei ele certo que ele tá chiando aqui Eh agora que eu tenho o nome dele deixa eu portar pelo eu coloquei Export aqui ó é porque o nome tava errado né então contêiner beleza assumiu erro aí
agora voltou ele mostra aquela tela que não eu tenho que escolher uma Carteira eu não tenho nada na minha carteira tenho ativo aqui já pronto então vamos comprar e vender Será que deu alguma zica deixa eu ver se odas está funcionando por algum motivo o link nosso não tá funcionando vamos ver aqui na página de página inicial aqui eu tenho o link passando Assets símbolo mas a carteira é tá correto tentar recarregar Cadê a minha Âncora eu coloquei para ele se comportar como link a não se que eu tenho importar do link errado esse Wallet
aqui não precisa tá aqui e aí eu coloquei o HF que ele colocou ali o bão mas não colocou A Âncora Dea jogar qualquer coisa aqui bom mexer ali ele Não mudou nada o que que tá rolando aqui at tem o lan das imagens né tenho que rodar aqui também pode ser isso que seja o problema na verdade eu vou até colocar esse comandinho aqui para poder rodar as imagens ali com aquele servidor avul aqui embaixo chamar ele de assets imag aí fica mais fácil a gente roda aqui Beleza mesmo assim tem alguma questão porque
eu mudei o o valor se bem que aqui pera aí ah eu mudei eu acho que eu não são dois lugares aqui a minha carteira tentando no lugar errado aqui eu não tinha mudado tá bom que eu replico para cá e aqui fica asset Symbol quero que táa faltando importa o link pode ver né se não tem uma Âncora aqui tá alguma coisa errada E aqui nesse caso botão ficou um pouco grande eu posso colocar um w Fit porque ele vai preencher somente a largura que é necessária então replico isso aqui para cá também Inclusive
essa repetição aqui poderia até virar um componente né Poderia ter um componente específico para ele Então olha só agora fica ali agora sim tá com HF bom então temos Aqui nosso gráfico com a parte de comprar ou não E aí eu quero ver aqui agora como que tá essa questão de websocket veja que eu não tenho Ainda nenhuma conexão de websocket porque eu não preciso que ela esteja aberta Eu até já poderia fazer uma pré-abertura para deixar mais rápido ainda mas é aquela questão de eu usar somente quando eu tenho necessidade então vamos fazer o
Seguinte aqui eu não preciso fazer mais nada só clicar em comprar que ele vai enviar a informação mas aqui a gente tem uma questão porque a política de cor vai incidir também nessa questão do websocket porque o browser vai iniciar essa conexão http para depois fazer o upgrade e fazer a conexão definitiva ele vai ver se o servidor está autorizando aqui a Porque estão rodando em portas diferentes você tá autorizado a se comunicar Então Aquela política de origem cruzada a gente vai precisar vir aqui e colocar um cor igual a true né Tem umas configurações
mais específicas mas isso aqui já libera todo o corse pra gente então agora vamos lá vou clicar aqui em comprar aí ordem de compra de ações criada com sucesso então aqui estão as chamadas né O que a gente deve se importar exatamente com essa aqui que ela que faz A conexão ali criando a conexão definitiva bidirecional então a Aqui nós temos algumas informações você vai entendendo isso no meio do processo eh também nós temos aqui algo chamado de pingpong que de tempos em tempos tanto cliente servidor ficam enviando eh como se fosse tá fazendo um
ping né só para ver se tá acessível então Eh esses eventos que vocês estão vendo aqui é justamente Esse cinco esse dois é isso Tá então Aqui nós temos o Aqui nós temos a troca né das mensagens e aqui o evento de envio ó ele coloca um prefixo na frente que se liga com o evento né a gente vê aqui que foi enviado e nós Recebemos a resposta e eu posso ver isso aqui com banco de D Vamos lá refresh eh quantas ordens que eu tenho tenho duas né tinha criado acho que uma antes e
essa agora que é um e um deve ser essa segunda aqui ó lá um eem um de compra Pendente e tudo mais então essa aqui é é a mágica de se mexer com esse server components né Nós tornamos esse camarada que um server um client component agora olhando pra nossa aplicação Então eu tenho essa parte aqui server tudo isso aqui é server aqui também aqui já é client aqui é client aqui é client e aqui é client então nós estamos fazendo essa divisão para poder só colocar client Aonde é necessário agora vamos pensar na parte
contrária desse websocket porque a gente usou para poder enviar informações pro servidor agora nós clientes Precisamos ser notificados do que está acontecendo ali do lado do servidor eu quero receber notificação quando o preço do ativo mudar uma para poder mudar o preço do ativo que tá aqui na minha janela posso mudar esse 100 aqui quando tiver mudança mudar o gráfico enfim né e Não só mudar o preço de um ativo mas de quando tiver aqui nessa tela eu posso usar essas notificações para vários propósitos aqui no meu cliente como que eu vou saber que um
preço do ativo mudou aí que vai entrar o m DB como uma tecnologia F fantástica para armazenamento mas que permite também várias outras funcionalidades adicionais toda vez que a gente faz alguma coisa no mongo o mongo registra Um log daquilo que a gente tá fazendo então você tá consultando tá fazendo um insert um update uma exclusão então ele acaba criando que a gente chama de oplog ou Operation logs são log das operações então eu consigo através no caso a gente tá no node né eu consigo usar um recurso chamado de Change stram ou ó Change
posso até colocar aqui Change streams que é no plural que eu permito que a minha aplicação seja provocada seja Notificada de uma mudança no banco de qualquer coleção de qualquer dado que eu quiser tá então o que vai acontecer é que eh como se a gente tivesse se conectando aqui no não estão conectando diretamente no Operation logs porque eu consigo fazer uma pesquisa em cima dele na verdade eu estou me conectando no mongo que vai ficar escutando ali o uplog ele me entrega o que está acontecendo é um evento né E no caso do node
nós Utilizamos O Event Emir para que a nossa aplicação seja provocada Então vou dar o exemplo desse event emitter eu consigo fazer assim um new event emit é nativo do próprio node eu criei aqui o meu Emir eu posso criar ele no lugar da minha aplicação E aí eu tô criando aqui um listener por exemplo eu quero ouvir o asset Price certo então aqui eu recebo o evento que aconteceu em algum outro lugar eu faço o emite tipo como se fosse um websocket né mas aqui a questão é a arquitetura de como que tá funcionando
a coisa então faço um asset Price passando o evento que aconteceu O Event Emir é muito utilizado no nodejs Então tem um eh os listeners tem algum lugar que emite a mesma Instância ali ele notifica todo mundo que tá inscrito Então o que Acontece com ess Change streams é o mongo fica lá ouvindo o Operation logs e quando a gente inicia cria um evento em miror E aí nós vamos recebendo esses eventos que estão acontecendo Então o que que nós vamos fazer primeira coisa antes de fazer o websocket eu vou chegar aqui em asset service
e vou criar um subscribe events tá eu acesso o meu esima e tem o método Watch aqui no método watch nós vamos passar eh como que eu o que que eu quero enxergar eu posso ter uma restrição ó não me entrega se não for não tiver determinada coisa na minha coleção ou se eu só quero pegar os eventos de eh atualização não quero pegar de criação enfim tem como a gente fazer um monte de coisas então aqui eu passo um Array aí a primeira coisa que eu quero é fazer um match a aqui como se
fosse o SQL né a gente não tem SQL aqui A consulta no mongo fica exatamente dessa forma eu quero pegar quando ou eu tiver o Operation Type for update ou Operation Type for replacing esse aqui são dois eventos que tem nas coleções o update é quando a gente tá fazendo né um update One ou usando algum outro tipo de Update mas eu tenho o replace que substitui totalmente aquele documento em si então é algo também de atualização Então posso pegar os dois para ficar bem notificado né Beleza então só vai pegar se for criação de
ativo não vai pegar aí agora aqui no segundo parâmetro eu vou falar que o meu full document vai ser update look e full document before Change vai ser When Av essas informações aqui servem locap é a forma que eu quero capturar as informações estou dizendo aqui que eu quero uma cópia do documento alterado ou totalmente substituído e esse full document before Change Eu quero um controle ainda mais apurado do Mongo quando eu tenho a nova o novo documento que foi alterado eu quero pegar a versão antiga para ver se Ela mudou de preço porque que
às vezes eu tenho que considerar o que foi alterado pode ter sido alterado o símbolo pode ter sido alterado o name ou Talvez possa ter sido alterado um outro Campo que não é relevante eu não preciso nem disparar uma notificação pros meus centes tá então isso aqui é uma consulta que a gente tá fazendo né o Watch permite isso então ele vai ficar assistindo lá Operation logs e vai entregar somente o que a gente quer aí Eu coloco aqui um on Change né então tem o Novo Evento posso até colocar já um A5 aqui que
a gente faria alguma coisa que teria promessa né Aí eu posso fazer assim ó se o data full document que é o que a gente pediu ali ponto price for igual aldeira document before Change Price ou seja documento antigo tá não quero fazer nada com Isso agora se passou daqui Então significa que eu tenho novo preço o preço é diferente né Aí eu faria a minha notificação então poderia fazer o socket pon emite e etc porém eu estou aqui dentro da minha camada de serviço né eu não quero e deixar esse socket aqui porque daqui
a pouco Sei lá eu posso querer notificar os usuários por push notification no celular deles posso querer enviar o E-mail então aqui que a gente iria fazer confusão no desenho das camadas do software tando tornando ele mais difícil então a minha preocupação aqui está mais em prover os eventos para fora aí quem tá do lado de fora decide como vai notificar tá Então o próximo passo na verdade vamos pegar aqui o próprio documento em si eu posso fazer um find by ID para poder pegar o documento bonitinho ali todo atualizado isso aqui seria só De
pra e agora eu quero e permitir que as pessoas usem isso aqui mas sem que fique usando a instância passar uma função para poder tipo um listener eu teria que passar essa função como parâmetro n tem uma estrutura que já está dentro do nest eu super recomendo que Você estude ela que ela existe também outras linguagens que ela permite que a gente tenha uma programação chamado Programação reativa né que é o rxjs ou rejs Teca serve para poder lidar com um fluxo de eventos contínuos com streaming de dados né dentro das nossas aplicações então aqui
é um bom ambiente para isso aí eu vou fazer o seguinte aqui então Eh aqui em cima eu vou retornar o tal do observer vou criar uma Instância do observable Ó importado ali da biblioteca e aqui eu passo uma função para ele em que eu recebo o Observer e eu decido o que fazer com ele então vou jogar essa galerinha inteira aqui para dentro dessa parte tá aí uma vez que eu tenho esse observer aqui aqui que eu quero usá-lo eu vou usar um observer pnex colocar o evento aqui que aconteceu né só para poder
ter uma estrutura mais formal então V Colocar assim asset updated e aí eu coloco os dados que é o Próprio ativo né que tô colocando a interrogação apenas para by pode retornar um e agora ele tá chiando aqui comigo por conta de qu a quanto dss lint acredito que não tem nenhum erro aqui beleza tá Então olha só com esse obser aqui vamos brincar no próprio M da aplicação antes do len eu posso fazer aqui um app Get asset service para poder brincar Por enquanto aí eu guardo ele numa variável Zinha e faço um asset
service subscribe events E aí eu vou ter o método subscribe então aqui eu recebo o meu evento isso aqui nunca vai terminar eu posso terminar por alguma lógica qualquer mas isso aqui fica escutando ali o mongo eternamente Então se observa uma forma mais elegante da gente expor isso pro mundo externo tá vamos ver se isso aqui Aconteceu Beleza agora a gente tem que fazer uma mudança na entidade de ativos aqui ó nós vamos ter que passar um Collection options Change stram pré and post images aí eu vou colocar um enabled igual a true eu tenho
que colocar isso aqui para ele poder fazer um histórico das dos documentos pra gente poder ter a versão do documento anterior tá Então tome cuidado com isso aqui Agora por eh ele já criou a coleção ou eu altero ela posso poderia fazer aqui uma execução com mongo para poder adicionar essa opção mais fácil aqui Eu mato ela e forço um update aqui na minha aplicação a ele vai recriar essa Collection Agora se a gente fizer aqui uma uma k específica com m eu consigo ver que essa opção está lá tá mas beleza vamos chegar aqui
então e criar um novo ativo crio ativo Qual a Extensão do Mongo se eu chegar aqui e colocar um monte de uns eh Na verdade eu tenho que editar assim Open document pronto Olha só não tive nenhuma notificação ali que eu coloquei um consol log né agora isso mudar o preço ó update com todas as informações meu Ativo Inclusive a versão que nem precisava mas está ali então se eu fizer aqui várias alterações a gente fica recebendo elas mais uma Então esse reactive X é muito bacana né porque eu organizei os eventos que estão saindo
daqui quando eu uso noain eu nem sei que tá usando Change streams etc não importa né aí subscribe aqu ele como tá gerando um listener que recebe Os eventos contínuos Então tudo que você tem um fluxo de dados você pode fazer com esse observable aí dá pr adicionar aqui uns pipes fazer transformação a biblioteca é muito legal você vai encontrar ela a PR Java PR go Python Enfim então a gente já viu como fazer isso deu certo e agora como que eu vou integrar ISO V até deixar comentado isso aqui como que eu vou integrar
com websocket Vamos começar fazendo uma mudança aqui no asset service até para poder ficar um pouco melhor né a gente poderia ter uma série de eventos sendo capturados aqui e mudar o uma classe diferenciada n coloquei de forma genérica Vamos colocar subscribe New Price EV acho que nome aqui fica bem melhor né E aí Vou colocar aqui asset Price Ched updated enfim daria pra gente poder se inscrever em vários Eventos dá para filtrar o Pipe que eu posso colocar antes tá o ponto aqui agora para poder criar essa questão do websocket é primeiro parar aqui
meu servidor e nós vamos fazer um Gate só que pros assets justamente para que a gente delegue essa responsabilidade de Notificar para o assets gate porque o de orders Fica somente para poder fazer as coisas de Order Mas como que eu vou permitir que os clientes se inscrevam para poder pegar as notificações de preço das ações da Amazon das ações da Meta do da Google enfim de todos os ativos né E a gente não consegue aqui por exemplo nesse subscribe message Eu poderia até enviar algum gatilho para cá poderia colocar não consigo colocar algo assim
ó ID New Price por exemplo e nós Não conseguimos criar eventos dinâmicos O evento tem que ter um nome definitivo tanto e no servidor do lado do websocket quanto no cliente também e esse subscribe message ele vai servir mais para que eu receba alguma mensagem e retorne alguma coisa e o que a gente vai fazer dessa questão de notificar o preço é algo contínuo é a medida que o Change streams do Mongo eh nos dá o novo valor eu preciso emitir para todos os clientes e não somente Para só porque aqui quando eu tenho por
exemplo esse evento esse Instância aqui do client é só a Instância daquele client ali e aí vem como que a gente desenha isso com websockets não é tão linear né não é tão simples assim de fazer V pensar que à medida que eu tenho um servidor de websocket funcionando eu já poderia ficar capturando as coisas lá do Mongo e fazer a notificação para todo mundo então eu Vou implementar aqui uma interface que vai me dar um gatilho interessante com o meu servidor de websocket que é o on Gate eit ele vai exigir que eu faça
a implementação eu vou tirar isso aqui do After init então depois que o meu servidor de websocket iniciar quem responsável por fazer isso é o próprio nest eu vou receber aqui a Instância desse servidor se eu tenho a Instância do Servidor Eu já posso disparar as mudanças pros meus clientes Tá então vamos fazer assim ó lembrando né que o gator já está registrado no módulo porque eu fiz ali o comando e o nest generate conseguiu identificar então eu pego aqui o asset Service do P asset Service então depois que eu iniciei eu faço um asset
service subscribe New Price ch Events aí subscribe eu recebo aqui o evento Então eu vou emitir se eu fizer posso até colocar aqui na verdade a Instância aqui que é server ó eu coloco server do socket ele tá me dando socket client não socket que é Instância do lado do servidor aqui eu consigo fazer um emit eu conseguiria fazer aqui um um asset poderia criar o evento que eu quisesse e o front vai ouvir esse Evento agora vamos pensar assim que nem sempre as pessoas vão ter todos os ativos existentes na carteira muito menos ela
vai estar lá na página de ativos ela vai ficar vendo todos os ativos Então eu preciso de emitir isso aqui para todos os clientes isso aqui tem um custo maior então poderia direcionar essa emissão do evento somente para quem está interessado para quem tá ali na carteira ou se você está vendo Ali o ativo com o gráfico aí nós podemos trabalhar com o conceito de Rooms com websocket e o socket io nos ajuda demais a tornar isso mais simples que imagina que você tem um chat né o gerado exemplo de chat com websocket você vai
ter as salas que as pessoas vão estar lá você tem a sala um dois e TRS Então imagina que você tá conectado no servidor de websocket Mas você só vai receber as mensagens enviadas paraa sala um ou paraa sala dois né se você tiver cada um Numa sala então tem como fazer essa segmentação Eu poderia usar esse mesmo conceito para os ativos Então a gente vai criar aqui um método para poder fazer um join em vários ativos que eu quero ouvir ao mesmo tempo então aqui eu recebo client payload que vai ser uma coleção dos
símbolos dos ativos isso aqui em cima vai ser um evento subscribe message join Assets tá eu posso querer me inscrever apenas em um ativo só então eu recebo sbol no singular que vai ser uma string e aqui na verdade eu coloquei errado né que é uma string com Array quando eu entro numa sala eu tenho então ISO aqui vai ser a o conceito de entrar em várias salas ou em uma só mas eu posso querer sair também então nós vamos replicar esses dois métodos aqui e aí eu vou ter o Live assets e o leave
assets se eu entrei apenas em um ativo tá então quando eu recebo aqui o client específico né que tá querendo se inscrever eu faço um client join passando vou passar aqui ó payload P símbolo melhor aqui é no tenho vários né vou fazer aqui client join payload P sbol aqui eu me inscrevi Exatamente na sala do ativo agora aqui nós vamos fazer para vários então simplesmente primeiro né bom verificar na verdade se payload P symbols tem alguma coisa S até colocar aqui a interrogação ó se não tiver nada retorno faço nada caso contrário faço payload
symbols for it para cada símbolo que eu tiver eu faço o Join fazendo então aqui no caso estou estar me inscrevendo né em várias salas e até bom a gente colocar um logger até eu não usei isso aqui posso definir um logger aqui em cima New logger o MGS tem um sistema de log é bem bacana eu coloco o próprio nome da classe aqui e aí eu vou mostrar esses log coloridos vai ficar bacana pra gente poder ver tudo que tá acontecendo n então quando eu t me Inscrevendo em um só poder colocar aqui loger
log Cent todo Cent que tá se conectando né Tem um ID join asset a eu passo aqui oad sbol agora se eu tenho aqui vários aí aqui seria simbols e aqui eu coloquei errado né aqui é só sbol porque que eu coloquei esse payload que eu tinha visto antes então aqui eu posso fazer um join Com vírgula espaço para cada posição que eu tiver ali nós vamos concatenar separados por vírgula que símbolo é um Array Prontinho aí na hora que eu for fazer o Live como que funciona vamos fazer primeiro Live de um asset eu
faço aqui tem o join tem o leave aí vou pegar o log eh eu coloquei o nome desses métodos ah Ele tá achando aqui ó aqui é no singular ó não tinha visto no plural aqui vai ser Liv não tinha visto a gente presta atenção em outras coisas e depois que vai ver então aqui é no singular tanto de vermelhinhos para lá e para cá né Beleza então aqui eu faço Liv e aqui vou trocar para Left então tô deixando aquele canal ali agora aqui pode Ser dessa mesma forma então aqui eu faço o Liv
no símbolo e aqui left assets fazendo ali o join ele mostra toda a listinha a gente vai usar esses camaradinhas aqui então quando eu me inscrevo ali na sala agora que vem o o Gran Finale da coisa aqui eu tenho o evento na minha mão não tenho então eu faço assim ó server event data P Symbol a gente até tip esse carinha aqui não né seria dar uma tipagem para ele que nos ajuda eu poderia falar aqui em cima eu vou devolver um observable com o evento que vai ser como que a gente definiu aqui
embaixo ass Price CH e o dado que é o próprio ativo que é bem melhor trabalhar tipado né ou aqui na verdade eu posso até a Gente usou o exemplo de vários eventos poderia passar o próprio dado do do asset também não tem problema só que tem que ser com a interrogação aqui para depois ele não chiar porque aqui posso ter nul como resposta então vamos mudar aqui para Na verdade o que eu tenho aqui como é o asset então aqui ó eu recebo o asset então aqui eu uso o meu a minha sala que
é o próprio Símbolo certo e aí eu faço o emit Agora eu tenho que escolher e um evento Então vamos colocar assim ó assets Price Chang passando o pró aqui seria interessante que a gente usasse o presenter Tá vendo como que é legal ter um presenter Que el tá atendendo tanto ao lado do Controller Quanto aqui também então poderia aqui eu vou ter que chamar o present ele vai formatar a imagem ali né vai pegar todo o formato que a gente já tem na api e aqui vai ido eu tenho que fazer um Jon legal
então depois que o meu servidor de websocket iniciar ele já vai ficar ouvindo e disparando somente para quem tá naquele naquela sala naquele room desde que ele tenha feito aqui o Join antes ou join asset Então eu só disparo as mensagens para aquelas salas específicas vamos rodar aqui a nossa aplicação novamente e depois de ter mexido tudo nisso eu nem lembro se a gente tem mais dados aqui né Vamos colocar iptp Eu tenho um ativo e provavelmente tenho uma carteira né pelo menos Ah não nem carteira eu tenho Então vamos jogar uma carteira Com pelo
menos um ativo já seria bom né E aqui deu erro então vamos fazer aqui o seguinte eh fazer um drop banco de dados aí é só fazer um Force aqui na no Restart da aplicação agora vamos lá então vou criar um ativo uma carteira vamos adicionar o ativo na carteira pelo menos para que a gente possa brincar então aqui no nosso Front Change eu tinha até testado ali não tinha os dados né Agora vamos R dar tem minha carteira tem o ativo nela e tem todos os ativos disponíveis que eu só tenho um e vamos
dar uma olhada nessa página aqui primeiro que é a página da carteira que eu posso ter vários ativos nela e é essa página aqui ó minha carteira e etc então agora vai fazer muito sentido que a gente vinha falando na aula anterior sobre client component sobre server Component aqui até o momento essa página inteira ela é um server component que pode ser composta de clients compo nós pegarmos a carteira aqui do lado do servidor montarmos toda essa página dessa forma pode ser benéfico porque vamos supor que eh a gente tem o pregão né tem o
pregão que começa às sei lá uma época do ano começa às 10 numa época começa às 11 aí depois fecha às 5 ou fecha às 18 Pode ser que alguma coisa ainda funcione após o pregão mas a maioria das negociações das ações não vão funcionar eu não poderia eh em vez de ficar toda hora batendo lá na api fazer um Cash dessa carteira enfim a gente conseguiria fazer estratégias para poder fazer com que a nossa AP no determinado horário até funcione de uma forma mais modesta E você tá entendendo o que eu tô falando né
Então não vamos Ser apressado por eu precisar aqui agora de sincronizar os valores se eu estou aqui nessa página Ah tá mudando o preço da ação da Amazon ele vai mostrando aqui não vamos ser apressados porque o websocket vai impor que a gente tem que ter client de passar tudo para client não vamos fazer somente e essa parte do websocket ser um client e tentar não transformar a página inteira em client Então vamos pensar assim Ó vou deixar essa página não tem nenum motivo para transformar ela a princípio aí eu vou acabar criando aqui um
componente ele vai servir também PR página de listagens Gerais ali dos ativos vou chamar ele de asset syn e a eu asset Sync n do meu componente eu vou receber aqui as propriedades que vão ser a coleção de símbolos a gente não se inscreve lá nas Salas que é são símbolos então eu vou receber esses caras aqui beleza então qual é a primeira coisa que eu vou fazer aqui eu não posso chamar o socket Connect solto aqui então nós vamos ter que usar o use effect que lida com os efeitos do componente então aqui eu
chamo socket Connect na primeira renderização que vai acontecer E aí claro que esse cara aqui vai ter Que ser um US client Então vai ter que ser um cliente depois que eu conectei aí que eu faço aquele emite join assets passando os símbolos então aqui eu passo o props pon asset simbolo Então eu estou fazendo exatamente Cadê o gate assets estou fazendo isso aqui para Poder fazer o join certo agora depois que eu fiz isso eu já me inscrevi aí eu vou pedir para abrir aqui o evento de assets Price ch para que eu receba
as mudanças a esses ativos que eu me inscrevi então aqui eu recebo o asset que já é do tipo asset que tá modelado lá n pronto então aqui eu tenho um conso log pra gente poder ver o que que Aconteceu eu tenho que lembrar que esse US effect quando o componente está renderizando novamente no Browser eu tenho que destruir o que eu estava fazend antes então posso fazer aqui um socket leave assets para poder sair lá das salas dos ativos então aqui símbolos symbols props asset symbols e ainda posso me desinscrever do assets Price Ch
a a ele vai me exigir aqui o Array de dependências eu vou ter que passar duas coisas deixa eu quebrar as propriedades aqui na verdade então assets assets Symbol aí eu vou substituir aqui pelos dois ele vai me exigir o asset Symbol como dependência Beleza então aqui no finalzinho da página Pode ser aqui no final eu chamo meu assets SY e fecho ele vai exigir que eu passe aqui a minha Coleção de ativos né então vamos fazer assim asset symbols vai ser Wallet P assets Map eu converto tudo de asset para asset aqui na verdade
é Wallet asset né Depois que eu pego o asset aqui Wallet asset p asset p Symbol ainda assim tá a gente depois poderia melhorar a tipagem disso aqui Né ele tá chando aqui comigo por quê ah ele tá falando eu tenho que retornar pelo menos alguma coisa aqui nesse componente Vamos fazer um return no se ele vai aceitar ele vai aceitar com return no Beleza então Olha só vamos ver se a gente já tem só funcionando ó eu não consigo conectar novamente por erro de corse a gente vai lá aqui coloca o cor IG salvei
agora vamos atualizar e ele comunicou então aqui tá a conexão de web socket e a troca das mensagens aqui a gente vai conseguir acompanhar daqui a pouco os eventos que estão acontec então se eu chegar aqui agora de novo no meu mongo né tô mudando de forma manual porque a gente ainda não terminou a questão da Order lá se eu pegar aqui e mudar o preço Opa verdade eu tenho que fazer aqui Open document o outro lá só read Only então fiz a mudança a gente ainda não program como que vai ser feito ali dar
no Dom aqui na nossa aplicação mas eu já recebi tá vendo Então primeiro aqui ele fez lá o join né se a gente verificar aqui as chamadas a gente vai ver o join que é feito consigo ver tudo isso então já consigo receber a notificação dessa mudança de preço atualizei agora tá aqui 1 1000 mas o ponto é como que eu vou mudar como que Eu vou mudar eu estou dentro desse componente que não tem ciência nenhuma dessa página né e um é server outro é client como que eu vou mudar exatamente ali o preço
na linha em questão E aí que tá o problema né Eh tem várias formas de fazer isso aqui na verdade não tem nenhuma forma incorreta tem as consequências eh a gente seria incentivado de novo a usar um Hook aqui da do react o US state o US state vai exigir que você passe Toda a página para client mas mesmo assim a gente não precisa disso tá e o cuidado que a gente tem que tomar Inclusive eu fiz uma live no Esquenta mostrando que a renderização do react no Browser é um dos principais problemas de performance
para entregar experiência pro usuário porque você eh vai recebendo aqui um monte Imagina você tem um monte de e de ativos na sua carteira ou você está até na página de ativos e aí Você começa a receber um monte de notificações ali e aí causa um monte de renderização na página inteira e o que a gente deve fazer com react é renderizar somente o lugar específico Ah eu tenho que mudar somente aqui ou a linha enfim eu mudo somente aqui eu não preciso renderizar o Nav bar eu não preciso renderizar essa parte ou outra parte
da minha aplicação quanto eh menor for o foco da sua renderização mais performance menos CPU menos memória Sua aplicação vai gastar e vai ser isso que a gente vai mexer agora como eu tenho um componente que ele não tem conhecimento da página nós vamos criar um estado entre os dois gerenciado pelo browser e nós vamos ter os ativos na memória e fazer com que se propague a renderização somente naquele naquela linha eu quero fazer somente a linha em específico para poder Minimizar os efeitos dessa renderização porque aqui nessa numa Aplicação dessa né teria muitas coisas
Ah acontecendo o tempo inteiro e ainda mais se você tá num dispositivo mais Modesto como um celular você teria vários problemas para fornecer ali uma aplicação bacana pro usuário eh essa gerência de estado ela pode ser feita com contact api mas o contact API ele acaba É difícil fazer com que ele atinja somente ã Force uma renderização local somente num lugar da sua aplicação muito Complicado trabalhar com ele aí parte para outras eh questões como Redux que é muito famoso mas o Redux é uma biblioteca muito grande para poder fazer essa gerência de estado aí
tem mobic zent enfim tem outras Eu gosto demais do zust porque ele é simples e já vai ser bem justo com que a gente precisa aqui então eu vou fazer aqui a instalação dele e aí nós vamos criar aqui o Armazenamento n isso vai ficar lá no Browser vou criar aqui na raiz vamos fechar tudo isso aqui vou criar store. TS aí nós vamos criar aqui uma tipagem pro nosso armazenamento do então eu vou ter uma coleção de ativos que vai me ajudar a atualizar a minha aplicação ali V colocar aqui um Export desse cara
a medida que vai chegando as notificações pra gente Esse cara que vai iniciar vazio então eu vou Poder adicionar um ativo no meu Store vou poder fazer um Change e vou poder fazer um remove seriam coisas que a gente poderia brincar para poder manipular esse estado aqui tá Então a partir disso agora a gente vai criar um Hook personalizado do react que vai ser o Us asset Store eu chamo Create passando como generic o asset Store asset Store que não tá me dando aut complete porque eu não portei esse Create aqui também do zen ali
beleza aí Aqui nós vamos passar uma função que eu vou ter esse set que vai me ajudar a organizar as minhas operações então Ó assets ali de cima vai iniciar vazio como eu falei Aí eu tenho a operação de adicionar [Música] um Asset E aí eu faço aqui alguma coisa com set e etc tá aí eu vou fazendo para as outras operações eh Na verdade eu quero me concentrar aqui e não usar o Ed e nem o remove vou deixar isso aqui para você poder brincar eh a gente poderia colocar aqui um um Change asset
mas que ele se ele vê que não existe ele acaba Adicionando então eu vou receber aqui o state e desse state Vamos tentar pesquisar vou pegar aqui o índice do asset Então chamo assim ó State assets eu tô pegando justamente essa variável aqui então esse state me devolve a Instância disso aqui tudo faço um find index do asset coloco o a ponto posso comparar o símbolo é igual a do asset que eu Passei certo então aqui eu tenho o índice se o meu índice for igual igual igual a men1 significa que ele não existe eu
vou devolver aqui um novo objeto com todos os ativos já existentes isso aqui é o conceito de imutabilidade eu não mudo o Array existente então que eu tô gerando novo aray com as posições antigas e adicionando a nova posição agora Caso contrário eu pego aqui o meu Novo assets que vai ser a os antigos que eu tenho e aí aquele asset específico que eu tenho que mexer que ele vai ser modificado eu coloco que ele é igual a asset então aqui eu retorno assets New assets nosso objetivo aqui é sempre mudar esse estado e ele
vai propagar a mudança nos componentes o ponto é que o zen vai fazer com que a gente consiga propagar apenas o que é necessário de uma forma Bem simples né E essa Lib aqui acho que ela é absurdamente pequena é 1k 4K ou algo assim contrário de um Redux da vida que é algo bem mais complexo tá então é uma vez que eu tô gerenciando estado também eu vou precisar eh do browser para poder fazer isso então a gente vai ter que fazer uma mudança aqui na nossa página por eh essa parte aqui da linha
como um todo ela vai ter que virar um client comp pel menos para que eu consiga ficar Propagando o meu preço n poderia até pegar Se eu quisesse somente essa esse treo aqui mas a gente pode pegar a linha como um todo eu tô pegando asset poderia posicionar todas as informações novamente Então vou pegar esse trecho aí aqui eu vou criar o table Wallet asset r aqui da raiz tá pertinho do Page para ser o meu novo componente então table Wallet asset Vou Retornar isso aqui então tem que importar table table Cell asset Show O
Button e o link do Next tá aí eu não preciso desse Key aqui aí que que eu vou precisar de propriedades aqui props ã eu vou precisar do Wallet asset wet asset Então vamos pegar ele aqui já desconstruído em cima n Wallet asset então a gente já consegue ó eh Pegar as informações ali mas aonde que vai entrar a questão do histórico quer dizer do do Estado isso aqui vira um client aí eu vou identificar primeira coisa vamos tentar fazer aqui uma captura Vou Colocar assim ó assets asset found de euse asset Store onde state
assets find a de a p Symbol ou ID Né sbol é igual a Wallet asset p asset ponto s e Porém Aqui tem que tirar issso aqui então aqui eu estou tentando extrair do meu estado aqui tá faltando mais um parêntese né Eu estou tentando extrair do meu estado para ver se eu tenho esse asset que eu vou preferir pegar daqui ao invés do que foi passado pro meu componente então aqui embaixo ó eu vou Criar assim asset vai ser ou o asset f se eu encontrei que eu posso não encontrar ou o que eu
tenho no meu Wallet asset que é vai ser passado no momento aqui que eu tiver fazendo a minha interação né que ele vai gerar ali uma pré renderização do componente no servidor para mandar browser e o browser vai terminar esse processo então aonde que eu preciso aqui do asset Ó eu vou passar sempre o asset ali que tá fazendo A essa lógica aqui não já aqui sim e que eu vou precisar do Wallet ID né então wet ID também vou passar ele assim Acho que a gente tá usando es k Case Beleza então aqui eu
pego m ess camaradinha para cá tá maravilha então agora eu pego isso aqui vou tirar tudo ó eu passo a minha nova meu novo Componente que eu vou importar então aqui eu tenho que passar o Wallet asset e tenho que passar o Wallet ID que eu tenho ali em cima não tem então aqui fechou E aí o ke vem aqui por causo que eu tenho um Array map tá funcionando tá agora aonde que entra a questão do Store aqui vai entrar no asset syn por qu Logo aqui em cima nós vamos pegar aquele change asset
de use asset Store pegando state fazendo state Change asset então quando eu tiver o novo preço eu vou lá e faço um Change asset passando o asset então eu t fazendo com que dois componentes se comuniquem tem que eles se conheçam aí aqui ele vai exigir que eu passe o Change asset também como dependência porque é outra coisa que eu estou usando aqui dentro né o socket eu não preciso passar como dependência porque é algo externo somente algo que tá sendo declarado aqui no próprio componente que precisa ser uma dependência Então olha que legal isso
que a gente tá fazendo vamos ver se o comportamento não quebrou né na verdade eu preciso fazer npm Deve show de bola então vamos rodar aqui novamente a aplicação tá aí ó eh a princípio não teve questão nenhuma né Eh vamos fazer aqui agora uma mudança de novo colocar 999 então teria que ter 999 aqui tá 999 ali mas ele não pegou ainda né E vou colocar 1 de volta aqui ainda não pegou vamos fazer aqui o Seguinte deixa eu fazer um consol log para ver se os dados são os dados realmente que a gente
espera pode ter alguma inconsistência aqui né então recarreguei ali aí volto para cá jogar outro valor eu tenho que ter o bom nem console log teve ali estranho se não teve consol log Ele nem chegou aqui a gente pode até verificar coisa que a gente não fez né Foi verificar ó lá left se eu fizer Vamos colocar de novo servidor zeradinho se eu atualizar a minha aplicação ele tem que mostrar que eu fiz o join Oi o join ele não tá mostrando eu tô na aqui eu tô na Ah tem que ser na carteira por
isso eu não apliquei ainda em ativos né tá explicado tá fazendo lugar errado Tá vendo aí tem o left aí tem o join que eu fiz duas vezes ali então agora vamos lá aqui faço um monte de noves faço 1 1000 E aí olha só deixar o consol log aí que é uma forma da gente ver que deu certo que legal né mas aqui ainda dentro desse asset Sink aqui a gente pode fazer uma mudança eu vou explicar O porquê disso na verdade dentro do aqui Ó na hora de fazer a captura tá e fazendo
dessa forma aqui a gente tá fazendo a esse Hook ele dispara uma nova mudança no componente aí a gente tá pesquisando o ativo ali para poder mostrar mas dessa forma aqui eu continuo renderizando se eu tivesse quro ele iria renderizar os quatro mesmo que somente a ação da Amazon mudou tá então a gente precisa fazer aqui uma melhoria eu não Vou explicar isso aqui com muitos detalhes mas eu vou usar aqui um camaradinha do zust Z react sh E aí eu uso aqui o ow então eu vou envolver isso aqui com esse use shallow e
eu tenho que passar na verdade isso aqui sai daqui e vem para cá esse US Shell vai fazer o seguinte Ele vai olhar e não só a Instância como um todo né porque quando eu estou tô adicionando um novo ativo que é esse aqui ou mudando eu estou gerando Array novo sempre novo Array novo Array aqui então dessa forma eh considerada que mudou as coisas você renderiza tudo que tá envolvido né como eu vou ter várias linhas ele vai sair mostrando tudo mas se eu mudei somente aquela ação então o US shallow ele vai Eh
pegar a informação que eu estou capturando aqui e vai comparar ele só se você tiver um um objeto mais complexo aí tem que ser de outra forma mas só no primeiro nível ele vai comparar a propriedade com propriedade do ativo antigo então ele vai olhar aqui Opa eh essas outras três aqui não mudaram então mantém-se a renderização antiga e ele só renderiza para aquele novo componente entendeu a ideia então Eh são vários detalhes que a Gente tem que ficar atento para que nós no preocupemos com performance mas já está funcionando então eu posso pegar e
essa partezinha aqui ó do asset Sync e passar pra minha página de listagem e a mesma coisa estou reaproveitando um componente client né só que a diferença é que aqui eu já tenho os ativos né então aqui vai ficar assets map e e aqui vai ser até para colocar numa linha só e aí O que eu faço essa linha aqui também essa parte ela ela vira uma outra um outro componente eu posso colocar já que ele tem relação aqui com a página mais pertinho dele então vira um table Wallet asset Row né então aqui vamos
pegar onde a gente tem esse na verdade a gente tem Wallet asset né Aí eu posso mudar somente para Asset então aqui eu recebo o ativo eh aqui vai ser só asset ele tá chando aqui comigo acho que é porque eu tenho outro asset declarado aqui que eu vou ter que colocar um outro nome né Ah vou colocar uma interrogação aqui para não dar confusão Então vamos lá eh aqui vai Ser que eu não tenho deixa eu pegar agora o momento de copiar essa Row aqui então copio para cá não tem essa aqui mais então
aqui vai ser asset condore sempre usando und aqui também o und e aqui o Wallet ID Maravilha e vamos reimportar toda essa galera aqui aqui que agora Mudou a pasta né então porta aqui agora aqui vai ser somente o asset found ou o próprio asset que foi passado vou dar preferência porque eu tenho local e aqui o asset show que não tá importado maravilha então volto aqui pra minha página e agora rco isso aqui e vira table asset Row aí eu tenho que passar o asset que já é o próprio asset e Wallet ID que
provavelmente já tem ali em cima que a gente já fez isso na aula anterior Né e o que que ele tá achando ah falta aqui sempre aqui Maravilha então ó posso tirar esses elementos aqui o nosso componente também Acaba ficando um pouco menor a outra página aqui provavelmente a mesma coisa tiro aqui tiro aqui tiro aqui pronto então vamos ver agora estou aqui na listagem dos ativos ó se eu fizer mudança para 999 ele tem que fazer a mudança né a Gente tá reaproveitando tudo agora ficou muito bacana a última parte que nós vamos fazer
aqui nessa aula é a questão do gráfico para que a gente já veja ele funcionando então nós vamos ter aqui uma nova coleção que vai li dar com histórico do ativo que eu chamei de asset Daily então Eh depois quando a gente terminar a parte da do trade da Order eh ele o a Order ele foi concluído tudo mas eu vou ter a Mudança de preço do ativo e um novo registro do asset dele então fala assim olha Eh o ativo tal na data tal tem o preço tal que aí eu consigo mostrar ali eu
Ten o histórico consigo né tanto mostrar já as informações do do gráfico Como já estava antes como eu consigo capturar também as mudanças e já mandando lá pro gráfico atualizar em tempo real Então aquela Mesma situação tem relacionamento aqui com o asset né Nós temos que registrar ele no mongus modif feature tá registrado aqui eu acabei criando um serviço de asset para ele também então nós vamos conseguir pesquisar todas as todas as dailies ali do de um ativo específico então busco um ativo que que eu recebo o símbolo né para poder pesquisar todas as daes
e eu posso criar novas a criação aqui vai ser apenas decorativa pra gente Poder brincar né porque eh a criação vai ser a partir ali do quando uma Order de compra e venda tiver terminado tá mas aqui a gente deixa eh eu pego aqui porque eu recebo o símbolo a data e o price a forma que eu escolhi para poder passar então consulto o ass asset para poder pegar o ID dele passo a data e passo o price aí eu tenho o Controller já construído Também cadê o meu Controller e para poder pegar todos eu
passo ali barra assets o Símbolo deles então o símbolo eu pego como parâmetro aqui passo pro find All e na hora de fazer a criação é o símbolo eu já tenho como parâmetro na rota pego a data e Price a data tem que ser transformada no tipo date e eu já passo para poder fazer a criação né então no nosso asset Gateway também aqui quando tiver o meu servidor criado Eu vou acessar o meu assets Daily dailies vai ser igual Asset Daily service eu duplico isso aqui que vai ser muito parecido aí eu vou ter
que fazer aqui mas esqueci de colocar service aqui aqui vem service aí eu vou fazer um subscribe para o eventos criados E aí vai ser a mesma coisa que a gente viu antes porém eh eu só quero me inscrever aqui no insert então retorno ali o asset Daily mas eu já fiz aqui um populate com Asset para ele jogar a Instância do asset inteira na dele porque é bom lá pro frontend que tiver capturando essa informação né então a gente hidrata com asset em vez da string específica e a gente passa ali o asset Daily
né então aqui nós vamos fazer pro símbolo também para quem tá inscrito no símbolo daquele ativo que eu recebo na verdade asset Daily aí aqui vai ser asset Daily p asset p símbolo importante né E Aí eu posso colocar assets Daily created então aqui eu posso ter um presenter também que seria interessante eu já tenho esse presenter aqui né a gente não precisa criar do zero vocês já pegaram a ideia eu recebo aqui um asset Daily aí pego todas as informações mas no caso do ativo Eu uso o outro asset present para que a gente
coloque ali todas as informações bonitinhas né com Principalmente a questão da imagem e tudo mais tá então aqui eh vai ser asset Daily presenter e eu tenho que passar o asset Daily aqui eu faço tjon então tenho outro evento de sobre escrição aqui tá então agora vamos pro front end já no front end lembra que eu tinha feito aqui na página que a gente faz a compra do ativo um Componente pro chart né olha só eh eu tenho aqui embaixo o chart eu passo o ativo para ele eu já tô mostrando né no cabeçalho vamos
pegar aqui a página qu que ela ficou comprar e vender Já tá mostrando aqui bonitinho então agora o que eu tenho que fazer é começar a atualizar o valor aqui né Então vamos lá logo aqui de cara eu já tenho meu shart He já tenho o meu ass que foi passado aqui vamos pegar os dados que eu já poderia fazer a captura aqui em car eu já tenho Car vamos fazer é que eu poderia chamar de ay function get asset da eu recebo aqui o asset sbol string Então vou copiar isso aqui aqui o Endereço
vai ser assets passando oet barando carregando a página pela primeira vez ele já vai pegar Ases específicas então aqui vou colocar uma Promise com o asset Daily Eu acho que eu não tenho isso ainda né não tinha criado lá tá então vai ser exatamente isso aqui então el tem um ID A referência pro asset a data que vai vir como string né e o preço então aqui eu importo o asset Daily Array maravilha então agora eu posso voltar aqui paraa minha página então aqui em cima depois que eu vi minha carteira eu posso consultar o
meu asset dailies vai ser a waight get asset Daily passando o Aet sbol que já tá ali em cima posso pegar de várias formas do ativo Enfim então essa informação eu já quero passar ela pro gráfico né mas a gente vai ter que fazer uma formatação aqui na verdade nela antes porque o gráfico vai ser a informação do gráfico para cada asset daes que eu tiver nós vamos ter que ter o time que vai ser Date P par passando o asset Daily ponto date tá E aqui eu vou multiplicar por 1000 poder tirar a questão
do time Zone e aqui eu posso falar que ele é do tipo time aqui do Light Away sharts tá para que a gente não tenha depois problemas com tipagem então isso aqui para poder normalizar tudo Então na verdade aqui ó posso Envolver isso aqui tudo com parêntese aí aqui eu recebo na verdade aqui eu passo faço um parce depois divido por 1000 E aí o valor que vai ser asset Daily pon Price e eu errei alguma coisa aqui de chave alguma coisa assim pera aí fechou com e tem mais essa aqui que fecha aqui Ó
não tinha que ter nenhum erro então aqui eu converti a data depois esse par aqui na verdade ele vai converter a data em string que eu vou passar por exemplo 20250 T 00 2.00 2 zero dois pontos 0 aí depois tem um ponto aqui com mais os três Z então eu quero tirar esse time Zone aqui para não ter problema então primeiro eu converto Aqui para time stamp que vai ser a sequência de números dividido por 1000 que vai tirar ali os zeros para o gráfico não ficar zoado tá então esse shar data ele vem
para cá E aí aqui além do asset eu vou receber aqui um daa que não vai ser obrigatório que eu falo que vai ser um time com Number melhor time do tipo time melhor colocar o time e o value vai ser Number isso aqui é um Array Então esse Dea ele é passado posso passar aqui direto eh tenho Dea pro gráfico props pdaa aí esse gráfico eu acho que a gente tinha colocado dados padrões né então ó eu vou tirar esses dados padrões Então logo quando eu formar minha eu mostrei isso na aula anterior né
quando eu tiver a minha série de dados eu tenho os dados eu não sou obrigado a passar ou um Array vazio que o gráfico vai iniciar vazio mas agora a gente já Vai ter dados vindos se não tiver nenhum dado vem aqui um Array vazio também mas não tem problema Beleza então esse aqui é o primeiro passo né vamos ver se a gente não quebrou nada se agora o gráfico vem vazio ó então Eh eu posso brincar aqui agora na minha Api para poder acrescentar Se bem que era bom acrescentar aqui outros dados pelo menos
pra gente poder ter alguma Coisa E aí os dados precisam est ordenados né eu acabei quebrando isso aqui na verdade vamos fazer aqui um drop no banco bom de banco de dados noqu é isso né Agora é só passar uma atualização para ele recarregar os dados do banco aí eu tem cadastrar aqui aí vamos colocar 2021 depois 2022 a gente pode até consultar os dados Deixa eu criar aqui um um get passando deles aí ó 2021 2022 beleza Só alguma coisa pra gente poder se certificar que tá ok a carteira eu não tenho né ten
que criar uma carteira a gente colocou essa restrição para poder ficar fácil de mexer então aqui vem a carteira aí ten os ativos do ativo Ó lá tá vendo ó 10 21 10 22 né eu coloquei de um ano pro outro aí Ele formou esse intervalo aqui mas a gente tinha colocado no gráfico na verdade aqui no no time scale né para esse time visible aqui para ter um um tempo mais específico porque senão ele só olha pro dia então a gente já consegue pegar os dados de dailies e jogar aqui agora o Gran Finale
vai ser justamente para que Nós consigamos atualizar o gráfico em tempo real tá então a gente já meio que sabe o que fazer né use effect socket importo ele com connect logo em seguida lembra do join para apenas um ativo então vou fazer um emit join asset passando aqui o símbolo né aqui é bom a gente já desconstruir o símbolo eu vou explicar o porqu Isso é uma outra manha do react props asset Symbol que a gente vai se eu tô passando O símbolo aqui dentro passando o símbolo assim eu vou ter que ter ele
como dependência se eu passar props ponto asset P sbol aí ele vai me exigir que eu coloque o props aqui como dependência eu tenho que tomar cuidado Porque dependendo de como você coloca ele considera que o componente tem que ser renderizado novamente que as coisas mudaram né então que eu só só passo o símbolo que é a informação mais simples Evitando problemas futuros tá depois que eu fiz isso então eu faço um socket on aí vamos pegar o nome lá do evento que nós colocamos que eu simplesmente não lembro de cabeça então é esse aqui
passei para cá aí agora que eu recebo o asset Daily com parâmetro e aqui nós podemos fazer um console log dele mas uma vez que eu tenho já a Referência do gráfico que é a Instância do meu componente filho eu já tenho aqui no shart component he um update Então olha só eu vou fazer um shart Half current ponto update e eu passo o time e o value Então aquela mesma história que a gente fez aqui no ancestral historinha copio aqui vem para cá então asset Daily e aqui o price pronto então isso aqui vai
Adicionar um novo dado e fechou aqui agora vamos ver o nosso gráfico aqui beleza quando eu criar um novo ele vai ter que vamos colocar 2023 então eu vou colocar 2023 E aí vamos ver o que que rolou aqui aí ó 2023 2024 Então agora eu tenho né de um ano pro outro né o ativo bem estável né não Investir que ele não muda de preço na verdade o histórico aqui continua o mesmo preço depois a gente vai criar aqui uma um simulador para poder ver esse gráfico eh se transformando bem b e etc mas
a gente já tem a parte do Home Broker feita né que é criar os as ordens de Compra via websocket que a gente viu aqui já temos as questões de websocket na minha Cars ativos n orders Nós não Precisamos mexer mas finaliza nli mas quantas coisas não estão acontecendo por trás quantos arquivos a gente não teve que mexer todo o pensamento por trás dessa divisão do que é componente client do que é componente server né nós fizemos aqui uma divisão para poder permanecer com os componentes server o máximo possível e aqui também nessa Car você
pode dar uma olhada no nosso canal também tem o full Cycle para isso mas pregão terminou eu vou pegar ali o Daily em cash para poder evitar acessar minha api tem como eu fazer isso se o pregão também fechou tem precisão de ficar conectando no websocket não né que eu não vou receber nada de novo enfim daria para poder fazer várias dessas otimizações para poder tornar a nossa aplicação inteligente e diminuir o uso de recursos então chegamos ao fim da nossa terceira Aula e lembre-se mais uma vez dá um puxãozinho de orelha Você tem o
código fonte à disposição pegue-o Estude bastante Aproveite esse momento e a gente tem várias coisas que poderiam ser implementadas nessa aplicação ó a gente não fez autenticação Seria algo bem legal para ser acrescentado e também uma forma para você poder ver como que funciona ali no nest e também no next nós podemos pegar websockets e notificar o usuário quando uma ordem tem o status Notificado vá além porque isso vai te permitir ter um conhecimento maior ainda então vamos continuar firme Porque nós já estamos aqui numa etapa bem avançada de construção do nosso home broker e
daqui a pouco nós vamos ter ele completo Então continue acompanhando o evento e grande abraço para vocês tchau [Música]
