diff --git a/backend/package.json b/backend/package.json
index 7bfa886..b9dd70b 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -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",
diff --git a/backend/src/libs/socket.ts b/backend/src/libs/socket.ts
index 65382d6..8412760 100644
--- a/backend/src/libs/socket.ts
+++ b/backend/src/libs/socket.ts
@@ -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,16 +46,32 @@ let dateTime = splitDateTime(
new Date(format(new Date(), "yyyy-MM-dd HH:mm:ss", { locale: ptBR }))
);
-export const initIO = (httpServer: Server): SocketIO => {
+
+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");
+ logger.info("Client Connected");
socket.on("joinWhatsSession", (whatsappId: string) => {
logger.info(`A client joined a joinWhatsSession channel: ${whatsappId}`);
@@ -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: ",
diff --git a/frontend/package.json b/frontend/package.json
index 681cd4b..d30e4f4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -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"
diff --git a/frontend/server.js b/frontend/server.js
index a05ba32..ff983c1 100644
--- a/frontend/server.js
+++ b/frontend/server.js
@@ -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);
diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js
index 7e9126c..60b7a71 100644
--- a/frontend/src/components/MessagesList/index.js
+++ b/frontend/src/components/MessagesList/index.js
@@ -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"
@@ -34,7 +36,7 @@ import whatsBackground from "../../assets/wa-background.png"
import api from "../../services/api"
import toastError from "../../errors/toastError"
-import { countTicketMsgContext } from "../../context/CountTicketMsgProvider/CountTicketMsgProvider"
+import { countTicketMsgContext } from "../../context/CountTicketMsgProvider/CountTicketMsgProvider"
const useStyles = makeStyles((theme) => ({
messagesListWrapper: {
@@ -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])
@@ -949,4 +962,4 @@ const MessagesList = ({ ticketId, isGroup }) => {
)
}
-export default MessagesList
\ No newline at end of file
+export default MessagesList
diff --git a/frontend/src/components/NotificationsPopOver/index.js b/frontend/src/components/NotificationsPopOver/index.js
index 866c4a4..d3dae05 100644
--- a/frontend/src/components/NotificationsPopOver/index.js
+++ b/frontend/src/components/NotificationsPopOver/index.js
@@ -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"
@@ -115,24 +116,24 @@ const NotificationsPopOver = () => {
useEffect(() => {
const fetchSession = async () => {
- try {
- const { data } = await api.get('/settings')
- setSettings(data.settings)
- } catch (err) {
- toastError(err)
- }
+ try {
+ const { data } = await api.get('/settings')
+ setSettings(data.settings)
+ } catch (err) {
+ toastError(err)
+ }
}
fetchSession()
- }, [])
+ }, [])
- const getSettingValue = (key) => {
+ const getSettingValue = (key) => {
const { value } = settings.find((s) => s.key === key)
return value
- }
+ }
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,20 +273,25 @@ const NotificationsPopOver = () => {
handleNotifications(data)
}
- })
+ }
- socket.on('notifyPeding', data =>{
- if(settings?.length > 0 && getSettingValue('notificationTransferQueue') === 'enabled') 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])
- const handleNotifications = (data, notify) => {
+ const handleNotifications = (data, notify) => {
let isQueue = false;
- if(!notify){
+ if (!notify) {
const { message, contact, ticket } = data
const options = {
@@ -301,14 +304,14 @@ const NotificationsPopOver = () => {
const notification = new Notification(
`${i18n.t("tickets.notification.message")} ${contact.name}`,
options
- )
-
- notification.onclick = e => {
- e.preventDefault()
+ )
+
+ notification.onclick = e => {
+ e.preventDefault()
window.focus()
historyRef.current.push(`/tickets/${ticket.id}`)
}
-
+
setDesktopNotifications(prevState => {
const notfiticationIndex = prevState.findIndex(
n => n.tag === notification.tag
@@ -319,15 +322,15 @@ const NotificationsPopOver = () => {
}
return [notification, ...prevState]
})
- }else{
- user.queues.forEach(queue =>{
- if(queue.id === notify.data?.queue?.id){
+ } else {
+ user.queues.forEach(queue => {
+ if (queue.id === notify.data?.queue?.id) {
isQueue = true;
}
})
- if(!isQueue){
+ if (!isQueue) {
return;
- }else {
+ } else {
const notification = new Notification(`${i18n.t("tickets.notification.messagePeding")} ${notify.data?.queue?.name}`);
notification.onclick = e => {
e.preventDefault()
@@ -346,7 +349,7 @@ const NotificationsPopOver = () => {
return [notification, ...prevState]
})
}
- }
+ }
soundAlertRef.current()
}
diff --git a/frontend/src/components/PositionModal/index.js b/frontend/src/components/PositionModal/index.js
index 4489f8d..537b7cf 100644
--- a/frontend/src/components/PositionModal/index.js
+++ b/frontend/src/components/PositionModal/index.js
@@ -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,
@@ -50,8 +51,8 @@ const useStyles = makeStyles((theme) => ({
}))
const PositionSchema = Yup.object().shape({
- name: Yup.string()
- .required("Required"),
+ name: Yup.string()
+ .required("Required"),
})
const PositionModal = ({
@@ -65,14 +66,14 @@ const PositionModal = ({
const isMounted = useRef(true)
const initialState = {
- name: "",
+ name: "",
}
const [position, setPosition] = useState(initialState)
// const [selectedQueueIds, setSelectedQueueIds] = useState([])
const { setting } = useContext(AuthContext)
const [settings, setSettings] = useState(setting)
-
+
useEffect(() => {
return () => {
@@ -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)
}
}, [])
@@ -140,7 +143,7 @@ const PositionModal = ({
const handleSavePosition = async (values) => {
try {
-
+
if (positionId) {
await api.put(`/positions/${positionId}`, values)
handleClose()
@@ -153,7 +156,7 @@ const PositionModal = ({
handleClose()
toast.success("Cargo salvo com sucesso")
}
-
+
} catch (err) {
toastError(err)
}
@@ -200,7 +203,7 @@ const PositionModal = ({
className={classes.textField}
fullWidth
/>
-
+
{/*
{
((settings && getSettingValue('quickAnswerByQueue') === 'enabled')) && (
diff --git a/frontend/src/components/QrcodeModal/index.js b/frontend/src/components/QrcodeModal/index.js
index dcca527..4c8bd23 100644
--- a/frontend/src/components/QrcodeModal/index.js
+++ b/frontend/src/components/QrcodeModal/index.js
@@ -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);
}
@@ -42,21 +44,23 @@ const QrcodeModal = ({ open, onClose, whatsAppId }) => {
onClose();
}
- if (data.action === "error") {
+ if (data.action === "error") {
- console.log('user.profile: ', user.profile)
+ console.log('user.profile: ', user.profile)
- if(user.profile === 'master'){
+ if (user.profile === 'master') {
alert(data.msg)
- }
-
+ }
+
}
- });
+ }
+
+ socket.on("whatsappSession", onWhatsAppSessionQrCode);
return () => {
- socket.disconnect();
+ socket.off("whatsappSession", onWhatsAppSessionQrCode);
};
}, [whatsAppId, onClose, user.profile]);
diff --git a/frontend/src/components/QueueModal/index.js b/frontend/src/components/QueueModal/index.js
index eb82ee8..776f68d 100644
--- a/frontend/src/components/QueueModal/index.js
+++ b/frontend/src/components/QueueModal/index.js
@@ -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)
}
}, [])
diff --git a/frontend/src/components/QuickAnswersModal/index.js b/frontend/src/components/QuickAnswersModal/index.js
index 10008f8..748c3ce 100644
--- a/frontend/src/components/QuickAnswersModal/index.js
+++ b/frontend/src/components/QuickAnswersModal/index.js
@@ -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,
@@ -79,7 +79,7 @@ const QuickAnswersModal = ({
const [quickAnswer, setQuickAnswer] = useState(initialState)
const [selectedQueueIds, setSelectedQueueIds] = useState([])
const { user, setting, getSettingValue } = useContext(AuthContext)
- const [settings, setSettings] = useState(setting)
+ const [settings, setSettings] = useState(setting)
useEffect(() => {
return () => {
@@ -92,18 +92,18 @@ const QuickAnswersModal = ({
}, [setting])
useEffect(() => {
-
+
setSelectedQueueIds([])
- if (open && selectedQueueIds.length === 0 && !quickAnswerId) {
+ if (open && selectedQueueIds.length === 0 && !quickAnswerId) {
setSelectedQueueIds(user.queues.map(q => q.id))
}
}, [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,14 +112,16 @@ const QuickAnswersModal = ({
return aux
})
}
- })
+ }
+
+ socket.on('settings', onSettingsQuickAnswersModal)
return () => {
- socket.disconnect()
+ socket.off("settings", onSettingsQuickAnswersModal)
}
}, [])
- useEffect(() => {
+ useEffect(() => {
// setSelectedQueueIds([])
@@ -139,7 +141,7 @@ const QuickAnswersModal = ({
if (isMounted.current) {
setQuickAnswer(data)
- if (data?.queues) {
+ if (data?.queues) {
const quickQueueIds = data.queues?.map((queue) => queue.id)
setSelectedQueueIds(quickQueueIds)
}
diff --git a/frontend/src/components/StatusChatEndModal/index.js b/frontend/src/components/StatusChatEndModal/index.js
index 1c18884..765aedb 100644
--- a/frontend/src/components/StatusChatEndModal/index.js
+++ b/frontend/src/components/StatusChatEndModal/index.js
@@ -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)
}
}, [])
diff --git a/frontend/src/components/Ticket/index.js b/frontend/src/components/Ticket/index.js
index dbf78bf..fd7efce 100644
--- a/frontend/src/components/Ticket/index.js
+++ b/frontend/src/components/Ticket/index.js
@@ -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])
diff --git a/frontend/src/components/TicketListItem/index.js b/frontend/src/components/TicketListItem/index.js
index 417b9d1..55b5196 100644
--- a/frontend/src/components/TicketListItem/index.js
+++ b/frontend/src/components/TicketListItem/index.js
@@ -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);
}
}, [])
diff --git a/frontend/src/components/TicketsList/index.js b/frontend/src/components/TicketsList/index.js
index a481700..20ebe2f 100644
--- a/frontend/src/components/TicketsList/index.js
+++ b/frontend/src/components/TicketsList/index.js
@@ -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])
@@ -349,7 +360,7 @@ const TicketsList = (props) => {
if (typeof updateCount === "function") {
updateCount(ticketsList.length)
}
- if (ticketsList && status === "pending"){
+ if (ticketsList && status === "pending") {
setTickets(ticketsList)
}
// else{
diff --git a/frontend/src/components/TicketsManager/index.js b/frontend/src/components/TicketsManager/index.js
index 19b922b..18bd1c8 100644
--- a/frontend/src/components/TicketsManager/index.js
+++ b/frontend/src/components/TicketsManager/index.js
@@ -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"
@@ -193,13 +192,13 @@ const TicketsManager = () => {
setTabOption(tab)
- }, [tab, setTabOption])
+ }, [tab, setTabOption])
useEffect(() => {
if (settings?.length > 0 && getSettingValue('waitingTimeTickets') !== 'enabled') return
- const calculateAverageTime = () => {
+ const calculateAverageTime = () => {
if (tickets.length > 0) {
const now = new Date()
const differenceTime = tickets?.map(ticket => {
@@ -222,10 +221,10 @@ const TicketsManager = () => {
} else return '00:00'
}
- setWaitingTime(calculateAverageTime())
+ setWaitingTime(calculateAverageTime())
const intervalId = setInterval(() => {
- setWaitingTime(calculateAverageTime())
+ setWaitingTime(calculateAverageTime())
}, 10000)
return () => clearInterval(intervalId)
diff --git a/frontend/src/components/TransferTicketModal/index.js b/frontend/src/components/TransferTicketModal/index.js
index 02acdfc..5f2671e 100644
--- a/frontend/src/components/TransferTicketModal/index.js
+++ b/frontend/src/components/TransferTicketModal/index.js
@@ -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)
}
}, [])
@@ -194,7 +197,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
const { data } = await api.get(`/users/all`, {
params: { userId: user.id },
})
-
+
setUsers(data.users)
setQueuesByWhats(data.queues)
setQueues(data.queues)
@@ -228,7 +231,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
{i18n.t("transferTicketModal.title")}
-
+
{/* {i18n.t("transferTicketModal.fieldQueueLabel")} */}
{'Usuário'}
@@ -247,7 +250,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
))}
-
+
{i18n.t("transferTicketModal.fieldQueuePlaceholder")}
@@ -259,7 +262,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
required
>
- {queues.map((queue) => (
+ {queues?.map((queue) => (
+
)}
/>
diff --git a/frontend/src/pages/StatusChatEnd/index.js b/frontend/src/pages/StatusChatEnd/index.js
index 7424a9b..9a6b480 100644
--- a/frontend/src/pages/StatusChatEnd/index.js
+++ b/frontend/src/pages/StatusChatEnd/index.js
@@ -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,
@@ -115,7 +116,7 @@ const StatusChatEnd = () => {
const { data } = await api.get("/statusChatEnd", {
params: { searchParam, pageNumber },
})
-
+
setChecked(data?.statusChatEnd?.map(s => s.isDefault ? true : false))
dispatch({ type: "LOAD_STATUS_CHAT_END", payload: data.statusChatEnd })
@@ -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)
}
}, [])
@@ -187,14 +190,14 @@ const StatusChatEnd = () => {
}
const handleChange = async (event, statusChatEnd, index) => {
-
+
const newChecked = new Array(statusChatEnds.length).fill(false)
newChecked[index] = event.target.checked
setChecked(newChecked)
try {
const { id } = statusChatEnd
- await api.put(`/statusChatEnd/${id}`, { isDefault: event.target.checked })
+ await api.put(`/statusChatEnd/${id}`, { isDefault: event.target.checked })
toast.success("Status de encerramento padrão salvo com sucesso")
} catch (error) {
diff --git a/frontend/src/pages/Users/index.js b/frontend/src/pages/Users/index.js
index c6c3af2..4a090e7 100644
--- a/frontend/src/pages/Users/index.js
+++ b/frontend/src/pages/Users/index.js
@@ -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)
}
}, [])
diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js
index 209fc12..116eac5 100644
--- a/frontend/src/services/api.js
+++ b/frontend/src/services/api.js
@@ -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,
});
diff --git a/frontend/src/services/socket.js b/frontend/src/services/socket.js
new file mode 100644
index 0000000..e0b4950
--- /dev/null
+++ b/frontend/src/services/socket.js
@@ -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']
+});
\ No newline at end of file