WebSockets na prática é MUITO poderoso!!! (JavaScript + Socket.io + Node.js)

✅ 𝗔𝗚𝗢𝗥𝗔 𝗘𝗨 𝗧𝗘𝗡𝗛𝗢 𝗨𝗠 𝗖𝗨𝗥𝗦𝗢 😍
▸ Olha que massa que ficou: curso.dev/
WebSocket elevou a web para um nível de interatividade que aniquilou grande parte dos programas instalados no computador, pelo menos no que se trata de troca de mensagens em tempo-real. Este é um tutorial sobre como utilizar WebSockets com Node.js através de uma biblioteca chamada Socket.io. Continuaremos programando tudo com JavaScript, mas o Socket.io também é compatível com outras linguagens de programação. E este também é o último vídeo desta playlist sobre como programar Jogos Multiplayer.
✅ 𝗦𝗘𝗝𝗔 𝗨𝗠 𝗠𝗘𝗠𝗕𝗥𝗢 𝗗𝗔 𝗧𝗨𝗥𝗠𝗔!
▸ Te convido a se tornar um Membro da Turma! Dessa forma, o canal pode continuar a criar conteúdos de forma independente e para todos!
• Ativei o Membros no ca...
✅ 𝗟𝗜𝗡𝗞𝗦 𝗖𝗜𝗧𝗔𝗗𝗢𝗦 𝗡𝗢 𝗩Í𝗗𝗘𝗢
▸ Início dessa playlist: • Como foi programar meu...
▸ Vídeo sobre o design pattern Observer: • Você nunca mais vai co...
▸ Projeto no Github: github.com/fil...
✅ 𝗩𝗜𝗗𝗘𝗢𝗦 𝗠𝗔𝗜𝗦 𝗣𝗢𝗣𝗨𝗟𝗔𝗥𝗘𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟
▸ Programei 4 robôs que criam vídeos para mim no KZbin
• Programei 4 robôs que ...
▸ Brasileiro programa Inteligência Artificial que aprende a DIRIGIR SOZINHA!!!
• Brasileiro programa In...
▸ Um júnior já deveria saber como reduzir a quantidade de IFs de um código (e você, sabe?)
• Um júnior já deveria s...
▸ MELHOR FORMA DE APRENDER PYTHON (Google Colab Notebook)
• MELHOR FORMA DE APREND...
▸ Novo algoritmo EDITA VÍDEO como se fosse TEXTO (deepfake)
• Novo algoritmo EDITA V...

[@FilipeDeschamps]

*PERA!!!!!* - Antes de ler os comentários, olha que *massinha* que ficou meu *Curso de Programação* curso.dev To muito orgulhoso, sério 💪 💪 💪

[@eduardolima5495]

Cara, desculpa a aleatoriedade do comentário. Mas queria compartilhar contigo que semana passada automatizei minha primeira tarefa no trabalho usando Python!! Queria compartilhar isso contigo pq você me inspirou muito a começar a aprender a programar :) Até o final do mês eu termino de automatizar as tarefas recorrente que tenho que fazer e vou poder focar em coisas que trazem mais valor para o cliente :) Muito obrigado!

[@FilipeDeschamps]

QUE MASSAAA EDUUUUUU!!! Matou a pau meu caro, agora ninguém te segura mais :) independente dos altos e abaixos que você vai passar tentando automatizar as coisas (porque algumas vão parecer impossíveis, mas não são), não desiste, continua seguindo em frente, fechado? Vamo que vamo 🤝

[@gabrielhipolito8451]

Filipe, tinha visto uns videos desta playlist a muito tempo atrás e não tinha entendido nada, e hoje conseguir entender claramente. E outra, meu objetivo com essa playlist foi aprender sockets, e terminei esta playlist com muitos mais conhecimentos. Muito obrigado por este conteúdo, todos esses videos fez me enxergar programação de outro angulo

[@giovannigraziano6924]

A animação do Filipe sempre me motiva a programar huehuehue

[@FilipeDeschamps]

kkkkkk showwwww Giovanni 🤝

[@manoelgomesdaprogramacao]

Já usei websocket para integrar uma spa em angular com leitor biometrico zf1. Lindo de maize. Fica com deuzo

[@charlescardoso4907]

Cara essa playlist foi esclarecedora, eu tô comecei agora na área da programação ainda tô me familiarizando com a coisa mas vejo q fiz a escolha certa, espero chegar nesse nível em breve.. parabéns pelo trabalho

[@joaobrasil8390]

E ai Filipe, beleza? Cara trabalho há alguns anos com uma linguagem digamos que obsoleta no mercado e sem consumir o que tem de mais novo nela. Comecei a trabalhar ouvindo e apenas ouvindo seus vídeos e isso me despertou imenso interesse em aprender coisas novas. Me deparei com algumas perguntas sua, que me deixou em dúvida se realmente sou Dev. Tenho um mundo gigante a ser explorado e sou apenas uma criança nesse meio. Muitas pessoas já me apontaram isso, mas até hoje só seus vídeos foram capazes de despertar tanto interesse em mim! Então muito obrigado cara! Você é fodaaaaaaaaaaaaa!

[@FilipeDeschamps]

✅ 𝗟𝗜𝗡𝗞𝗦 𝗖𝗜𝗧𝗔𝗗𝗢𝗦 𝗡𝗢 𝗩Í𝗗𝗘𝗢 ▸ Início dessa playlist: kzbin.info/www/bejne/ZqS3l3yQq8-MgM0 ▸ Vídeo sobre o design pattern Observer: kzbin.info/www/bejne/hmbOl3Rso8iCqZo ▸ Projeto no Github: github.com/filipedeschamps/meu-primeiro-jogo-multiplayer

[@AndreAmorim-AA]

clock

[@patrickFP93]

Cara sei que você sempre responde. Agradeço por isso. E tenho um projeto de inteligência artificial chamado Netway. Uma libary com um conceito diferente. E estou projetando tanto o conceito como o programa que vou fazer o teste. Se você estiver interessado em saber mais sobre isso...

