Chat com Node.js e React Native

Local do chat para estudos D:\Projects\Area_51\ChatDoc

Chat React Native com Sockt.IO

A arquitetura de um sistema de chat pode variar dependendo de diversos fatores, como escopo, requisitos, plataforma e complexidade. No entanto, vou fornecer uma visão geral de uma arquitetura típica para um chat online, considerando os principais componentes e como eles interagem. Essa arquitetura pode ser aplicada a sistemas de chat individuais, aplicativos de mensagens em grupo ou até mesmo serviços de chat em empresas.

Clientes:

• Os clientes são os aplicativos ou interfaces que os usuários usam para se comunicar no chat. Isso pode ser um aplicativo de desktop, um aplicativo móvel, uma página da web ou qualquer outro meio de interação.
• Cada cliente se conecta ao servidor de chat para enviar e receber mensagens.

Servidor de Chat:

• O servidor de chat é o coração da arquitetura. Ele gerencia todas as comunicações entre os clientes e assegura que as mensagens sejam entregues corretamente.
• O servidor armazena o histórico de mensagens, mantém uma lista de usuários ativos, autentica usuários e gerencia salas de chat ou grupos, se aplicável.
• O servidor é responsável por encaminhar mensagens entre os clientes em tempo real.

Banco de Dados:

• Geralmente, um banco de dados é usado para armazenar informações críticas, como mensagens, informações de perfil de usuário, configurações e metadados da conversa.
• Isso permite que os usuários acessem seu histórico de mensagens em diferentes dispositivos e mantém o estado do chat entre sessões.

Notificações:

• Esse componente lida com o envio de notificações para os clientes sempre que uma nova mensagem é recebida ou quando ocorrem eventos importantes, como convites para grupos.

Load Balancer:

• Em sistemas de chat com muitos usuários, um balanceador de carga pode ser usado para distribuir o tráfego entre vários servidores de chat, garantindo escalabilidade e alta disponibilidade.

Esta é uma arquitetura simplificada e genérica de um sistema de chat. A complexidade pode aumentar dependendo dos recursos específicos oferecidos pelo sistema, como videochamadas, compartilhamento de arquivos, bots ou integrações com outros serviços. Além disso, o dimensionamento e a redundância podem ser necessários para lidar com um grande número de usuários e garantir a disponibilidade contínua do serviço.

Em resumo, nossa solução para comunicação simultânea utilizará as seguintes tecnologias:

1. Socket.io para Comunicação em Tempo Real: Usaremos o Socket.io para possibilitar a comunicação em tempo real entre os usuários. Isso permitirá que as mensagens sejam entregues instantaneamente.

1. PostgreSQL para Armazenamento de Mensagens: O PostgreSQL será utilizado para arquivar e armazenar as mensagens trocadas entre os usuários. Isso garantirá a persistência e a possibilidade de acessar o histórico de mensagens.

1. React Native e Expo para o Desenvolvimento da Aplicação: A aplicação será desenvolvida usando o React Native juntamente com o Expo. Isso nos permite criar aplicativos móveis multiplataforma de alta qualidade de forma eficiente.

1. Node.js no Backend: No lado do servidor, o Node.js será a base da nossa aplicação. Ele será responsável por gerenciar as solicitações dos clientes, processar mensagens e coordenar a comunicação entre os clientes usando o Socket.io.

1. HTTP para Comunicação: Para conectar todos esses componentes, usaremos o protocolo HTTP para a comunicação entre o cliente, o servidor Node.js e o banco de dados PostgreSQL. Isso garantirá que os diferentes componentes se comuniquem de maneira eficaz.

Essa arquitetura, baseada em tecnologias modernas e amplamente adotadas, proporcionará uma experiência de chat eficiente e em tempo real para os usuários, além de permitir o armazenamento seguro e acessível do histórico de mensagens.

Nesta abordagem simplificada, você está construindo uma versão básica de chat que permite que todos os usuários se comuniquem em uma única sala de chat. Essa é uma ótima maneira de aprender os conceitos básicos de comunicação em tempo real usando Socket.io e criar um chat funcional com o mínimo de complexidade. Mais recursos e melhorias podem ser adicionados posteriormente, à medida que você se familiariza mais com o desenvolvimento de chat e suas necessidades específicas.

Neste projeto mais simplificado, não incluiremos o desenvolvimento de um banco de dados para armazenar as mensagens, nem a funcionalidade de notificações push para o caso em que um usuário não esteja ativamente no chat. No entanto, forneceremos uma estrutura básica que permite a implementação de notificações push, caso você deseje adicionar esse recurso posteriormente.

Para começar, vamos criar um aplicativo que nomearei 'app-chat'

npx create-expo-app app-chat

