JSagon NodeJS Framework

Construa aplicações eficientes e escaláveis de maneira simples e rápida.

WebSocket

A JSagon está em pleno desenvolvimento de adapters que permitem uma fácil integração com outras tecnologias e ferramentas de terceiros. Porém, é completamente viável fazer uma implementação paralela enquanto determinado adapter ainda não esteja disponível para implementação e deploy para produção.

Este artigo tem como propósito demonstrar uma breve e simples integração com WebSocket utilizando o Socket.io e a JSagon Framework.

Considerando que o projeto já esteja criado, partiremos de fato para a implementação. Primeiro precisaremos realizar a instalação do Socket.io para podermos utilizá-lo em nossa aplicação. Execute o seguinte comando em seu terminal na pasta de seu projeto.

npm i socket.io

Caso esteja desenvolvendo em TypeScript, execute o seguinte comando para instalar os tipos necessários.

npm i -D @types/socket.io

Tendo instalado o Socket.io, agora o implementaremos na aplicação. Para isso, abra o arquivo ponto de entrada dev/src/server.ts(js), e faça como no exemplo a seguir.

    import { JSagon } from '@jsagon/core'
    import { Server } from 'socket.io'
    import configApp from './config/app.config'
    
    const server = JSagon.create(configApp).listen(3000, () => {
      console.log('Server online!')
    })
    
    const io = new Server(server)
    
    io.on('connection', (socket) => {
      console.log('Um usuário se conectou');
    });

Adicionamos a importação do Socket.io, e note que inicializamos uma nova instância sua passando o objeto server (HTTP server) como parâmetro. E então adicionamos um evento "connection" para receber as novas conexões estabelecidas implementando apenas um console.log.

Em termos de back-end, é praticamente isso por enquanto. Para estabelecer a conexão com o servidor, no front-end faremos um exemplo bem simples. No arquivo /dev/resource/layouts/main.hbs(ejs), adicione a tag de importação do Socket.io e também um simples instanciamento no final do arquivo antes do fechamento da tag body. Faça como a seguir.

    <body>
       ...
       <script src="/socket.io/socket.io.js"></script>
       <script>
         var socket = io();
       </script>
    </body>

Para ver o resultado, inicialize a aplicação em ambiente de desenvolvimento executando o seguinte comando:

npm run dev

Após a inicialização com sucesso do servidor, abra o browser de sua preferência e acesse a sua aplicação em http://localhost:3000. Após acessar a página, verificando o terminal em que a aplicação foi inicializada você verá a mensagem de log ("Um usuário se conectou") criada logo acima.

Basicamente isso, e de uma maneira bem simples.

Considerações finais

Claro que este exemplo foi para fins de demonstração, para a implementação de projetos mais sérios é recomendado uma melhor organização de pastas e arquivos. De preferência, utilize a estrutura de pastas da própria framework. Criando uma pasta WebSocket no módulo e na aplicação em que deseja, uma classe ou função que receba um server e implemente toda a lógica do projeto. O mesmo para o front-end, crie um arquivo JavaScript para desenvolver a lógica do cliente e o importe na página desejada.

Qualquer dúvida, entre em contato por um dos meios disponíveis.