[@lucasdecalves]

É incrível como eu assisto um video de 30 minutos parecendo que estou assistindo um que tenha 5, eu definitivamente não vejo a hora passar, de tão bom que é. A empolgação do Filipe é sensacional!

[@FilipeDeschamps]

hahahahahhah massa Lucas 🤝 é muito legal programar com o retorno de vocês 👍

[@EduardoWeidmanBarijan]

Assisti toda a playlist. Tinha visto o vídeo sobre remover IFs e gostei de todo o conteúdo. Só queria sugerir usar o zoom quando estiver revisando o código porque fica pequeno pra assistir de longe. Gosto muito da tua empolgação que mostra realmente que tu gosta do que faz, que é programar. Apesar de eu ser do PHP vi muita coisa interessante e sempre tive interesse em desenvolver jogos.

[@nacasadobeirinha1524]

E assim chegamos ao fim do começo kkkk! Que delicinha começar a quinta assim. Sou fã de websockets a um tempo e no meu trabalho atual, ao analisar alguns códigos percebia que o client ficava o tempo todo consultando a base em casos que era necessário verificar algum alerta, então a implementação era, consultas de 1 em 1 minuto no banco em uma tabela especifica. Ajudei meu chefe a implementar o SignalR e meu deus que felicidade é ver um serviço avisar via evento e isso estourar no client economizando querys e querys, diminuindo gargalos e deixando todo mundo feliz. A implementação de command e observers é uma delicia, principalmente para aplicações que necesstam de alarmes ou atualizações em tempo real. Obrigado por dividir esses 3 meses com a comunidade e pode esperar que ainda vai sair muitaaaaa implementação maluco, pq criatividade não falta \o/ Abraçoooooooooooo!

[@FilipeDeschamps]

hahahahah que massaaaaaa, tamo junto meu caro 🤝

[@LEONi_gg]

Zerei já 3 vezes essa playlist. Ficou EXCELENTE

[@FilipeDeschamps]

hahahaha showwwww Yuri, tamo junto meu caro!!!! 🤝

[@wernergottschalt]

Partiu colocar a mão na massa e implementar minha versão do jogo!! 🚀🚀

[@murielberehulka4393]

Olá Felipe, estou adorando os tutoriais :D. Uma sugestão que eu tenho é ao invés de no client side observar se o id é igual ao do proprietário, seria mais fácil utilizar no server side o comando: socket.broadcast.emit('message', "content"); esse comando emite para todos menos à o socket em questão.

[@FilipeDeschamps]

Totaaaal Muriel, é que do jeito que fizemos no Observer, ele não vai estar no escopo do socket, então não vai poder saber com qual socket está lidando. Teria que refatorar a arquitetura para se aproveitar desse método :) mas excelente sugestão 👍

[@fernando-nunes]

Lembro que vi a lib socket.io 3 anos atrás e comecei a pensar em infinitas possibilidades de uso. Mas, para meu azar a empresa que eu trabalhava não tinha aplicabilidade para minhas ideias e eu mal direcionado não as usei em lugar nenhum. Todo desenvolvedor tem que ter a intenção de dominar o mundo! Não podemos nunca esquecer isso!

[@FilipeDeschamps]

Justo Fernando 👍

[@KevinMadalossoVeiga]

muito obrigado por nos passar esse importante conhecimento Filipe. Forte abraço!

[@lucassimao3639]

Obrigado pela playlist, Filipe! Estou assistindo pela segunda vez e acho incrível os conteúdos e sua energia ao passar o conhecimento.

[@cavalinhopocoto]

Eu fico muito empolgado com programação de jogos. Esse canal é um sonho que virou realidade. Parabéns Deschamps! 👏🏽👏🏽👏🏽

[@FilipeDeschamps]

ahhahahahahha showwwww!!!!

[@GreatHacker1]

Ola Filipe. Assisti a playlist até o final e até aqui "ta uma delicinha". Eu implementei algumas das coisas que foram passadas de uma maneira um pouco diferente. Mas reparei uma coisa... o teclado só aceita uma tecla por vez. Sendo assim, se apertarmos as teclas 'ArrowDown' + 'ArrowLeft' por exemplo, o aplicativo vai responder a apenas uma delas. Alguma sugestão de como melhorar isso. Esse é meu codigo: class Place { constructor() { this.object = []; this.screen = document.createElement("CANVAS"); this.pallet = this.screen.getContext("2d"); this.objectCurrentId = 0; this.machine = {w: window.outerWidth, h: window.outerHeight, x: window.screenX, y: window.screenY}; this.keyMap = {}; } objectPush(MyId, MyW, MyH, MyX, MyY, MyVx, MyVy,MyColor){ this.object.push({ id: MyId, w: MyW, h: MyH, x: MyX, y: MyY, vx: MyVx, vy: MyVy, color: MyColor, image: null }); } keyGet(){ var self = this; document.addEventListener("keydown",keyPressEvent); function keyPressEvent(MyEvent){ self.objectAction(self.keySwitch(MyEvent.key)); } } keySwitch(value){ switch(value){ case 'ArrowUp':{ return('up'); }break; case 'ArrowDown':{ return('down'); }break; case 'ArrowLeft':{ return('left'); }break; case 'ArrowRight':{ return('right'); }break; case 'n':{ return('next'); }break; case 'p':{ return('preview'); }break; } } objectAction(take){ switch(take){ case 'up':{ this.object[this.objectCurrentId].y -= this.object[this.objectCurrentId].vy; if(this.object[this.objectCurrentId].y < 0){ this.object[this.objectCurrentId].y = 0; } }break; case 'down':{ this.object[this.objectCurrentId].y += this.object[this.objectCurrentId].vy; if(this.object[this.objectCurrentId].y > (this.screen.height - this.object[this.objectCurrentId].h)){ this.object[this.objectCurrentId].y = this.screen.height - this.object[this.objectCurrentId].h; } }break; case 'left':{ this.object[this.objectCurrentId].x -= this.object[this.objectCurrentId].vx; if(this.object[this.objectCurrentId].x < 0){ this.object[this.objectCurrentId].x = 0; } }break; case 'right':{ this.object[this.objectCurrentId].x += this.object[this.objectCurrentId].vx; if(this.object[this.objectCurrentId].x > (this.screen.width - this.object[this.objectCurrentId].w)){ this.object[this.objectCurrentId].x = this.screen.width - this.object[this.objectCurrentId].w; } }break; case 'next':{ if(this.objectCurrentId+1 < this.object.length){ this.objectCurrentId++; } else this.objectCurrentId = 0; }break; case 'preview':{ if(this.objectCurrentId-1 >= 0){ this.objectCurrentId--; } else this.objectCurrentId = this.object.length - 1; }break; } } update(){ this.keyGet(); } draw() { this.pallet.clearRect(this.machine.x,this.machine.y,this.machine.w,this.machine.h); for(var i = 0; i < this.object.length; i++){ if(this.object[i].image){ this.pallet.drawImage(this.object[i].image,this.object[i].x,this.object[i].y); } else { this.pallet.fillStyle = this.object[i].color; this.pallet.fillRect(this.object[i].x,this.object[i].y,this.object[i].w,this.object[i].h); } } document.body.appendChild(this.screen); requestAnimationFrame(()=> {this.draw()}); } } E aqui é como eu chamo no index Place JS @import url("css/style.css"); //import Place from './js/place.js'; var place = new Place(); place.objectPush(0,10,10,10,15,1,1,'blue'); place.objectPush(1,10,10,10,95,1,1,'red'); place.update(); place.draw(); Obrigado pela playlist mano.

