Introdução

Neste tutorial, você aprenderá a criar uma API simples para fornecer informações em tempo real utilizando Node.js, Socket.io e MongoDB. Vamos desenvolver uma aplicação que permite a comunicação em tempo real entre o servidor e os clientes (front-end em React) por meio de WebSockets, possibilitando que todos os usuários recebam atualizações instantâneas de novos dados. Este guia é ideal para desenvolvedores que desejam integrar capacidades em tempo real em suas aplicações, oferecendo uma experiência interativa mais rica para os usuários e aprendendo a combinar diferentes tecnologias modernas.

Etapas

  1. Configuração do Ambiente de Desenvolvimento

    Certifique-se de ter o Node.js e o MongoDB instalados em sua máquina. Você pode baixar o Node.js do site oficial, e para o MongoDB, siga as instruções no site oficial também. Verifique as versões instaladas usando os comandos `node -v` e `mongo –version`. Além disso, crie uma pasta para o seu projeto e inicialize um novo projeto Node.js com `npm init -y`.

    commands
    # Verificar versões instaladas
    node -v
    mongo --version
    # Inicializar um novo projeto
    npm init -y

  2. Instalação de Dependências

    Instale as dependências necessárias para a aplicação. Para este projeto, você precisará de Express, Socket.io e Mongoose. Execute o seguinte comando no terminal na raiz do seu projeto.

    commands
    npm install express socket.io mongoose

  3. Configuração do Servidor Node.js

    Crie um arquivo chamado `server.js` na raiz do seu projeto. Neste arquivo, você irá configurar o Express e o Socket.io para permitir a comunicação em tempo real. Também incluiremos a conexão com o MongoDB.

    server.js
    const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const mongoose = require('mongoose');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

// Conexão com o MongoDB
mongoose.connect('mongodb://localhost:27017/meubanco', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

io.on('connection', (socket) => {
    console.log('Um usuário se conectou');

    socket.on('disconnect', () => {
        console.log('Um usuário se desconectou');
    });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Servidor rodando na porta ${PORT}`);
});

  4. Definição do Modelo de Dados com Mongoose

    Crie uma pasta chamada `models` e dentro dela, crie um arquivo chamado `Data.js`. Nesse arquivo, você irá definir um modelo para os dados que serão salvos no MongoDB.

    models/Data.js
    const mongoose = require('mongoose');

const dataSchema = new mongoose.Schema({
    message: { type: String, required: true },
    createdAt: { type: Date, default: Date.now }
});

module.exports = mongoose.model('Data', dataSchema);

  5. Criando o Endpoint para Receber Dados

    No arquivo `server.js`, adicione um endpoint POST que permitirá que os usuários enviem novas mensagens, que serão salvas no MongoDB e emitidas para todos os clientes conectados via Socket.io.

    server.js_additional
    // Adicione ao arquivo server.js
app.use(express.json());

app.post('/data', async (req, res) => {
    const newData = new Data({ message: req.body.message });
    await newData.save();
    io.emit('newData', newData);
    res.status(201).send(newData);
});

  6. Configurando o Front-end com React

    Crie uma nova aplicação React usando Create React App. No diretório do projeto, execute `npx create-react-app client`. Instale a dependência `socket.io-client` usando o comando `npm install socket.io-client` dentro da pasta `client`.

    commands
    # Criar aplicação React
    npx create-react-app client
    # Navegar para a pasta do cliente
    cd client
    # Instalar Socket.io Client
    npm install socket.io-client

  7. Implementando a Conexão com o Socket.io no React

    Dentro da pasta `client/src`, crie um arquivo chamado `App.js`. Neste arquivo, você irá conectar-se ao servidor Socket.io e lidar com eventos de recebimento de dados.

    App.js
    import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:3000');

function App() {
    const [messages, setMessages] = useState([]);
    const [input, setInput] = useState('');

    useEffect(() => {
        socket.on('newData', (data) => {
            setMessages((prev) => [...prev, data]);
        });

        return () => socket.off('newData');
    }, []);

    const sendMessage = () => {
        fetch('http://localhost:3000/data', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message: input })
        });
        setInput('');
    };

    return (
        <div>
            <h1>Mensagens em Tempo Real</h1>
            <input value={input} onChange={(e) => setInput(e.target.value)} />
            <button onClick={sendMessage}>Enviar</button>
            <ul>
                {messages.map((msg, index) => (
                    <li key={index}>{msg.message}</li>
                ))}
            </ul>
        </div>
    );
}

export default App;

  8. Executando a Aplicação

    Com tudo configurado, primeiro inicie o servidor Node.js utilizando o comando `node server.js`. Em seguida, em outro terminal, navegue até a pasta `client` e execute `npm start` para iniciar o servidor React. Agora você deve conseguir enviar mensagens a partir do front-end e vê-las atualizadas em tempo real.

    commands
    # Iniciar servidor Node.js
    node server.js
    # Iniciar servidor React
    cd client
    npm start

  9. Testes e Validação

    Teste a aplicação acessando o front-end em `http://localhost:3000`, enviando mensagens e verificando se todas as instâncias do navegador recebem as mensagens em tempo real. Você pode abrir várias janelas do navegador para simular diferentes clientes.

    commands
    # Acesse o front-end no navegador
    http://localhost:3000

Conclusão

Neste tutorial, você aprendeu a construir uma API que oferece informações em tempo real usando Node.js e Socket.io, integrando-a com um front-end em React e um banco de dados MongoDB. Com a configuração de comunicação em tempo real implementada, você agora possui uma base sólida para desenvolver aplicações mais interativas e dinâmicas. É possível expandir essa aplicação para incluir autenticação, funcionalidades de chat e muito mais, explorando as capacidades do Socket.io para comunicação em tempo real.

Hashtags

#NodeJS #SocketIO #React #MongoDB #APIs #DesenvolvimentoWeb