Agora, vamos começar configurando o nosso back-end. Fora da pasta do aplicativo, vamos criar uma nova pasta para nossos arquivos de servidor, e em seguida, executaremos o comando 'init'. Utilizaremos o comando 'npm init' para criar um arquivo 'package.json' que servirá como o ponto de partida para o nosso projeto.

npm init

Algumas perguntas serão feitas

package name: (server) com.chat.doc version: (1.0.0) description: Server Chat entry point: (index.js) test command: git repository: keywords: author: license: (ISC)

resultando nessas especificações

{
  "name": "com.chat.doc",
  "version": "1.0.0",
  "description": "Server Chat",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Samuel Lisboa",
  "license": "ISC"
}

Agora, demos início a tudo. Em primeiro lugar, vamos configurar o servidor que irá controlar todas as salas que você, como desenvolvedor, pode criar, seja por meio de IDs ou nomes de usuários. Neste momento, criaremos uma sala com o nome do usuário para nossos testes (no entanto, lembre-se de que em um ambiente de produção real, essa abordagem não é recomendada).

Vamos instalar algumas libs, que serão usadas para comunicacao do chat.

yarn add express socket.io http

Configurando a Base do Nosso Servidor de Chat

io.on("connection", (socket)=>{
    console.log("User connect => ", socket.id);
    socket.on('join_room', (room)=>{
        socket.join(room);
        console.log("User em room ", room);
    });
    socket.on("send_message", (message)=>{
        console.log("Send Mensage", message);
        var room = message.room;
        const usersInRoom = io.sockets.adapter.rooms.get(room);
        if (usersInRoom) {
          const numberOfUsers = usersInRoom.size;
          console.log(`Número de usuários na sala ${room}: ${numberOfUsers}`);
        } else {
          console.log(`Nenhum usuário na sala ${room}`);
        }
        io.to(room).emit("new_message",{...message, id: new Date().getTime()})
    });
    socket.on("disconnect", ()=>{
        console.log("User close", socket.id);

    })
})