[@yudi-azvd]

Filipe, uma sugestão. Na parte do código que define o intervalo de surgimento de frutas, trocar "frequency" por "timeInterval" ou "timePeriod" porque o segundo argumento é um período de tempo [s]. O inverso de período que é frequência [1/s] ou [Hz] A playlist tá sensacional. Parabéns pelo ótimo trabalho !

[@FilipeDeschamps]

Ahhhh que detalhe sensacional Yudi!!!! Muito obrigado pela sugestão 🤝

[@dougtktube]

Opa sou novo no canal e estou gostando muito, tenho muita coisa a aprender. Trabalho com php a 10 anos e meu forte é back-end, preciso a melhorar muito meus conhecimentos em tecnologias front. Já trabalhou com pusher.js? Fiz um um painel de senhas utilizando o pusher, se conhece sabe qual a vantagem de usar no socket Io no lugar dele?

[@xepad]

Dev do céu, a qualidade dos vídeos tão INSANAS, tanto quanto os conteúdo quanto na qualidade de produção! :scream: Áudio e vídeo tão ANIMAL! Parabéns por todo progresso mestre, vcs tão mandando MUITO bem!!

[@FilipeDeschamps]

hahahaah Lucianoooooo, valeuuuu meu caro!!! Um feliz Natal meu caro e também boas festas de final de ano!!!!!! 🤝

[@leonardofalconi2691]

Cara, nem termino mais de ver o vídeo pra poder optar em dar like ou não, já chego dando like antes mesmo de ver o vídeo... Parabéns pelo trabalho :)

[@FilipeDeschamps]

hahahha valeuuuu Leo 😍

[@murilomanut]

Mais uma vez parabéns. E nesse vídeo me senti ao seu lado programando kkkkkkkkkk. Sucesso cara!!

[@FilipeDeschamps]

aahahah showwww Murilão, seja muito bem vindo aqui meu caro 🤝

[@lucasrosario13]

Parabéns pelos 200 mil inscritos Filipe!!

[@FilipeDeschamps]

Valeuuuuu Lucassss!!!! 🤝

[@Fabio-xy6vb]

Eu amoooo websocket haha, mas fiz diferente o sistema.. eu criei um objeto e fique enviando o objeto para observadores que respondem conforme a inicial de cada data enviada... Um otimo vídeo e algoritimos em teloverflow haha parabéns ♡ fechamos maia uma playslist u.u

[@FilipeDeschamps]

Showwwwwww Deeeeeeeehhhhhhh!!! Mais uma playlist, vamo pra cima!!!! 🤝

[@Fabio-xy6vb]

@@FilipeDeschamps agora é só fexar a próxima meta haha

[@lorduakiti]

Deschamps parabéns por conseguir repassar tanto conhecimento técnico de forma divertida e fácil.

[@FilipeDeschamps]

Valeuu meu caro 😍

[@Djheffeson]

Cara que loko, eu não consigo entender muita coisa do video, mas to fazendo a mesma coisa que você e mano, to aprendendo tanto! kjadkjsd depois que eu terminar esse video vou focar mais na base do backend com o nodejs pra tentar ser um programador bom :)

[@maiquerosa8963]

Fala ai Filipe otima playlist man.. sou seu fã... cara uma duvida que ficou foi sobre o redimensionamento do canvas pois me parece q ele tem uma diferença entre o widthxheight do estilo e do tamanho do canvas em si. consegue dar uma explicada? abr..

[@FilipeDeschamps]

Maiqueeeee desculpa a demora em responder, só consegui chegar nesse comentário agora 😂 a diferença é que o tamanho do canvas diz respeito aos pixels que você tem para usar/pintar dentro desse canvas. Então em um canvas de 2x2, eu tenho 4 pixels para trabalhar, correto? Agora como eu vou mostrar o elemento na tela, é outra história.. porque eu posso redimensionar ele e fazer o "upscale" assim como é feita com uma . Numa tag de imagem, ela pode carregar uma imagem com uma resolução X, mas mostrar ela com o dobro do tamanho, ou a metade do tamanho 👍

[@peacemaker4969]

