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.