From 501cf878eceebe6c52fd01feb70333bf736922de Mon Sep 17 00:00:00 2001 From: Jahongir Yusupov <91022355+jahongiry@users.noreply.github.com> Date: Sun, 18 Feb 2024 12:31:17 +0500 Subject: [PATCH] Add test chat --- package-lock.json | 80 ++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/pages/chat/Chat.js | 24 +++++++++++++ 3 files changed, 105 insertions(+) diff --git a/package-lock.json b/package-lock.json index d6782c9..e6c2c84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "react-toastify": "^10.0.4", "react-use-websocket": "^4.5.0", "slick-carousel": "^1.8.1", + "socket.io-client": "^4.7.4", "swiper": "^11.0.5", "telegraf": "^4.15.3", "web-vitals": "^2.1.4" @@ -3552,6 +3553,11 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@socket.io/component-emitter": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz", + "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==" + }, "node_modules/@surma/rollup-plugin-off-main-thread": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz", @@ -7483,6 +7489,46 @@ "node": ">= 0.8" } }, + "node_modules/engine.io-client": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz", + "integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.11.0", + "xmlhttprequest-ssl": "~2.0.0" + } + }, + "node_modules/engine.io-client/node_modules/ws": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/engine.io-parser": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz", + "integrity": "sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/enhanced-resolve": { "version": "5.15.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz", @@ -16464,6 +16510,32 @@ "jquery": ">=1.8.0" } }, + "node_modules/socket.io-client": { + "version": "4.7.4", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.4.tgz", + "integrity": "sha512-wh+OkeF0rAVCrABWQBaEjLfb7DVPotMbu0cgWgyR0v6eA4EoVnAwcIeIbcdTE3GT/H3kbdLl7OoH2+asoDRIIg==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.2", + "engine.io-client": "~6.5.2", + "socket.io-parser": "~4.2.4" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", + "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18824,6 +18896,14 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/package.json b/package.json index 97bb645..dbdc892 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "react-toastify": "^10.0.4", "react-use-websocket": "^4.5.0", "slick-carousel": "^1.8.1", + "socket.io-client": "^4.7.4", "swiper": "^11.0.5", "telegraf": "^4.15.3", "web-vitals": "^2.1.4" diff --git a/src/pages/chat/Chat.js b/src/pages/chat/Chat.js index 323aa12..415262e 100644 --- a/src/pages/chat/Chat.js +++ b/src/pages/chat/Chat.js @@ -5,9 +5,11 @@ import './chat.css'; import ChatHeader from './charHeader/chatHeader'; import { fetchChats } from '../../slices/chatSlice'; import { selectCurrentUser } from '../../slices/authSlice'; +import io from 'socket.io-client'; const Chat = () => { const [inputValue, setInputValue] = useState(''); + const [socket, setSocket] = useState(null); const dispatch = useDispatch(); const location = useLocation(); const { selectedChatId, chatUsers } = location.state || {}; @@ -15,6 +17,19 @@ const Chat = () => { const messages = chats[selectedChatId]?.messages || []; const user = useSelector(selectCurrentUser); const messagesEndRef = useRef(null); + const token = localStorage.getItem('token'); + + useEffect(() => { + if (token) { + const newSocket = io('https://cyberswap.uz', { + query: { token: encodeURIComponent(token) }, + transports: ['websocket'], // use WebSocket first, fallback to polling if necessary + }); + setSocket(newSocket); + + return () => newSocket.close(); + } + }, [token]); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); @@ -27,10 +42,19 @@ const Chat = () => { const handleSubmit = (event) => { event.preventDefault(); if (inputValue.trim()) { + socket.emit('message', { content: inputValue, chat_id: selectedChatId }); setInputValue(''); } }; + useEffect(() => { + if (socket) { + socket.on('message', (newMessage) => { + console.log(newMessage); + }); + } + }, [socket]); + const getMessageClass = (message) => { if (message.content.length <= 20) { if (message.content.length <= 1) {