Ai Teló (com carinho

[@FilipeDeschamps]

Totaaaaal!! Excelente pauta para um vídeo de fato, muito obrigado pela sugestão!!!

[@JurandyRafael]

Felipe se puder faça um vídeo sobre IA voltada para tradução que reconhece contexto, se é um texto técnico ou não, mudança de sentido de uma expressão baseado no assunto do texto e etc, enfim algo que o google ainda não alcançou no translator usando todo poder de uma IA.

[@FilipeDeschamps]

Showww, valeu pela sugestão 🤝

[@dojastaken]

Cara sua explicação e tudo mais, é incrivel esse canal

[@FilipeDeschamps]

Valeuuuuu 😍

[@vinicio5735]

Tava assistindo uma aula de websockets agora mesmo e o filipe me lança esse vídeo!

[@FilipeDeschamps]

Ahhhh que massa Vinício 👍

[@marcuspiccinini2822]

Olá Felipe, vejo seus vídeos e gosto muito da sua forma de explicar e trazer sempre novidades, de forma bem positiva, sinto falta da abordagem de exemplos em C#, teria algum motivo ?

[@FilipeDeschamps]

Show Marcus!!!! Muito obrigado pelo comentário! Eu tenho apenas conhecimentos básicos em C#, este é o motivo 👍

[@marcelotqful]

Filipe, parabéns pelo conteúdo sensacional! Poderia nos dizer quais são as ferramentas e equipamentos que você utiliza para fazer a gravação desse conteúdo? Câmera, microfone, software. Estou precisando fazer alguns treinamentos de um software e gostaria muito de fazer algo tão bem estruturado quanto seus vídeos. Muito obrigado, abraços

[@FilipeDeschamps]

Fala Marcelo, em resumo eu uso uma BMPCC 4k, um microfone shotgun da Sennheiser e edição no Davinci Resolve 👍

[@marcelotqful]

Filipe Deschamps obrigado pelo retorno meu amigo! Aproveitando, um feliz e abençoado Natal à você e família! Abraços

[@rodneynogueirajr1921]

A melhor playlist de programação do KZbin! Meu cérebro de cientista maluco se encheu de ideias pra brincar com esse joguinho! Dopaminaaaa hahaha!

[@FilipeDeschamps]

hahahaha que massaaaaa Rodney!!!!! 🤝

[@jailtonsantana4048]

Filipe, seus vídeos são incríveis e inspiradores, parabéns pelo magnifico trabalho. Como você manja de plataforma de pagamentos, explica pra gente por que as compras onlines não necessitam de senha do cartão, ciente de que as informações expressas são suficientes. Já imaginou resolvendo esse problema? Valeuuuu!!!

[@FilipeDeschamps]

Fala Jailton! Elas não precisam de senha mas passam por uma rotina de antifraude muito agressiva, principalmente por conta que o chargeback fica por conta do comerciante.

[@jailtonsantana4048]

@@FilipeDeschamps Muito obrigado pela resposta rapaz.

[@principe.borodin]

ainda nao assisti tudo, mas eu tb sou apaixonado por websocket, sempre q posso tento utiliza-lo

[@FilipeDeschamps]

Massaaaaa Igor 😍

[@CalangoBit]

Rapaz, parabéns pelo canal! Um detalhe para compartilhar: muito antigamente quando eu acessava um servidor linux qualquer via ssh, costumava verificar quem estava conectado também no dito cujo usando o comando "who". Se tivesse alguém no server eu fazia um "echo mensagem > /dev/ttyX" pro cara se ligar que eu também estava lá!!! Em outras palavras, "websocket" é mais uma reimplementação! :-) E já adiantando alguma réplica no sentido que são arquiteturas diferentes, uma vez que o ssh abre o terminal do servidor pra você, podemos (e devemos) lembrar que a webassembly tá vindo forte!!!

[@FilipeDeschamps]

Ahhhhhh que comentário massaaaaa Dirceu 👍

[@victorakinori6909]

Faz um vídeo tudo que um programador de games precisa saber.

[@FilipeDeschamps]

Show Victor, valeu pela sugestão 👍

[@matheusmoreira5924]

Depois dessa playlist, é uma delicinha me torna membro do canal.

[@FilipeDeschamps]

AAEEEE MATHEUUSSSS VALEUUUUU 🎉👏🤩💪🥳👍🥰🚀⭐️😍🎉

[@primary157]

Eu também acho o websocket incrível! Contudo hoje tem um novo player de peso que implementa comunicação full-duplex de maneira muito mais eficiente: o gRPC (estou trabalhando com ele no estágio). Seria legal ver um vídeo demostrando esse incrível protocolo de comunicação da Google.

[@FilipeDeschamps]

Ahhh que massa, não conhecia, vou pesquisar a respeito :) valeu pela indicação!!!

[@brunomelo4570]

VIM do futuro e está espetacular :wq

[@FilipeDeschamps]

kkkkkkkkk valeuuu brunão!!!! :wq

[@wait...6531]

Bom trocadilho agora me despeço da vida :qa

[@TheFuryal2]

E45: 'readonly' option is set (add ! to override)

[@guilhermestabachsalustiano5357]

Sugestão de vídeo: Adoraria ver um vídeo teu recomendando livros que te moldaram como programador e pessoa, Comecei a ler por influência tua o "Domain-driven of Desing" e está sendo transformador

[@FilipeDeschamps]

Que massaaaa Gui, total, ótima pauta para um vídeo! E o DDD é fantástico, livro difícil de ler, mas do que absorvi fez toda diferença para mim 🤝

[@maumaucarneiro]

Hey, Filipe. O vídeo que você listou como sendo do Pattern Oberver está apontando para o vídeo de Separation of Concerns.

[@FilipeDeschamps]

Matou a pau Maurício, MUITO obrigado pelo toque, acabei de consertar aqui 👍 🤝

[@vagnerlandio]

Cara, ou tu tá prevendo minhas necessidades ou tem muita gente com pensamentos em comum e eu não sabia. 🤣 Ontem comecei criar uma api para um serviço que não possui api pública. O problema é que quando fui pegar os dados do meu usuário não estava conseguindo, até que observei que eles usam websockets para envio e recebimento de dados. Estou perdido por onde começar, tentei estudar ontem pela MDN mas achei incompleto as informações. Hoje seu vídeo clareou muito minha mente, mais alguma sugestão?

[@FilipeDeschamps]

