chat-whatsapp

Made with create-react-library

Install

npm install --save chat-whatsapp

Usage

Componente de Exemplo

import React, { useState, useEffect } from 'react';
import Chat from 'chat-whatsapp'; 
import io from 'socket.io-client'

const App = () => {
  const apiUrl = 'http://localhost:3001';
  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const socket = io(apiUrl)

  useEffect(()=>{
    socket.on('response', (data) => {
      setMessages((prevMessages) => [...prevMessages, data])
    })

    return () => {
      socket.off('response')
    }
  }, [])

  return (
    <div> 
      <Chat 
        textChat="Olá, seja bem vindo de volta"  
        user="cer" 
        isOpen={isOpen} 
        setIsOpen={setIsOpen} 
        messages={messages}
        setMessages={setMessages}
        inputValue={inputValue}
        setInputValue={setInputValue}
        socket={socket}
      />
    </div> 
  );
};

export default App;

Exemplo do BackEnd

const express = require('express')
const http = require('http')
const socketIo = require('socket.io')

const app = express()
const server = http.createServer(app)
const io = socketIo(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
})

app.use((req, res, next) => {
  req.io = io;
  next();
});

io.on('connection', (socket) => {
  console.log('New client connected')
  
  socket.on('disconnect', () => {
    console.log('Client disconnected')
  })

  socket.on('send-message', (data) => {
    console.log('Message received: ', data)

    io.emit('response', { sender: 'bot', text: 'retorno do backend'});

  })
})

app.get('/send-message', (req, res) => {
  res.send('Backend is working');
});

server.listen(3001, () => {
  console.log('Server is running on port 3001')
})

Detalhe das variáveis

textChat: Mensagem de texto inicial exibida no chat.

Tipo: string
Exemplo: Olá, seja bem vindo de volta
user: Identificador do usuário.

Tipo: string
Exemplo: http://localhost:3001
apiURL: URL da API para conexão via WebSocket.

Tipo: boolean
Exemplo: true or false
isOpen: Estado que controla se o chat está aberto ou fechado.

Tipo: boolean
Exemplo: false
setIsOpen: Função para atualizar o estado de isOpen.

Tipo: function
Exemplo: setIsOpen(false)
messages: Array de mensagens exibidas no chat.

Tipo: array
Exemplo: [{ user: 'cer', message: 'Olá!' }]
setMessages: Função para atualizar o estado de messages.

Tipo: function
Exemplo: setMessages([{ user: 'cer', message: 'Olá!' }])
inputValue: Valor atual do campo de entrada do chat.

Tipo: string
Exemplo: ''
setInputValue: Função para atualizar o estado de inputValue.

Tipo: function
Exemplo: setInputValue('Olá!')
socket: Instância do WebSocket para comunicação em tempo real.

Tipo: object
Exemplo: io('http://localhost:3001')

License

MIT © IGBxRobinho