| @@ -1,5 +1,6 @@ | |||
| import React from "react"; | |||
| // import io from 'socket.io-client'; | |||
| /*eslint-disable*/ | |||
| import React, {useState, useEffect} from "react"; | |||
| import io from "socket.io-client"; | |||
| import { Router } from "react-router-dom"; | |||
| import { Helmet } from "react-helmet-async"; | |||
| import i18next from "i18next"; | |||
| @@ -11,69 +12,94 @@ import GlobalStyle from "./components/Styles/globalStyles"; | |||
| import { ToastContainer } from "react-toastify"; | |||
| import "react-toastify/dist/ReactToastify.css"; | |||
| // const URL = "http://192.168.88.143:3001"; | |||
| // const socket = io(URL, {autoConnect: true, transports: ['websocket']}); | |||
| const URL = "https://trampa-api-test.dilig.net/"; | |||
| export const socket = io(URL, { autoConnect: true, transports: ["websocket"] }); | |||
| const App = () => { | |||
| // console.log(io) | |||
| console.log(socket); | |||
| // const [isConnected, setIsConnected] = useState(socket.connected); | |||
| // const [lastPong, setLastPong] = useState(null); | |||
| // console.log(); | |||
| // useEffect(() => { | |||
| // socket.on("connect", (client) => { | |||
| // console.log(client); | |||
| // setIsConnected(true); | |||
| // }); | |||
| // // socket.on("connect_error", (err) => { | |||
| // // console.log(err); | |||
| // // }); | |||
| const [isConnected, setIsConnected] = useState(socket.connected); | |||
| const [lastPong, setLastPong] = useState(null); | |||
| console.log(); | |||
| useEffect(() => { | |||
| socket.auth = { | |||
| // userId: "62de57c6dff6f986e43d14ec", | |||
| userId: "62de5844dff6f986e43d14f6", | |||
| sessionID: localStorage.getItem("sessionID"), | |||
| }; | |||
| socket.on("connect", (client) => { | |||
| console.log("client: ", client); | |||
| setIsConnected(true); | |||
| }); | |||
| socket.on("session", ({ sessionID, userID }) => { | |||
| localStorage.setItem("sessionID", sessionID); | |||
| localStorage.setItem("userID", userID); | |||
| console.log("sessionID: ", sessionID); | |||
| console.log("userID: ", userID); | |||
| }); | |||
| // socket.on("connect_error", (err) => { | |||
| // console.log(err); | |||
| // }); | |||
| // socket.on("connection", (client) => { | |||
| // console.log(client); | |||
| // }); | |||
| socket.on("connection", (client) => { | |||
| console.log(client); | |||
| }); | |||
| // socket.on("disconnect", () => { | |||
| // setIsConnected(false); | |||
| // }); | |||
| socket.on("disconnect", () => { | |||
| setIsConnected(false); | |||
| }); | |||
| // // socket.on('emit', (client) => { | |||
| // // console.log(client); | |||
| // // }) | |||
| // socket.on("sokkk", (clg) => { | |||
| // console.log(clg); | |||
| // }) | |||
| // // socket.onAny((event, ...args) => { | |||
| // // console.log(event, args); | |||
| // // }); | |||
| // socket.on('povratna', (data) => { | |||
| // console.log(data) | |||
| socket.on("user disconnected", (userID) => { | |||
| console.log(userID); | |||
| }); | |||
| // }) | |||
| // socket.on('emit', (client) => { | |||
| // console.log(client); | |||
| // }) | |||
| socket.on("sokkk", (clg) => { | |||
| console.log(clg); | |||
| }); | |||
| // socket.onAny((event, ...args) => { | |||
| // console.log(event, args); | |||
| // }); | |||
| socket.on("povratna", (data) => { | |||
| console.log(data); | |||
| }); | |||
| socket.on("private_message", (data) => { | |||
| console.log(data); | |||
| }); | |||
| // // socket.open; | |||
| // socket.open; | |||
| // socket.on("pong", () => { | |||
| // setLastPong(new Date().toISOString()); | |||
| // }); | |||
| socket.on("pong", () => { | |||
| setLastPong(new Date().toISOString()); | |||
| }); | |||
| // // socket.connect(); | |||
| // socket.connect(); | |||
| // return () => { | |||
| // socket.off("connect"); | |||
| // socket.off("disconnect"); | |||
| // socket.off("pong"); | |||
| // }; | |||
| // }, []); | |||
| // const handleClick = () => { | |||
| // // socket.connect(); | |||
| // // socket.emit("sokkk 2", "sock"); | |||
| // // socket.emit("sock") | |||
| // }; | |||
| // const sendPing = () => { | |||
| // socket.emit("sokkk", { | |||
| // poruka: "Za Duleta" | |||
| // }); | |||
| // }; | |||
| return () => { | |||
| socket.off("connect"); | |||
| socket.off("disconnect"); | |||
| socket.off("pong"); | |||
| }; | |||
| }, []); | |||
| const handleClick = () => { | |||
| // socket.connect(); | |||
| // socket.emit("sokkk 2", "sock"); | |||
| // socket.emit("sock") | |||
| }; | |||
| const sendPing = () => { | |||
| socket.emit("private_message", { | |||
| text: "Probica", | |||
| // toUserId: "62de5844dff6f986e43d14f6", | |||
| toUserId: "62de57c6dff6f986e43d14ec", | |||
| chatId: "62eb8424632e1112ef467750", | |||
| }); | |||
| }; | |||
| const disconnect = () => { | |||
| // socket.disconnect(); | |||
| socket.disconnect(); | |||
| }; | |||
| console.log(socket); | |||
| return ( | |||
| <Router history={history}> | |||
| <Helmet> | |||
| @@ -83,14 +109,16 @@ const App = () => { | |||
| <Header /> | |||
| <GlobalStyle /> | |||
| <ToastContainer /> | |||
| {/* <div> | |||
| {/* <div style={{ position: "relative", top: "100px", left: "400px" }}> | |||
| <p>Connected: {"" + isConnected}</p> | |||
| <br /> | |||
| <p>Last pong: {lastPong || "-"}</p> | |||
| <br /> | |||
| <button onClick={sendPing}>Send ping</button> | |||
| <br /> | |||
| <button onClick={disconnect}>Disconnect</button> | |||
| </div> */} | |||
| <AppRoutes /> | |||
| <AppRoutes /> | |||
| </StyledEngineProvider> | |||
| </Router> | |||
| ); | |||