Ahhhhhh que masssaa eu caro!! Ótimo timing :) hoje eu não tenho nenhuma fonte específica sobre websockets :(

[@LuanSantos-ov3fu]

O Socket tá funcionando muito bem e o jogo tá ficando incrível! Mas o uso de Socket é um padrão nas empresas de jogos?

[@kennedyjunior1129]

Simplesmente incrível essa playlist!

[@FilipeDeschamps]

Showww Luffy 👍

[@ZingueZangue]

Filipe, aqui vai uma pergunta complicada. Sou desenvolvedor web Jr. (mais para estudante no caso) atualmente não trabalho na área, mas estou sempre caçando uma vaguinha com minhas habilidades. Agora vem a pergunta, toda vaga tem uma stack "alvo", só que com tantas tecnologias disponíveis acaba que as vagas viram uma massaroca horrível de coisas, uma pede React e PHP, outra Angular e Node, outra Vue e .NET, outra JAVA... Dessa forma fica muito difícil achar algo para centrar os estudos e concorrer a uma vaga. Com a empregabilidade em mente é difícil definir um ponto inicial. As perguntas na mente de um Jr./estudante (como eu, e alguns amigos que fiz nessa jornada) são sempre, escolhi a stack certa? Mas eu estudei pra X e Y a vaga pede A e B. E ai ? Então me diz, como ter uma certa segurança em um mercado tão volátil com este, na hora de escolher uma stack ? Como, de certa forma, estamos na beirada, meio que atiramos pra todo lado em busca de acertar em algum ponto. Ajuda a gente! Abração, e parabéns pelo excelente trabalho prestado no seu canal.

[@FilipeDeschamps]

Zingue, você não vai ter essa segurança, não do jeito que espera ao menos... no estágio atual da nossa área é difícil conseguir isso porque as coisas mudam mesmo. A única forma de conseguir sobreviver com uma certa segurança é "aprender a aprender" e ter adaptabilidade 👍

[@lIlIlIlIlI55]

Cara parabens pelo conteudo, tu explica de uma maneira que parece que tudo é facil e simples kkkk

[@FilipeDeschamps]

Showww Rubens, valeu pelo comentário meu caro 🤝

[@Guilherme-jz6qx]

Queria que você ensinasse a gente, com mais projetos desse tipo. JOGOS! :(

[@Brenin157Oficial]

Filipe, fugindo um pouco do tema do vídeo. Qual sua opinião sobre os frameworks tipo Adonis? Vc usa algum tipo de framework opinativo de estrutura?

[@FilipeDeschamps]

Breno, eu gosto sim! Tudo vai depender do que você precisa, mas eu gosto sim quando você tem um problema X e o framework tem uma opinião boa sobre como resolver esse problema. A única dificuldade que você vai ter é caso o seu problema mude, então o framework precisa lhe flexibilizar para isso ou você deve separar isso em um outro serviço. Eu dou uma opinião sobre frameworks nesse vídeo: kzbin.info/www/bejne/hmikgIGoorSpgc0

[@VitorM]

Saindo totalmente do contexto do vídeo, me fala onde você comprou essa armação azul? Quero uma igual bonita e simples! Haha

[@FilipeDeschamps]

kkkkk o modelo da armação é "RB 7049"

[@VitorM]

Filipe Deschamps vlw 😆

[@gabrielvalin2479]

E aí, filipe! Tudo bom? Cara, eu trabalho na área de Engenharia de Métodos e Processos, curso Engenharia de Produção. Sempre fui fascinado por programação, mas também por gestão (por isso a faculdade em sí). Fazemos diversos cálculos em relação ao tempo de um operador executar tal tarefa, multiplicado pelo x, bla bla bla bla bla... Queria montar um sistema para resolver esses cálculos automáticos e também apresentar gráficos para melhor visualização, qual linguagem devo focar mais, estava pensando em Python! Grato desde já, seu canal é muito FODA!

[@FilipeDeschamps]

Ahhh que massa Gabriel, eu utilizaria JavaScript com uma biblioteca chamada D3.js, mas você pode usar Python sim, veja esse vídeo do canal sobre Data Visualization utilizando ele: kzbin.info/www/bejne/p33MdnesqJpqpM0

[@Mixtli_0]

Filipe, o que vc acha do Adobe XD? Qual o impacto que ele causa na maneira de criar sites ou até apps? Tem como fazer um vídeo sobre?

[@FilipeDeschamps]

Fala meu caro, ótima pergunta! Eu conheço pouco do Adobe XD para conseguir criar um vídeo, mas me parece uma ferramenta muito legal!

[@maicontutoriais6723]

Duas coisas que me pergunto bastante é: quanto tempo você levou para chegar no nível que está agora e quanto tempo você estudava por dia?

[@FilipeDeschamps]

Maicon, tudo bem meu caro? Eu sempre mexi com programação, mas não gostava... eu odiava para falar a verdade, tinha dificuldade, desisti no mínimo umas 2 vezes de ser programador, só fazia gambiarra pra me livrar logo do "problema" técnico e chegar logo no final para ver o resultado na prática. Somente aos 30 anos que eu decidi me tornar um programador de verdade porque notei que o futuro inteiro seria construído com isso. Mudei de postura completamente, comprei 5 livros, estudava e praticava todo santo dia, sábado, domingo, feriados. Eu combinei com todo mundo que eu precisava desse tempo para pivotar a minha carreira e ao final posso dizer que foi a melhor decisão da minha vida 👍

[@AdsonCicilioti]

@Felipe Deschamps esse projeto tá publico em algum repositório? Bora evoluir esse game pra algo em 3d com Three.js?

[@FilipeDeschamps]

Adson, ta open source sim! Os links estão na descrição! Seria fantástico uma versão em 3D 🤝

[@edgarrc]

07:10 A evolução é delegar para um PUB/SUB Redis assim, se seu servidor cair, quiser redundância/balanceamento ou se quiser escalar horizontalmente, nenhum estado é perdido :)

[@FilipeDeschamps]

Totaaal Edgar 😍

[@AugustoProgrammer]

Não sei me empolgo mais com a aula ou com a empolgação do Filipe kkk

[@lucascustodio8211]

Grande Felipe, to preocupado com as coisas que seria bom eu saber para ser um programador do meio profissional, pois sou apenas acadêmico. Questionei um rapaz de uma empresa sobre isso e ele me passou: Metodologia Agil, Api's Rest e Microserviços. Você concorda com isso? Caso positivo, acha válido fazer um vídeo sobre uma ou mais dessas coisas? Sinceramente, todo conteúdo que vejo dessa área sinto vontade de te ver falando do mesmo, pois é motivador, passo a gostar das coisas que você fala sobre, o que é algo ótimo.

[@FilipeDeschamps]

Show Lucas!! É difícil dizer exatamente os tópicos, mas uma coisa que me ajudou MUITO a dar um direcionamento nos meus estudos de programação foi justamente inventar mini projetos (ou até micro projetos). Ao invés de aprender pelo ponto de vista da tecnologia, eu decidi aprender pelo ponto de tomar decisões (que isso que um projeto é na sua essência). Depois de tomar decisões (inclusive sobre qual projeto vai ser), entenda quais tecnologias precisa utilizar para resolver aquele problema. Fora ficar muito mais divertido e casado com a realidade do mercado, você vai ficar com vários projetos no seu portfólio. E para ter as melhores idéias de projetos, eu fiz um vídeo exatamente sobre isso, olha só: kzbin.info/www/bejne/fYGonoV7pbqmZqM

[@lucascustodio8211]

@@FilipeDeschamps Excelente resposta Filipe, grato pela sua atenção!

[@eduardodefati4892]

Parabéns pelos vídeos. Gostaria de uma orientação. Estou criando uma aplicação com API spring boot e front Vuejs e seus companheiros.hehe... gostaria de acessar esta aplicação com o pc e um celular ou tablet. Existe uma forma de atualizar as informações para os dois dispositivos ficarem sempre atualizados. Estou dando uma olhada em socket io... gostaria de saber se existe outra forma, mais simples e se sim se você pode me orientar do que devo aprender. Muito obrigado mesmo!

[@alanaor]

Parabéns! vc é muito carismático... hahhah

[@aulasdev195]

@Filipe Deschamps não tem perigo de alguém mal intencionado enviar um emit do lado do cliente no console do navegador?

[@adrianoalves-qripto]

"Isto tudo é muito apaixonante". Para a gente que veio do jQuery é uma loucura, delicinha, kkkkk :)

