TypeScript: WebSocket

Vamos criar um chat com TS ?

Dando continuidade a minha serie de artigos sobre TypeScript, hoje irei demonstrar como se trabalhar com WebSockets. Caso você nunca tenha trabalhado com WebSockets, eu recomendo a leitura do seguinte artigo: WebSockets | MDN.

Bom, o objetivo desse artigo será o desenvolvimento de um chat, utilizando TypeScript e o pacote Socket.IO. Para ser mais objetivo, eu irei pular a parte de configuração do projeto, irei partir de um já criado e configurado com o TS. Caso você tenha interesse e clonar ele, segue o seu link no GitHub: TS-Standard.


Para os próximos passos será necessário a utilização de uma IDE, quem acompanha os meus artigos, sabe da minha preferência pelo VS Code, mas como já mencionei antes, você pode utilizar um de sua preferência.

Com o projeto TS-Standard aberto na sua IDE, veja abaixo uma rápida explicação sobre a os seus dois principais arquivos:

  • app.ts: arquivo bootstrap do projeto, nele eu deixei configurado a importação do pacote express e a criação de uma rota default
  • server.ts: arquivo de configuração do servidor com a porta e o start

Para esse artigo será necessário importar um pacote chamado socket.io, para instalar ele no seu projeto, execute o seguinte comando no seu terminal:

npm i socket.io @types/socket.io --save
npm install copyfiles --save-dev

Configuração do projeto

O seu próximo passo será atualizar os arquivos mencionados acima, com os seguintes trechos de código:

app.ts

app.ts

Navegando pelo código acima nós temos:

  • 01 — 03: importação dos pacotes
  • 09: definindo a porta que o projeto irá escutar
  • 17–20: inicializando o express e definindo uma rota default, note que ele está retornando um arquivo HTML, ele será demonstrado abaixo
  • 24–27: criando o server e inicializando o socket.
  • 29–43: aqui nós estamos verificando o status da conexão dos nossos usuários, essa parte ficara mais clara na hora que você estiver testando o projeto

server.ts

server.ts

No trecho de código acima, nós atualizamos a linha 6, passando para o server escutar a porta do nosso projeto.

index.html

index.html

pakage.json

"scripts": {
"compile": "tsc -w",
"prestart": "copyfiles *.html dist/",
"start": "nodemon dist/server.js"
},
  • compile: chamada para o ts watch
  • prestart: chamando o pacote copyfiles para copiar o arquivo .html para o diretório /dist
  • start: utilizando o nodemon para subir e gerenciar o nosso server

Testando

Agora para testar você irá precisar de dois terminais, como estou utilizando o VS Code, irei deixar um rodando o comando compile e o outro o start, caso você não esteja no VS, abra dois terminais e execute os comandos abaixo neles:

npm run compile 
-> para que o tscongig gere os arquivos .js
npm start 
-> ele irá executar o prestart, copiar o html para o dist e subir o server

Caso o comando npm start não tenha apresentado nenhum erro, você irá receber uma mensagem na sua console dizendo que o projeto está sendo executado na porta 8100. Esse passo pode ser visto na imagem abaixo:

Agora abra o endeço http://localhost:8100/ em duas abas do seu navegador e teste o envio e recebimento de mensagens 😉 Você pode ver esse passo na imagem abaixo:

Com isso nós finalizamos mais um artigo … Caso você tenha interesse em baixar o projeto desenvolvido aqui, segue o link dele no GitHub ts-websocket.

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

Maze Runner – Correr ou Morrer

Maze Runner – Correr ou Morrer O filme mostra o jovem Thomas (Dylan O’Brien), que vai parar em um lugar desconhecido, sem memória que o
TheWildsVidasSelvagens

the wilds: vidas selvagens

The Wilds: Vidas Selvagens The Wilds: Vidas Selvagens é uma série dramática de TV americana criada por Sarah Streicher que foi lançada no Prime Video
RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses
SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home