1. io.on("connection", (socket) => { ... }:
2. Isso estabelece um manipulador de eventos para quando um novo usuário se conecta ao servidor de Socket.io.
3. socket representa a conexão do usuário recém-conectado.
4. console.log("User connect => ", socket.id);:
5. Essa linha imprime no console que um usuário se conectou, exibindo o ID do socket do usuário.
6. socket.on('join_room', (room) => { ... }:
7. Este trecho de código lida com o evento 'join_room'. Quando um cliente envia este evento, ele se junta a uma sala específica identificada pelo parâmetro 'room'.
8. socket.join(room);:
9. O usuário é colocado na sala especificada.
10. console.log("User em room ", room);:
11. Uma mensagem é impressa no console informando que o usuário ingressou na sala 'room'.
12. socket.on("send_message", (message) => { ... }:
13. Este bloco de código lida com o evento 'send_message'. Quando um cliente envia uma mensagem, ela é tratada aqui.
14. console.log("Send Mensage", message);:
15. A mensagem enviada pelo usuário é exibida no console.
16. var room = message.room;:
17. O código extrai a sala da qual a mensagem foi enviada do objeto 'message'.
18. const usersInRoom = io.sockets.adapter.rooms.get(room);:
19. Ele obtém informações sobre os usuários na sala especificada e armazena em 'usersInRoom'.
20. if (usersInRoom) { ... }:
21. Verifica se há usuários na sala. Se houver, o código imprime o número de usuários na sala. Caso contrário, ele informa que não há usuários na sala.
22. Aqui poderá estar os códigos para envio de push
23. Para salvar as mensagens adicione códigos aqui
24. io.to(room).emit("new_message", { ... }):
25. O servidor emite uma nova mensagem para todos os clientes que estão na mesma sala.
26. Ele adiciona uma marca de tempo única (timestamp) para a mensagem antes de emitir.
27. socket.on("disconnect", () => { ... }:
28. Este bloco de código lida com o evento 'disconnect' quando um usuário desconecta.
29. Ele imprime uma mensagem no console informando que um usuário se desconectou.

App Chat

instalar LIB

yarn add socket.io-client

Pagina principal do chat

import { useEffect, useRef, useState } from "react";
import { io } from "socket.io-client";
import { FlatList, HStack, KeyboardAvoidingView, Text, VStack, View } from "native-base";
import { Platform } from "react-native";
import { TouchableOpacity} from "react-native";
import { Ionicons } from '@expo/vector-icons';
import NewMessageFrom from "./components/NewMessageFrom/NewMessageFrom";
import Message from "./components/Message/Message";
const socket = io('http://192.168.0.108:8801');

export default function Chat() {
    var room = "ID_ROOM";
    const flatListRef = useRef();
    const [messages, setMessages] = useState([]);
    const [userName, setuserName] = useState('user_'+new Date().getSeconds());
    async function received() {
        try{
            socket.emit("join_room", room);
            socket.on("new_message", (data) => {
                console.log('message recive', data);
                setMessages(current => {
                    return [...current, data]
                });
                setTimeout(()=>{
                    try{
                        flatListRef.current.scrollToEnd({ animated: true });
                    }catch(e){
                    
                    }
                },500);
            });
        }catch(e){
            console.log("Erro in get mensagens live: ",e);
        }
    }

    useEffect(() => {
        received();
    }, []);

    const renderItem = ({ item }) => {
        return <Message username={userName} message={item}></Message>
    }

    return (
        <View width={"100%"}  height={"100%"}>
            <KeyboardAvoidingView
                behavior={Platform.OS === "ios" ? 'padding' : null}
            >
                <VStack width={"100%"} height={"100%"}>
                    <HStack height={'70px'} background={"#9d002f"} paddingTop={6}>
                        <Text color={"#FFF"} fontSize={22}> Chat</Text>
                    </HStack>
                    <View flex={10} padding={3}>
                        <FlatList
                            ref={flatListRef}
                            data={messages}
                            renderItem={renderItem}
                            keyExtractor={item => item.id}
                        />
                    </View>
                     <View height={'50px'}>
                        <NewMessageFrom userName={userName} socket={socket} room={room}/>
                    </View>
                </VStack>
            </KeyboardAvoidingView>
        </View>)
}

1. Importações:
2. As importações no início do código trazem módulos e componentes necessários para o funcionamento do aplicativo. Isso inclui componentes do NativeBase, o módulo Socket.io para comunicação em tempo real e outros recursos.
3. Configuração do Socket.io:
4. const socket = io('http://192.168.0.108:8801');: Aqui, você cria uma instância do cliente Socket.io para se conectar a um servidor de chat. O URL 'http://192.168.0.108:8801' deve apontar para o servidor Socket.io.
5. Componente React 'Chat':
6. Essa função define um componente React chamado 'Chat', que representa a tela de chat do aplicativo.
7. State e Refs:
8. O estado é usado para armazenar mensagens e o nome do usuário.
9. A ref flatListRef é usada para acessar o componente FlatList para rolar para o final da lista de mensagens.
10. received Function:
11. Esta função é usada para configurar os listeners de eventos Socket.io e receber mensagens.
12. Ela emite um evento 'join_room' para ingressar na sala identificada por room.
13. Escuta o evento 'new_message' para receber novas mensagens e atualizar o estado de mensagens.
14. useEffect Hook:
15. O hook useEffect é usado para executar a função received quando o componente é montado. Isso garante que os ouvintes de eventos Socket.io estejam prontos para receber mensagens.
16. renderItem Function:
17. Essa função é usada para renderizar cada mensagem na lista. Ela recebe um item (mensagem) e renderiza o componente 'Message'.
18. Renderização do Componente:
19. A renderização do componente consiste em uma estrutura de interface com um cabeçalho 'Chat', uma lista de mensagens usando FlatList, e um componente 'NewMessageFrom' para que os usuários possam enviar novas mensagens.
20. KeyboardAvoidingView:
21. Este componente lida com o comportamento do teclado em dispositivos móveis. Ele ajusta a exibição para evitar que o teclado cubra o campo de entrada de mensagens.
22. NewMessageFrom Component:
23. NewMessageFrom é um componente externo que permite aos usuários enviar novas mensagens. É renderizado na parte inferior da tela.

Em resumo, esse código cria a estrutura básica de um aplicativo de chat com uma interface de usuário que exibe mensagens em uma lista e permite aos usuários enviar novas mensagens. Ele também estabelece a comunicação em tempo real com um servidor Socket.io para receber e enviar mensagens. O aplicativo é configurado para ingressar em uma sala de chat específica identificada por room.

Minha preferência é trabalhar com Native-Base, por isso o integrei ao projeto. No entanto, se preferir, você também pode optar por utilizar o React Native puro. Caso deseje instalar o Native-Base, siga a documentação oficial; no entanto, para facilitar, vou fornecer abaixo alguns comandos para uma instalação mais simples."

yarn add native-base
npx expo install react-native-svg@12.1.1
npx expo install react-native-safe-area-context@3.3.2

Tudo instalado e programado. Agora, vamos fazer o build do projeto.

npx expo run:android

Agora que o projeto está configurado e programado, estamos prontos para criar o aplicativo de chat em tempo real. Este é um passo significativo na jornada de desenvolvimento e nos permite ver o chat em ação, enviando e recebendo mensagens em tempo real.

Com as bases estabelecidas, podemos continuar aprimorando e adicionando recursos ao aplicativo de chat conforme necessário. É um passo emocionante em direção à criação de uma plataforma de comunicação em tempo real eficaz.