[@FilipeDeschamps]

hahahah total Adriano!!! 👍Mas é massa! 😍

[@dfeprado]

Esse design pattern - observer - é muito dahora! Todo mundo que tá iniciando no desenvolvimento, ou já desenvolve, deveria comprar o livro do GoF. #FikDik

[@UillanEduardo]

titulo completo do livro?

[@dfeprado]

@@UillanEduardo Design patterns, da GoF

[@FilipeDeschamps]

Showwwww Daniel 🤝 o Observer é bom demaaais 😍

[@wernergottschalt]

Ahhh Já acabou??? Queria mais!

[@Guedezz_05]

oi Filipe gostei do video, mas me tira uma duvida, eu posso aprender duas linguagens de programação juntas

[@FilipeDeschamps]

Pode sim, mas é a mesma dificuldade de aprender dois idiomas ao mesmo tempo... é mais confuso e mais difícil... não recomendo.

[@patrickFP93]

Eu não sei se eu entendi a sua arquitetura mas lá vai a pergunta: o que está acontecendo é que todo o estado do jogo estar no server side, de forma que quando um jogador emite um comando e muda a si mesmo, muda o estado no server e o server envia a mudança para todos inclusive o jogador autor da mudança que bloqueia a alteração. Não seria melhor o autor não mudar a si mesmo e esperar a mudança do server side? Por que se acontecer algum problema de conexão o jogador ficará parado e perceberá o problema o que é melhor que um fantasma andando em um mundo paralelo.

[@FilipeDeschamps]

Patrick, você entendeu perfeitamente a arquitetura, matou a pau!!! E a sua sugestão é excelente e vai funcionar sim! O único problema é que caso a internet esteja funcionando, mas com uma latência alta, você pode ter dificuldades de jogar, porque vai dar muito "lag". Por isso que é comum se antecipar no client side. Mas excelente ponto 🤝

[@patrickFP93]

@@FilipeDeschamps verdade

[@sylvio_tavares]

Excelente conteúdo do vídeo, parabéns Filipe. Algo interessante para você conhecer é sobre Entity-component-system (ECS) para organização é excelente. ~full dopamina

[@FilipeDeschamps]

Showwww Sylvio!! Valeu pela recomendação meu caro!!! 😍 🤝

[@AndreLuiz-xj4sx]

Faz um tutorial linha a linha por favor.

[@diegoschweter]

Faz um jogo de cartas multiplayer.. poker, truco, sei la.. com imagens e animação iria ser top

[@sanderluis3652]

Carai mano, agora sim vi o valor do pattern observer, ganhou de brinde muitaaa coisa kkk

[@FilipeDeschamps]

Totaaaaal Sander 😍

[@FelipeMenegotto]

Filipe! Sou fã do seu conteúdo (espero que o bot de respostas não leia esse comentário e me dê uma resposta automática kkk). Tenho um pequeno canal de ensino de Física no KZbin e vou convidar pessoas pra falarem sobre matérias que atualmente são importantes na ciência. Eu gravaria 2 ou 3 perguntas em forma de vídeo. Enviaria, e esperaria por um vídeo curto (5 minutos no total pra não te dar muito trabalho). Perguntas sobre a importância de estudar programação para ser cientista hoje em dia. Se tiver interesse, agradeço imenso!

[@FilipeDeschamps]

O bot passou no seu comentário para desejar um feliz 2020!!!! 😂 brincadeira, tudo bem meu caro? Eu topo sim, mas a minha agenda está meio maluca. Please vamos combinar isso melhor por email, topa? Meu email é [e-mail] 👍

