adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'websocket' of https://github.com/AdrianoRobson/projeto-hit into merge-socket

merge-socket
adriano 2024-08-22 16:53:27 -03:00
parent 125e758a18 83d197f240
commit 1f8d5eb29b
33 changed files with 509 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
backend/package.json
View File

@ -17,6 +17,7 @@
"license": "MIT",
"dependencies": {
"@sentry/node": "^5.29.2",
"@socket.io/redis-adapter": "^7.2.0",
"@types/fluent-ffmpeg": "^2.1.21",
"@types/pino": "^6.3.4",
"axios": "^1.2.3",
@ -41,12 +42,13 @@
"pino": "^6.9.0",
"pino-pretty": "^9.1.1",
"qrcode-terminal": "^0.12.0",
"redis": "^4.6.13",
"reflect-metadata": "^0.1.13",
"sequelize": "^5.22.3",
"sequelize-cli": "^5.5.1",
"sequelize-typescript": "^1.1.0",
"sharp": "^0.32.5",
"socket.io": "^3.0.5",
"socket.io": "^4.7.5",
"socket.io-client": "^4.5.4",
"uuid": "^8.3.2",
"whatsapp-web.js": "github:pedroslopez/whatsapp-web.js",

38
backend/src/libs/socket.ts
View File

@ -3,6 +3,9 @@ import { Server } from "http";
import AppError from "../errors/AppError";
import { logger } from "../utils/logger";
import { createAdapter } from "@socket.io/redis-adapter";
import { createClient } from 'redis';
import { v4 as uuidv4 } from "uuid";
import ListUserParamiterService from "../services/UserServices/ListUserParamiterService";
import {
@ -27,6 +30,7 @@ import {
} from "../services/WbotServices/wbotMessageListener";
import { join } from "path";
import Whatsapp from "../models/Whatsapp";
import { get } from "../helpers/RedisClient"
let count: number = 0;
let listOnline: any[] = [];
@ -42,14 +46,30 @@ let dateTime = splitDateTime(
new Date(format(new Date(), "yyyy-MM-dd HH:mm:ss", { locale: ptBR }))
);
const pubClient = createClient({ url: 'redis://172.31.187.29:6379' });
const subClient = pubClient.duplicate();
pubClient.connect().catch(console.error);
subClient.connect().catch(console.error);
export const initIO = (httpServer: Server): SocketIO => {
io = new SocketIO(httpServer, {
cors: {
origin: process.env.FRONTEND_URL
origin: "*",
allowedHeaders: ["my-custom-header"],
credentials: true
},
maxHttpBufferSize: 1e8
maxHttpBufferSize: 1e8,
pingInterval: 25000,
pingTimeout: 60000,
adapter: createAdapter(pubClient, subClient)
});
io.on("connection", socket => {
logger.info("Client Connected");
@ -107,6 +127,7 @@ export const initIO = (httpServer: Server): SocketIO => {
socket.on("online", (userId: any) => {
// console.log('userId: ', userId)
return
obj.uuid = uuidv4();
if (userId.logoutUserId) {
@ -233,13 +254,18 @@ export const initIO = (httpServer: Server): SocketIO => {
if (rooms && rooms.size == 2 && ![...rooms][1].startsWith("session_"))
return;
let whatsappIds: any = await Whatsapp.findAll({
attributes: ["id"],
raw: true
let whatsappIds = await get({
key: "whatsapp:*",
parse: true
});
// let whatsappIds: any = await Whatsapp.findAll({
// attributes: ["id"],
// raw: true
// });
if (whatsappIds && whatsappIds.length > 0) {
whatsappIds = whatsappIds.map((e: any) => `${e.id}`);
// whatsappIds = whatsappIds.map((e: any) => `${e.id}`);
console.log(
"whatsappIds whatsappIds whatsappIds whatsappIds whatsappIds: ",

2
frontend/package.json
View File

@ -43,7 +43,7 @@
"yup": "^0.32.8"
},
"scripts": {
"start": "react-scripts start",
"start": "PORT=3331 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

2
frontend/server.js
View File

@ -6,4 +6,4 @@ app.use(express.static(path.join(__dirname, "build")));
app.get("/*", function (req, res) {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
app.listen(3333);
app.listen(3331);

25
frontend/src/components/MessagesList/index.js
View File

@ -1,7 +1,9 @@
import React, { useContext, useState, useEffect, useReducer, useRef } from "react"
import { isSameDay, parseISO, format } from "date-fns"
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
import clsx from "clsx"
import { AuthContext } from "../../context/Auth/AuthContext"
@ -438,11 +440,18 @@ const MessagesList = ({ ticketId, isGroup }) => {
}, [pageNumber, ticketId])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("connect", () => socket.emit("joinChatBox", ticketId))
const onConnectMessagesList = () => {
socket.emit("joinChatBox", ticketId)
}
socket.on("appMessage", (data) => {
onConnectMessagesList()
socket.on("connect", onConnectMessagesList)
const onAppMessageMessagesList = (data) => {
if (+data.message.ticketId !== +ticketId) return
if (data.action === "create") {
@ -454,10 +463,14 @@ const MessagesList = ({ ticketId, isGroup }) => {
if (data.action === "update") {
dispatch({ type: "UPDATE_MESSAGE", payload: data.message })
}
})
}
socket.on("appMessage", onAppMessageMessagesList)
return () => {
socket.disconnect()
socket.emit("leaveChatBox", ticketId)
socket.off("connect", onConnectMessagesList)
socket.off("appMessage", onAppMessageMessagesList)
}
}, [ticketId])

43
frontend/src/components/NotificationsPopOver/index.js
View File

@ -2,7 +2,8 @@ import React, { useState, useRef, useEffect, useContext } from "react"
import { useHistory } from "react-router-dom"
import { format } from "date-fns"
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
import useSound from "use-sound"
import Popover from "@material-ui/core/Popover"
@ -132,7 +133,7 @@ const NotificationsPopOver = () => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("reload_page", (data) => {
@ -193,7 +194,8 @@ const NotificationsPopOver = () => {
return () => {
socket.disconnect()
socket.removeAllListeners('reload_page');
socket.removeAllListeners('onlineStatus');
}
}, [user.id, handleLogout, user.profile])
@ -201,12 +203,17 @@ const NotificationsPopOver = () => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("connect", () => socket.emit("joinNotification"))
const onConnectNotifications = () => {
socket.emit("joinNotification")
}
onConnectNotifications()
socket.on("ticket", data => {
socket.on("connect", onConnectNotifications)
const onTicketNotifications = data => {
if (data.action === "updateUnread" || data.action === "delete") {
@ -232,25 +239,18 @@ const NotificationsPopOver = () => {
return prevState
})
}
})
socket.on("appMessage", data => {
}
socket.on("ticket", onTicketNotifications)
const onAppMessageNotifications = data => {
if (
data.action === "create" &&
!data.message.read &&
(data.ticket.userId === user?.id || !data.ticket.userId)
) {
setNotifications(prevState => {
// prevState.forEach((e)=>{
//
// })
@ -265,8 +265,6 @@ const NotificationsPopOver = () => {
return [data.ticket, ...prevState]
})
const shouldNotNotificate = (data.message.ticketId === ticketIdRef.current && document.visibilityState === "visible") ||
(data.ticket.userId && data.ticket.userId !== user?.id) ||
data.ticket.isGroup || !data.ticket.userId
@ -275,14 +273,19 @@ const NotificationsPopOver = () => {
handleNotifications(data)
}
})
}
socket.on("appMessage", onAppMessageNotifications)
socket.on('notifyPeding', data => {
if (settings?.length > 0 && getSettingValue('notificationTransferQueue') === 'enabled') handleNotifications("", data);
});
return () => {
socket.disconnect()
socket.off('connect', onConnectNotifications);
socket.off('ticket', onTicketNotifications);
socket.off('appMessage', onAppMessageNotifications);
socket.removeAllListeners('notifyPeding');
}
}, [user, settings])

13
frontend/src/components/PositionModal/index.js
View File

@ -3,7 +3,8 @@ import React, { useState, useEffect, useRef, useContext } from "react"
import * as Yup from "yup"
import { Formik, Form, Field } from "formik"
import { toast } from "react-toastify"
import openSocket from 'socket.io-client'
//import openSocket from 'socket.io-client'
import { socket } from "../../services/socket"
import {
makeStyles,
@ -86,9 +87,9 @@ const PositionModal = ({
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('settings', (data) => {
const onSettingsPosition = (data) => {
if (data.action === 'update') {
setSettings((prevState) => {
const aux = [...prevState]
@ -97,10 +98,12 @@ const PositionModal = ({
return aux
})
}
})
}
socket.on('settings', onSettingsPosition)
return () => {
socket.disconnect()
socket.off("settings", onSettingsPosition)
}
}, [])

14
frontend/src/components/QrcodeModal/index.js
View File

@ -1,6 +1,8 @@
import React, { useEffect, useState, useContext } from "react";
import QRCode from "qrcode.react";
import openSocket from "socket.io-client";
//import openSocket from "socket.io-client";
import { socket } from "../../services/socket";
import toastError from "../../errors/toastError";
import { Dialog, DialogContent, Paper, Typography } from "@material-ui/core";
@ -31,9 +33,9 @@ const QrcodeModal = ({ open, onClose, whatsAppId }) => {
useEffect(() => {
if (!whatsAppId) return;
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("whatsappSession", data => {
const onWhatsAppSessionQrCode = data => {
if (data.action === "update" && data.session.id === whatsAppId) {
setQrCode(data.session.qrcode);
}
@ -53,10 +55,12 @@ const QrcodeModal = ({ open, onClose, whatsAppId }) => {
}
}
});
}
socket.on("whatsappSession", onWhatsAppSessionQrCode);
return () => {
socket.disconnect();
socket.off("whatsappSession", onWhatsAppSessionQrCode);
};
}, [whatsAppId, onClose, user.profile]);

14
frontend/src/components/QueueModal/index.js
View File

@ -23,8 +23,8 @@ import { IconButton, InputAdornment } from "@material-ui/core"
import { Colorize } from "@material-ui/icons"
import { AuthContext } from '../../context/Auth/AuthContext'
import openSocket from 'socket.io-client'
//import openSocket from 'socket.io-client'
import { socket } from "../../services/socket"
const useStyles = makeStyles(theme => ({
@ -92,9 +92,9 @@ const QueueModal = ({ open, onClose, queueId }) => {
}, [setting])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('settings', (data) => {
const onSettingsQueueModal = (data) => {
if (data.action === 'update') {
setSettings((prevState) => {
const aux = [...prevState]
@ -103,10 +103,12 @@ const QueueModal = ({ open, onClose, queueId }) => {
return aux
})
}
})
}
socket.on('settings', onSettingsQueueModal)
return () => {
socket.disconnect()
socket.off("settings", onSettingsQueueModal)
}
}, [])

14
frontend/src/components/QuickAnswersModal/index.js
View File

@ -3,8 +3,8 @@ import React, { useState, useEffect, useRef, useContext } from "react"
import * as Yup from "yup"
import { Formik, Form, Field } from "formik"
import { toast } from "react-toastify"
import openSocket from 'socket.io-client'
//import openSocket from 'socket.io-client'
import { socket } from "../../services/socket"
import {
makeStyles,
@ -101,9 +101,9 @@ const QuickAnswersModal = ({
}, [open,])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('settings', (data) => {
const onSettingsQuickAnswersModal = (data) => {
if (data.action === 'update') {
setSettings((prevState) => {
const aux = [...prevState]
@ -112,10 +112,12 @@ const QuickAnswersModal = ({
return aux
})
}
})
}
socket.on('settings', onSettingsQuickAnswersModal)
return () => {
socket.disconnect()
socket.off("settings", onSettingsQuickAnswersModal)
}
}, [])

14
frontend/src/components/StatusChatEndModal/index.js
View File

@ -3,8 +3,8 @@ import React, { useState, useEffect, useRef, useContext } from "react"
import * as Yup from "yup"
import { Formik, Form, Field } from "formik"
import { toast } from "react-toastify"
import openSocket from 'socket.io-client'
//import openSocket from 'socket.io-client'
import { socket } from "../../services/socket"
import {
makeStyles,
@ -91,9 +91,9 @@ const StatusChatEndModal = ({
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('settings', (data) => {
const onSettingsStatusChatEndModal = (data) => {
if (data.action === 'update') {
setSettings((prevState) => {
const aux = [...prevState]
@ -102,10 +102,12 @@ const StatusChatEndModal = ({
return aux
})
}
})
}
socket.on('settings', onSettingsStatusChatEndModal)
return () => {
socket.disconnect()
socket.off("settings", onSettingsStatusChatEndModal)
}
}, [])

41
frontend/src/components/Ticket/index.js
View File

@ -2,7 +2,9 @@ import React, { useState, useEffect } from "react"
import { useParams, useHistory } from "react-router-dom"
import { toast } from "react-toastify"
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
import clsx from "clsx"
import { Paper, makeStyles } from "@material-ui/core"
@ -132,22 +134,32 @@ const Ticket = () => {
}, [])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("connect", () => socket.emit("joinChatBox", ticketId))
const onConnectTicket = () => socket.emit("joinChatBox", ticketId)
onConnectTicket()
socket.on("connect", onConnectTicket)
const onTicketTicket = (data) => {
const isSameTicket = +data?.ticket?.id === +ticketId || +data.ticketId === +ticketId
if (!isSameTicket) return
socket.on("ticket", (data) => {
if (data.action === "update") {
setTicket(data.ticket)
}
if (data.action === "delete") {
if (data.action === "deleteForever") {
console.log('delete forever')
toast.success("Ticket deleted sucessfully.")
history.push("/tickets")
}
})
}
socket.on("contact", (data) => {
socket.on("ticket", onTicketTicket)
const onContactTicket = (data) => {
if (data.action === "update") {
setContact((prevState) => {
if (prevState.id === data.contact?.id) {
@ -156,9 +168,11 @@ const Ticket = () => {
return prevState
})
}
})
}
socket.on("remoteTickesControllIdleOpen", (data) => {
socket.on("contact", onContactTicket)
const onRemoteTicketsControllIdleOpenTicket = (data) => {
if (data.action === "update") {
let url_ticketId
try {
@ -175,10 +189,15 @@ const Ticket = () => {
console.log('error on try do the send seen: ', error)
}
}
})
}
socket.on("remoteTickesControllIdleOpen", onRemoteTicketsControllIdleOpenTicket)
return () => {
socket.disconnect()
socket.off("connect", onConnectTicket)
socket.off("ticket", onTicketTicket)
socket.off("contact", onContactTicket)
socket.off("remoteTickesControllIdleOpen", onRemoteTicketsControllIdleOpenTicket)
}
}, [ticketId, history])

18
frontend/src/components/TicketListItem/index.js
View File

@ -22,7 +22,8 @@ import MarkdownWrapper from "../MarkdownWrapper"
import { Tooltip } from "@material-ui/core"
import { AuthContext } from "../../context/Auth/AuthContext"
import toastError from "../../errors/toastError"
import openSocket from 'socket.io-client'
//import openSocket from 'socket.io-client'
import { socket } from "../../services/socket"
const useStyles = makeStyles(theme => ({
ticket: {
@ -151,17 +152,18 @@ const TicketListItem = ({ ticket, remoteTicketsControll, settings }) => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('remoteTickesControll', (data) => {
const onRemoteTickesControllTicketListItem = (data) => {
console.log('REMOTE TICKETS CONTROLL UPDATE2: ', data.tickets)
if (data.action === 'update') {
setRemoteTicketsControll(data.tickets)
}
})
}
socket.on('remoteTickesControll', onRemoteTickesControllTicketListItem)
socket.on('settings', (data) => {
const onSettingsTicketListItem = (data) => {
if (data.action === 'update') {
setSettings((prevState) => {
const aux = [...prevState]
@ -170,11 +172,13 @@ const TicketListItem = ({ ticket, remoteTicketsControll, settings }) => {
return aux
})
}
})
}
socket.on('settings', onSettingsTicketListItem)
return () => {
socket.disconnect()
socket.off('remoteTickesControll', onRemoteTickesControllTicketListItem);
socket.off('settings', onSettingsTicketListItem);
}
}, [])

43
frontend/src/components/TicketsList/index.js
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect, useReducer, useContext } from "react"
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
import { makeStyles } from "@material-ui/core/styles"
import List from "@material-ui/core/List"
@ -243,27 +243,29 @@ const TicketsList = (props) => {
// if (tab=='search')return
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
const shouldUpdateTicket = ticket =>
(status === ticket.status) &&
(!ticket.userId || ticket.userId === user?.id || showAll) &&
(!ticket.queueId || selectedQueueIds.indexOf(ticket.queueId) > -1)
const notBelongsToUserQueues = ticket =>
ticket.queueId && selectedQueueIds.indexOf(ticket.queueId) === -1
socket.on("connect", () => {
const onConnectTicketList = () => {
if (status) {
socket.emit("joinTickets", status)
} else {
socket.emit("joinNotification")
}
}
})
onConnectTicketList()
socket.on("connect", onConnectTicketList)
socket.on("ticket", data => {
const onTicketTicketList = data => {
if (data.action === "updateUnread") {
@ -292,10 +294,11 @@ const TicketsList = (props) => {
if (data.action === "delete") {
dispatch({ type: "DELETE_TICKET", payload: data.ticketId })
}
})
}
socket.on("ticket", onTicketTicketList)
socket.on("appMessage", data => {
const onAppMessageTicketList = data => {
if (data.action === "create" && shouldUpdateTicket(data.ticket)) {
@ -307,7 +310,9 @@ const TicketsList = (props) => {
payload: data,
})
}
})
}
socket.on("appMessage", onAppMessageTicketList)
socket.on("contact", data => {
if (data.action === "update") {
@ -318,16 +323,16 @@ const TicketsList = (props) => {
}
})
socket.on('remoteTickesControll', (data) => {
const onRemoteTickesControllTicketList = (data) => {
console.log('REMOTE TICKETS CONTROLL UPDATE 1: ', data.tickets)
if (data.action === 'update') {
setRemoteTicketsControll(data.tickets)
}
})
}
socket.on('remoteTickesControll', onRemoteTickesControllTicketList)
socket.on('settings', (data) => {
const onSettingsTicketList = (data) => {
if (data.action === 'update') {
setSettings((prevState) => {
const aux = [...prevState]
@ -336,11 +341,17 @@ const TicketsList = (props) => {
return aux
})
}
})
}
socket.on('settings', onSettingsTicketList)
return () => {
socket.disconnect()
socket.off("ticket", onTicketTicketList)
socket.off('appMessage', onAppMessageTicketList);
socket.removeAllListeners("contact")
socket.off('connect', onConnectTicketList);
socket.off('settings', onSettingsTicketList);
socket.off('remoteTickesControll', onRemoteTickesControllTicketList);
}
}, [status, showAll, user, selectedQueueIds, tab])

1
frontend/src/components/TicketsManager/index.js
View File

@ -19,7 +19,6 @@ import FindInPageIcon from '@material-ui/icons/FindInPage'
import FormControlLabel from "@material-ui/core/FormControlLabel"
import Switch from "@material-ui/core/Switch"
import openSocket from "socket.io-client"
import NewTicketModal from "../NewTicketModal"
import TicketsList from "../TicketsList"

15
frontend/src/components/TransferTicketModal/index.js
View File

@ -1,6 +1,7 @@
import React, { useState, useContext, useMemo, useEffect } from "react"
import { useHistory } from "react-router-dom"
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
import Button from "@material-ui/core/Button"
import Dialog from "@material-ui/core/Dialog"
@ -110,9 +111,9 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('settings', (data) => {
const onSettingsTransferTicketModal = (data) => {
console.log('settings updated ----------------------------xxxxxxxxxxxx')
if (data.action === 'update') {
@ -123,10 +124,12 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
return aux
})
}
})
}
socket.on('settings', onSettingsTransferTicketModal)
return () => {
socket.disconnect()
socket.off("settings", onSettingsTransferTicketModal)
}
}, [])
@ -259,7 +262,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
required
>
<MenuItem style={{ background: "white", }} value={''}>&nbsp;</MenuItem>
{queues.map((queue) => (
{queues?.map((queue) => (
<MenuItem
key={queue.id}
value={queue.id}

14
frontend/src/hooks/useAuth.js/index.js
View File

@ -1,6 +1,7 @@
import { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import openSocket from 'socket.io-client'
//import openSocket from 'socket.io-client'
import { socket } from '../../services/socket'
import { toast } from 'react-toastify'
@ -90,7 +91,7 @@ const useAuth = () => {
}, [])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('user', (data) => {
if (data.action === 'update' && data.user.id === user.id) {
@ -98,7 +99,7 @@ const useAuth = () => {
}
})
socket.on('settings', (data) => {
const onSettingsAuth = (data) => {
if (data.action === 'update') {
setSetting((prevState) => {
const aux = [...prevState]
@ -107,10 +108,13 @@ const useAuth = () => {
return aux
})
}
})
}
socket.on('settings', onSettingsAuth)
return () => {
socket.disconnect()
socket.removeAllListeners('user');
socket.off('settings', onSettingsAuth);
}
}, [user])

10
frontend/src/hooks/useWhatsApps/index.js
View File

@ -1,5 +1,7 @@
import { useState, useEffect, useReducer } from "react";
import openSocket from "socket.io-client";
//import openSocket from "socket.io-client";
import { socket } from "../../services/socket";
import toastError from "../../errors/toastError";
@ -126,7 +128,7 @@ const useWhatsApps = () => {
}, []);
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("whatsapp", data => {
if (data.action === "update") {
@ -158,7 +160,9 @@ const useWhatsApps = () => {
return () => {
socket.disconnect();
socket.removeAllListeners('whatsapp');
socket.removeAllListeners('whatsappSession');
socket.removeAllListeners('whatsappSessionMonit');
};
}, []);

13
frontend/src/layout/MainListItems.js
View File

@ -31,7 +31,8 @@ import { i18n } from '../translate/i18n'
import { WhatsAppsContext } from '../context/WhatsApp/WhatsAppsContext'
import { AuthContext } from '../context/Auth/AuthContext'
import { Can } from '../components/Can'
import openSocket from 'socket.io-client'
//import openSocket from 'socket.io-client'
import { socket } from '../services/socket'
import api from '../services/api'
@ -118,9 +119,9 @@ const MainListItems = (props) => {
}
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('settings', (data) => {
const onSettingsMainListItem = (data) => {
if (data.action === 'update') {
setSettings((prevState) => {
const aux = [...prevState]
@ -129,10 +130,12 @@ const MainListItems = (props) => {
return aux
})
}
})
}
socket.on('settings', onSettingsMainListItem)
return () => {
socket.disconnect()
socket.off('settings', onSettingsMainListItem);
}
}, [])

21
frontend/src/pages/Campaign/index.js
View File

@ -1,7 +1,8 @@
import React, { useState, useCallback, useEffect, useReducer, useContext } from 'react'
import { toast } from 'react-toastify'
import openSocket from 'socket.io-client'
//import openSocket from 'socket.io-client'
import { socket } from '../../services/socket'
import { makeStyles } from '@material-ui/core/styles'
import { green } from '@material-ui/core/colors'
@ -296,10 +297,9 @@ const Campaign = () => {
}
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("contactsBulkInsertOnQueueStatus", (data) => {
const onContactsBulkCampaing = (data) => {
if (data.action === 'update') {
if (String(data.insertOnQueue.adminId) === String(user.id)) {
@ -312,19 +312,24 @@ const Campaign = () => {
}
}
})
}
socket.on('campaign', (data) => {
socket.on("contactsBulkInsertOnQueueStatus", onContactsBulkCampaing)
const onCampaignCampaign = (data) => {
if (data.action === 'update') {
dispatch({ type: "UPDATE_CAMPAIGNS", payload: data.campaign })
}
})
}
socket.on('campaign', onCampaignCampaign)
return () => {
socket.disconnect()
socket.off("campaign", onCampaignCampaign)
socket.off("contactsBulkInsertOnQueueStatus", onContactsBulkCampaing)
}
}, [user.id])

20
frontend/src/pages/Connections/index.js
View File

@ -2,7 +2,8 @@ import React, { useState, useCallback, useEffect, useContext } from 'react'
import { toast } from 'react-toastify'
import { format, parseISO } from 'date-fns'
import openSocket from 'socket.io-client'
//import openSocket from 'socket.io-client'
import { socket } from '../../services/socket'
import { makeStyles } from '@material-ui/core/styles'
import { green, red, yellow, grey } from '@material-ui/core/colors'
@ -451,15 +452,17 @@ const Connections = () => {
}, [])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('diskSpaceMonit', (data) => {
const onDiskSpaceMonitConnections = (data) => {
if (data.action === 'update') {
setDiskSpaceInfo(data.diskSpace)
}
})
}
socket.on('settings', (data) => {
socket.on('diskSpaceMonit', onDiskSpaceMonitConnections)
const onSettingsConnections = (data) => {
if (data.action === 'update') {
setSettings((prevState) => {
const aux = [...prevState]
@ -468,10 +471,13 @@ const Connections = () => {
return aux
})
}
})
}
socket.on('settings', onSettingsConnections)
return () => {
socket.disconnect()
socket.off("settings", onSettingsConnections)
socket.off("diskSpaceMonit", onDiskSpaceMonitConnections)
}
}, [])

20
frontend/src/pages/Contacts/index.js
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect, useReducer, useCallback, useContext } from "react"
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
import { toast } from "react-toastify"
import { useHistory } from "react-router-dom"
@ -260,9 +261,9 @@ const Contacts = () => {
}, [searchParam, pageNumber])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("contactsBulkInsertOnQueueStatus", (data) => {
const onContactsBulkContacts = (data) => {
if (data.action === 'update') {
if (String(data.insertOnQueue.adminId) === String(user.id)) {
@ -278,9 +279,11 @@ const Contacts = () => {
}
}
})
}
socket.on("contact", (data) => {
socket.on("contactsBulkInsertOnQueueStatus", onContactsBulkContacts)
const onContactContacts = (data) => {
if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_CONTACTS", payload: data.contact })
}
@ -288,10 +291,13 @@ const Contacts = () => {
if (data.action === "delete") {
dispatch({ type: "DELETE_CONTACT", payload: +data.contactId })
}
})
}
socket.on("contact", onContactContacts)
return () => {
socket.disconnect()
socket.off("contact", onContactContacts)
socket.off("contactsBulkInsertOnQueueStatus", onContactsBulkContacts)
}
}, [user, history])

27
frontend/src/pages/Dashboard/index.js
View File

@ -17,7 +17,8 @@ import { AuthContext } from "../../context/Auth/AuthContext"
import { i18n } from "../../translate/i18n";
import Chart from "./Chart"
import PieChart from "./PieChart"
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
import api from "../../services/api"
import { Can } from "../../components/Can"
@ -356,32 +357,40 @@ const Dashboard = () => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("ticketStatus", (data) => {
const onTicketsStatusDashboard = (data) => {
if (data.action === "update") {
setStatus("")
setStatus(data.ticketStatus.status)
}
})
}
socket.on("onlineStatus", (data) => {
socket.on("ticketStatus", onTicketsStatusDashboard)
const onOnlineStatusDashboard = (data) => {
if (data.action === "logout" || data.action === "update") {
dispatch({ type: "UPDATE_STATUS_ONLINE", payload: data.userOnlineTime })
} else if (data.action === "delete") {
dispatch({ type: "DELETE_USER_STATUS", payload: data.userOnlineTime })
}
})
}
socket.on("user", (data) => {
socket.on("onlineStatus", onOnlineStatusDashboard)
const onUserDashboard = (data) => {
if (data.action === "delete") {
dispatch({ type: "DELETE_USER", payload: +data.userId })
}
})
}
socket.on("user", onUserDashboard)
return () => {
socket.disconnect()
socket.off("user", onUserDashboard)
socket.off("onlineStatus", onOnlineStatusDashboard)
socket.off("ticketStatus", onTicketsStatusDashboard)
}
}, [])

13
frontend/src/pages/Position/index.js
View File

@ -1,5 +1,6 @@
import React, { useState, useContext, useEffect, useReducer } from "react"
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
import {
Button,
@ -125,9 +126,9 @@ const Position = () => {
}, [searchParam, pageNumber])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("position", (data) => {
const onPositionPosition = (data) => {
if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_POSITIONS", payload: data.position })
}
@ -138,10 +139,12 @@ const Position = () => {
payload: +data.positionId,
})
}
})
}
socket.on("position", onPositionPosition)
return () => {
socket.disconnect()
socket.off("position", onPositionPosition)
}
}, [])

20
frontend/src/pages/Queues/index.js
View File

@ -1,6 +1,7 @@
import React, { useEffect, useReducer, useState, useContext } from 'react'
import openSocket from 'socket.io-client'
//import openSocket from 'socket.io-client'
import { socket } from '../../services/socket'
import {
Button,
@ -123,9 +124,9 @@ const Queues = () => {
}, [])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('queue', (data) => {
const onQueueQueues = (data) => {
if (data.action === 'update' || data.action === 'create') {
dispatch({ type: 'UPDATE_QUEUES', payload: data.queue })
}
@ -133,9 +134,11 @@ const Queues = () => {
if (data.action === 'delete') {
dispatch({ type: 'DELETE_QUEUE', payload: data.queueId })
}
})
}
socket.on('settings', (data) => {
socket.on('queue', onQueueQueues)
const onSettingsQueues = (data) => {
if (data.action === 'update') {
setSettings((prevState) => {
const aux = [...prevState]
@ -144,10 +147,13 @@ const Queues = () => {
return aux
})
}
})
}
socket.on('settings', onSettingsQueues)
return () => {
socket.disconnect()
socket.off("settings", onSettingsQueues)
socket.off("queue", onQueueQueues)
}
}, [])

12
frontend/src/pages/QuickAnswers/index.js
View File

@ -1,5 +1,6 @@
import React, { useState, useContext, useEffect, useReducer } from "react"
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
import {
Button,
@ -125,9 +126,9 @@ const QuickAnswers = () => {
}, [searchParam, pageNumber])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("quickAnswer", (data) => {
const onQuickAnswerQuickAnswers = (data) => {
if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_QUICK_ANSWERS", payload: data.quickAnswer })
}
@ -138,10 +139,11 @@ const QuickAnswers = () => {
payload: +data.quickAnswerId,
})
}
})
}
socket.on("quickAnswer", onQuickAnswerQuickAnswers)
return () => {
socket.disconnect()
socket.off("quickAnswer", onQuickAnswerQuickAnswers)
}
}, [])

29
frontend/src/pages/Report/index.js
View File

@ -18,7 +18,8 @@ import MaterialTable from 'material-table'
import LogoutIcon from '@material-ui/icons/CancelOutlined'
import apiBroker from "../../services/apiBroker"
import fileDownload from 'js-file-download'
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
import { i18n } from "../../translate/i18n"
import Switch from '@mui/material/Switch'
@ -591,9 +592,9 @@ const Report = () => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("queryOnQueueStatus", (data) => {
const onQueryOnQueueStatusReport = (data) => {
if (data.action === 'update') {
if (String(data.queryOnQueue.adminId) === String(userA.id)) {
@ -604,12 +605,11 @@ const Report = () => {
}
}
})
}
if (reportOption === '2') {
socket.on("queryOnQueueStatus", onQueryOnQueueStatusReport)
socket.on("onlineStatus", (data) => {
const onOnlineStatusReport = (data) => {
let date = new Date().toLocaleDateString('pt-BR').split('/')
let dateToday = `${date[2]}-${date[1]}-${date[0]}`
@ -624,15 +624,20 @@ const Report = () => {
dispatchQ({ type: "DELETE_USER_STATUS", payload: data.userOnlineTime })
}
})
}
socket.on("user", (data) => {
const onUserReport = (data) => {
if (data.action === "delete") {
dispatch({ type: "DELETE_USER", payload: +data.userId })
}
})
}
if (reportOption === '2') {
socket.on("onlineStatus", onOnlineStatusReport)
socket.on("user", onUserReport)
}
else if (reportOption === "1") {
@ -641,7 +646,9 @@ const Report = () => {
}
return () => {
socket.disconnect()
socket.off("onlineStatus", onOnlineStatusReport)
socket.off("user", onUserReport)
socket.off("queryOnQueueStatus", onQueryOnQueueStatusReport)
}

16
frontend/src/pages/SchedulesReminder/index.js
View File

@ -28,8 +28,8 @@ import { render } from '@testing-library/react'
// import Modal from "../../../..ChatEnd/ModalChatEnd";
import Modal from "../../components/ModalUpdateScheduleReminder"
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
@ -204,11 +204,9 @@ const SchedulesReminder = () => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("schedulingNotify", (data) => {
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
const onSchedulingNotifySchedulesRemider = (data) => {
setLoading(true)
@ -228,10 +226,12 @@ const SchedulesReminder = () => {
setLoading(false)
})
}
socket.on("schedulingNotify", onSchedulingNotifySchedulesRemider)
return () => {
socket.disconnect()
socket.off("schedulingNotify", onSchedulingNotifySchedulesRemider)
}
}, [])

19
frontend/src/pages/Settings/index.js
View File

@ -1,5 +1,6 @@
import React, { useState, useEffect, useContext } from 'react'
import openSocket from 'socket.io-client'
//import openSocket from 'socket.io-client'
import { socket } from '../../services/socket.js'
import { makeStyles } from '@material-ui/core/styles'
import Paper from '@material-ui/core/Paper'
@ -124,9 +125,9 @@ const Settings = () => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on('settings', (data) => {
const onSettingsSettings = (data) => {
console.log('settings updated ----------------------------')
if (data.action === 'update') {
@ -137,10 +138,12 @@ const Settings = () => {
return aux
})
}
})
}
socket.on('settings', onSettingsSettings)
return () => {
socket.disconnect()
socket.off("settings", onSettingsSettings)
}
}, [])
@ -179,7 +182,11 @@ const Settings = () => {
}
const getSettingValue = (key, _obj = false) => {
const { value, obj } = settings.find((s) => s.key === key)
//const { value, obj } = settings.find((s) => s.key === key)
const setting = settings.find((s) => s.key === key)
const value = setting?.value || ""
const obj = setting?.obj || null
if (_obj)
return obj

13
frontend/src/pages/StatusChatEnd/index.js
View File

@ -1,5 +1,6 @@
import React, { useState, useContext, useEffect, useReducer } from "react"
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
import {
Button,
@ -131,9 +132,9 @@ const StatusChatEnd = () => {
}, [searchParam, pageNumber])
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("statusChatEnd", (data) => {
const onStatusChatEndStatusChatEnd = (data) => {
if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_STATUS_CHAT_END", payload: data.statusChatEnd })
}
@ -144,10 +145,12 @@ const StatusChatEnd = () => {
payload: +data.statusChatEndId,
})
}
})
}
socket.on("statusChatEnd", onStatusChatEndStatusChatEnd)
return () => {
socket.disconnect()
socket.off("statusChatEnd", onStatusChatEndStatusChatEnd)
}
}, [])

18
frontend/src/pages/Users/index.js
View File

@ -1,6 +1,7 @@
import React, { useState, useEffect, useReducer, useContext } from "react"
import { toast } from "react-toastify"
import openSocket from "socket.io-client"
//import openSocket from "socket.io-client"
import { socket } from "../../services/socket"
import { makeStyles } from "@material-ui/core/styles"
import Paper from "@material-ui/core/Paper"
@ -165,9 +166,9 @@ const Users = () => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
//const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("user", (data) => {
const onUserUsers = (data) => {
if (data.action === "update" || data.action === "create") {
dispatch({ type: "UPDATE_USERS", payload: data.user })
}
@ -175,10 +176,11 @@ const Users = () => {
if (data.action === "delete") {
dispatch({ type: "DELETE_USER", payload: +data.userId })
}
})
}
socket.on("user", onUserUsers)
socket.on('settings', (data) => {
const onSettingsUsers = (data) => {
if (data.action === 'update') {
setSettings((prevState) => {
const aux = [...prevState]
@ -187,10 +189,12 @@ const Users = () => {
return aux
})
}
})
}
socket.on('settings', onSettingsUsers)
return () => {
socket.disconnect()
socket.off("settings", onSettingsUsers)
socket.off("user", onUserUsers)
}
}, [])

2
frontend/src/services/api.js
View File

@ -1,7 +1,7 @@
import axios from "axios";
const api = axios.create({
baseURL: process.env.REACT_APP_BACKEND_URL,
baseURL: process.env.REACT_APP_BACKEND_URL + "/api",
withCredentials: true,
});

13
frontend/src/services/socket.js 100644
View File

@ -0,0 +1,13 @@
import { io } from 'socket.io-client';
// "undefined" means the URL will be computed from the `window.location` object
const URL = process.env.REACT_APP_BACKEND_URL
export const socket = io(URL, {
path: "/api-ws/socketio",
withCredentials: true,
extraHeaders: {
"my-custom-header": "abcd"
},
// transports: ['websocket', 'polling']
});