[@dudu88games]

Felipe... e as colisões, como dois jogadores em uma mesma posição e criar uma fruta em cima de um jogador?

[@FilipeDeschamps]

Dudu, não sei se entendi muito bem a sua pergunta, mas a colisão só vai ser calculada para o jogador que se mexer. Se for para qualquer coisa que tocar uma fruta, teria que ser outro algoritmo 👍

[@fabriciojosebrito5235]

playlist SENSASIONAL

[@k4stiel373]

Muito bom o seu vídeo, o negócio é que não intende nada, esse negócio de passar parâmetro, função etc... me deixou todo confuso, mas não é culpa sua, acho que não estou nesse patamar ainda de programação valeu pela força

[@FilipeDeschamps]

Show, sem problemas, o canal está precisando mesmo de conteúdo para iniciantes! 👍

"delicinha" palavra que vou adicionar no meu cotidiano. Parabéns pelo vídeo cara! Tu é o cara!

[@FilipeDeschamps]

kkkkkkkkkkkk showww Vítor!! Vamo que vamo meu caro 🤝

[@pudou121]

Oi Filipe, eu resolvi o problema de quando recuperar a conexão evitar movimento duplo assim: 1) Expus o state (onde fica a array observers) e o unsubscribe no retorno (parte pública) do keyboard-listener e criei o método unsubscribe nele: function unsubscribe(observerFunction) { const observerFunctionIndex = state.observers.indexOf(observerFunction); state.observers.splice(observerFunctionIndex, 1); } 2) No client side apliquei o unsubscribe na escuta do setup, caso tenha alguma observerFunction lá: socket.on('setup', (state) => { // (...) só a parte do keyboard-listener: if (keyboardListener.state.observers.length > 0) { keyboardListener.unsubscribe(game.movePlayer); keyboardListener.unsubscribe(movePlayerEmitter); console.log(`Same client now with new playerId: ${playerId} because of new connection, both movePlayer and movePlayerEmitter unsubscribed`) } keyboardListener.subscribe(game.movePlayer); keyboardListener.subscribe(movePlayerEmitter); }); Com isso já funcionou, reparei que funcionaria também se nem fizesse o unsubscribe mas evitasse o subscribe caso já tivessem registros no observer... Mas enfim, meu propósito n foi vir "tirar dúvida", gostaria de saber sua opinião... Se, por acaso, o game.js tb deveria ter uma função de unsubscribe ou se de alguma maneira o server deveria estar ciente disso, por boas práticas em relação a este pattern mesmo. Assim funcionou e vou manter, mas vc menciona no vídeo "unsubscribe" para os observers e tanto o game quanto o keyboard-listener são observers. Não vi necessidade de usar o unsubscribe pro game, uma vez que o subscribe dele vem do server e se ele cair, reseta sozinho todo o estado do jogo, tb, como já disse antes, vi que dava pra fazer sem criar o unsubscribe pro keyboard-listener... O ideal era deixar lá mesmo assim, pra features futuras que possam precisar? No caso do keyboard listener, deixar a chaamda evidente do unsubscribe nesta parte do setup deixa o código mais semântico? Enfim, se o mar de comentários de permitir dizer o que acha, seria bacana. Valeu desde já, Teló.

[@pudou121]

de qqr maneira vo terminar de implementar os extras por mim e dps conferir o repo, brigadão por essa playlist, #delicinha

[@FilipeDeschamps]

Ahhh que massa!!! E sobre se isso foi uma escolha certa, somente o restante do desenvolvimento para mostrar flexibilidade da implementação, mas a princípio me parece caber sim! Outra abordagem seria no momento de desconexão do socket você executar um método público que faria algo como um "keyboardListener.unsubscribeAll()" que simplesmente zeraria o array de subscribers... e dai deixa o setup para ele se subscribe novamente. Assim você "desliga" os inputs do jogador no momento que ele cair. E sobre o controle disso tudo do server, ótima pergunta, acho que ele eventualmente já sabe do que está acontecendo porque ele remove o Player do Jogo assim que o socket é removido 👍

[@pudou121]

@@FilipeDeschamps Isso de quando o socket desconecta foi a primeira coisa que tentei, mas ficou com um comportamento esquisito, fiz do lado do client e ai se eu resetava o server, ele parava de sincronizar qdo voltava. Ficava com o state antigo no client, como se não passasse pelo setup. Vo voltar pra essa tentativa e ver o que tava causando esse comportamento. Me parece que no disconnect fica mais "certinho", na hora certa. Tentei isolar o máximo e quando tirava o disconnect, voltava a atualizar sozinho qdo resetava o server. Valeu cara!

[@pudou121]

@@FilipeDeschamps consegui, eu tava fazendo cagada mesmo, tentando dar unsubscribe em coisa fora do escopo e tomando erro, ai parava geral. Já pus no disconnect. Valeu!

[@nincethaz881]

olá, adoro seu conteúdo ,é mt bom, eu estava vendo aquele video que vc melhorou o código q tinha muitos "if" e eu achei muito interessante, mas eu estou usando uma linguagem diferente, estou usando GDScript (da Godot engine) que se baseia em python, tem uma forma de fazer aquilo em python?

[@FilipeDeschamps]

Nince, tem sim, se eu não me engano se chama Dict de Dictionary 👍

[@victorakinori6909]

Faz um vídeo mostrando como foi programado o minecraft em Java

[@FilipeDeschamps]

Ahh massa, valeu por essa sugestão também 🤝

[@aureliozero]

Olá Filipe! Desculpe minha ignorância mas vc programa em outras linguagens?. Obrigado!

[@FilipeDeschamps]

Fala Aurelio, eu programo em PHP e estou iniciando em Python agora.

[@mateussiqueira318]

Felipe Deschamps o Observable é um conceito de programação reativa certo ?

[@FilipeDeschamps]

Mateus, eu confesso que não saberia dizer exatamente pelos termos técnicos da expressão "programação reativa" mas tudo me leva a acreditar que sim. Inclusive a gente implementou a parte principal de algumas bibliotecas do que conheço por programação reativa.

[@mateussiqueira318]

Valeu Felipe. Se quiser portar o jogo pra uma versão móbile em flutter ficarei feliz em ajudar.

[@PatryckeF]

Talvez dava pra usar um proxyhandler pra controlar a emissão dos eventos, emitindo um evento a cada set chamado no gamestate

[@FilipeDeschamps]

Total Partrycke 👍 se quiser fazer uma implementação e mandar isso como experimento lá no repositório seria excelente!!!! 🤝

Filipe!! Faz um podcast heheeh vai ser muito massa :D

[@FilipeDeschamps]

Totaaaaal Erik!!!

[@guilhermeluis9302]

Como sempre melhor conteúdo

[@FilipeDeschamps]

Valeuuuuuu Guiiiiii 😍

[@pedecabra3704]

Ou loiro vei desenrolado! Valeu mais uma vez pelas dicas........

[@FilipeDeschamps]

Showwww Helder, tamo junto meu caro 🤝

[@piadas804]

Que vídeo legal.

[@vitorsantiago463]

Eae rapeize,tranquilo? Tava querendo uma dica.Estou na procura de estágio na parte de back end,mas estou um pouco em duvida sobre aprender C# ou Java,vcs q ja mexem com isso, oq recomendam? vlwssss

[@FilipeDeschamps]

Vitor, eu falo um pouco sobre a escolha da linguagem nesse vídeo, ele traz um ponto importante sobre o contexto: kzbin.info/www/bejne/aJCpe6Wjm9lmq7M

[@robsonjunior2483]

Qual a melhor opção de enviar informação do client para o server (post), ajax ou websocket?

[@FilipeDeschamps]

Mateus, o POST e Ajax teoricamente são a mesma coisa, pois ambos utilizam o protocolo HTTP, já WebSockets muda bastante. Não tem melhor, depende do cenário. O mais fácil com certeza é REST (que é o POST, Ajax, que você mencionou).

[@robsonjunior2483]

@@FilipeDeschamps entendi, muito obrigado.

[@guto-ew1vh]

Somos 2 apaixonados;------;

[@FilipeDeschamps]

aahhahha showww Guto 😍

[@SnesFanRemix]

websocket usa sockets padrão, websocket acrescenta internamente mais dados , tornando o mais lento q socket. socket io usa websockets, acrescentando muito mais dados silenciosamente, pras transações, fazendo o socket io ser infinitamente mais lento que socket. pra app de alto desempenho como audio , video e jogos em tempo real não se deve usar socket io , ou voce sofrerá. sendo sockets udp é o mais rápido e eficiente para tal modalidade

[@lucas3820]

Depois da sua ultima enquete ficou claro que a massa do publico do seu canal é INICIANTE, eu proponho temas mais voltados para esse publico. Claro que usando Python ^^ Sei que é um desafio pensar em temas mais divertidos e ao mesmo tempo construtivos, queria dar uma sugestão agora bem pessoal, sabe o jogo Angry Birds que todo mundo usa para exemplificar ou treinar as habilidades de Machine Learning então você poderia fazer algo parecido, esmiuçando cada elemento de como fazer essa rede neural "Simples", porem usando outo jogo mundialmente conhecido como Street Fighter 2. Sei que seu conhecimento de Python é menor que o de Javascript, mas sua didática e sensacional, vc consegue passar um assuntos com uma facilidade muito boa sem perder o carisma e o entretenimento. Obrigado ^^ Using Python to build an AI to play and win SNES StreetFighter II: kzbin.info/www/bejne/hKqxhoyPfpKDmsk

[@FilipeDeschamps]

Que massaaaa Brenoooo, muito obrigado pela sugestão e vou ver o vídeo 👍 🤝

[@charlespotel]

"Massinha" e "Delicinha" são duas palavras que soam tao legal quando o Felipe fala .... rindo demais com isso ........ kkkkkkk !! :D

[@FilipeDeschamps]

kkkkkkkkkkkk show Charles 😂 #delicinha

[@charlespotel]

@@FilipeDeschamps 😂😂😂😂😂

[@princesa__jujuba]

Caralho. Consegui ser a primeira. (Não sou bot, eu juro). Acabei de assistir. Só tem vídeo incrível.

[@FilipeDeschamps]

kkkkk show!

[@luccaradaeli8004]

Car@#*#$, tu ficou muito empolgada heim! Kkk

[@princesa__jujuba]

@@luccaradaeli8004 é porque é o primeiro canal que eu realmente acompanho. Quando sai vídeo eu já assisto na hora. Kkkk

[@luccaradaeli8004]

Pois eu também. Filipe é um mito.

[@pedrocomparini5914]

Faz um desafio de programação para os inscritos no final do video

[@FilipeDeschamps]

Ahhh massa Pedro, ótima idéia! 🤝

[@MarceloDenis]

O que acontece se 2 (ou mais) jogadores pegarem a mesma fruta ao mesmo tempo?

[@rodrigou766]

ao rever o primeiro vídeo, me veio a cabeça... O fim é o começo e o começo é o fim.. XD

[@anjonegro1982]

Tentei fazer um p2p com o socket.io e coloquei no vercel, mas da erro com a mensagem "Failed to load resource: net::ERR_CONNECTION_TIMED_OUT", alguma ajuda????? Ps: para executa-lo no meu pc, eu preciso digitar no terminal node server.js.

[@tdias25]

Qual o vídeo inicial dessa série do jogo online?

[@FilipeDeschamps]

Fala Thiago, o início está aqui: kzbin.info/www/bejne/ZqS3l3yQq8-MgM0

[@vitorafonso2542]

Outra forma de evitar que o cliente emissor do evento 'move-player' receba o evento já emitido por ele é usar o sockets.broadcast.emit. Segue a doc explicando: socket.io/docs/emit-cheatsheet/ O unico problema é que você não vai conseguir reutilizar seu game.subscribe((command) ... Mas eliminaria a complexidade no cliente side

[@FilipeDeschamps]

Justíssimo Vitor! 👍