diff --git a/backend/Dockerfile b/backend/Dockerfile new file mode 100644 index 0000000..8fb7e0d --- /dev/null +++ b/backend/Dockerfile @@ -0,0 +1,13 @@ +FROM node:20-alpine + +WORKDIR /app + +COPY package*.json ./ + +RUN npm install + +COPY . . + +EXPOSE 3001 + +CMD ["node", "server.js"] \ No newline at end of file diff --git a/backend/server.js b/backend/server.js index 35ae90d..c8b8500 100644 --- a/backend/server.js +++ b/backend/server.js @@ -1,67 +1,67 @@ const http = require("http"); -const cors = require('cors'); -const express = require('express') -const mongoose = require("mongoose") +const cors = require("cors"); +const express = require("express"); +const mongoose = require("mongoose"); const { Server } = require("socket.io"); const userRoutes = require("./routes/userRoutes"); - const app = express(); -app.use(express.json()) +app.use(express.json()); app.use(cors()); const connectDb = async () => { - try { - await mongoose.connect("mongodb+srv://sankhadiproy23:nqou7frIgFrXYJ71@cluster0.czznsuk.mongodb.net/?retryWrites=true&w=majority"); //will use env variable later - console.log("Database connected"); //log - } - catch (err) { - console.log("Database not connected", err); //log - } + try { + await mongoose.connect( + "mongodb+srv://sankhadiproy23:nqou7frIgFrXYJ71@cluster0.czznsuk.mongodb.net/?retryWrites=true&w=majority" + ); //will use env variable later + console.log("Database connected"); //log + } catch (err) { + console.log("Database not connected", err); //log + } }; connectDb(); const server = http.createServer(app); const io = new Server(server, { - pingTimeout: 60000, - cors: { - origin: (origin, callback) => { - const allowedOrigins = [ - 'https://0dab-2405-201-8011-60aa-b7c8-583e-3cf9-4ba2.ngrok-free.app', - 'http://localhost:5173' - ]; - if (allowedOrigins.indexOf(origin) !== -1 || !origin) { - callback(null, true); - } else { - callback(new Error('Not allowed by CORS')); - } - }, - - methods: ['GET', 'POST'], + pingTimeout: 60000, + cors: { + origin: (origin, callback) => { + const allowedOrigins = [ + "https://0dab-2405-201-8011-60aa-b7c8-583e-3cf9-4ba2.ngrok-free.app", + "http://localhost:5173", + "https://chat-app-three-phi-24.vercel.app/", + ]; + if (allowedOrigins.indexOf(origin) !== -1 || !origin) { + callback(null, true); + } else { + callback(new Error("Not allowed by CORS")); + } }, + + methods: ["GET", "POST"], + }, }); const onlineUsers = new Set(); io.on("connection", (socket) => { - onlineUsers.add(socket.id); - const usersList = Array.from(onlineUsers); - // console.log(`✔ ${socket.id} :` + usersList); //log - io.emit('online-users', usersList); - socket.on('send_message', (data) => { - // console.log("Data:", data); //log - io.emit('recive_message', data); - }); + onlineUsers.add(socket.id); + const usersList = Array.from(onlineUsers); + // console.log(`✔ ${socket.id} :` + usersList); //log + io.emit("online-users", usersList); + socket.on("send_message", (data) => { + // console.log("Data:", data); //log + io.emit("recive_message", data); + }); - socket.on('disconnect', () => { - onlineUsers.delete(socket.id); - const usersList = Array.from(onlineUsers); - // console.log(`✘ ${socket.id} :` + usersList) //log - io.emit('online-users', usersList); - }); + socket.on("disconnect", () => { + onlineUsers.delete(socket.id); + const usersList = Array.from(onlineUsers); + // console.log(`✘ ${socket.id} :` + usersList) //log + io.emit("online-users", usersList); + }); }); app.use("/", userRoutes); - -server.listen(3001, () => console.log('Server is running on port 3001')); //will use env variable later \ No newline at end of file +server.listen(3001, () => console.log("Server is running on port 3001")); //will use env variable later diff --git a/frontend/src/components/MessageRoom.jsx b/frontend/src/components/MessageRoom.jsx index 4d37ce7..1341fc0 100644 --- a/frontend/src/components/MessageRoom.jsx +++ b/frontend/src/components/MessageRoom.jsx @@ -1,119 +1,127 @@ import { io } from "socket.io-client"; -import { useState, useEffect, useCallback } from 'react' -import 'bootstrap/dist/css/bootstrap.min.css' +import { useState, useEffect, useCallback } from "react"; +import "bootstrap/dist/css/bootstrap.min.css"; import { Button, Input } from "@material-tailwind/react"; -import '.././App.css' +import ".././App.css"; import OnlineUsers from "./OnlineUsers"; import { NavbarSimple } from "./Navbar"; //recoil related import -import { useRecoilValue } from 'recoil'; -import { userloggedin } from '../atom/userAtom' +import { useRecoilValue } from "recoil"; +import { userloggedin } from "../atom/userAtom"; -const socket = io.connect("http://localhost:3001"); +// const socket = io.connect("http://localhost:3001"); //for local development +const socket = io.connect("https://sankha-chatappb-serveit.codecult.tech"); //for production export default function App() { - const [msg, setmsg] = useState(''); - const [data_rcv, setdata_rcv] = useState([]); - - const loggedUser = useRecoilValue(userloggedin); - const [username, setusername] = useState('anonymous'); //used to set atom value initially then if the user want to change the name he/she can - - - const sendMessage = useCallback(() => { - if (username && msg) { - const createdTime = Date.now(); - let usernameCondition = ""; - if (loggedUser != 'anonymous-not-loggedin') { - usernameCondition = loggedUser; - } - else { - usernameCondition = username + ' (not loggedin)'; - } - socket.emit('send_message', { - username: usernameCondition, - message: msg, - createdTime: createdTime - }); - setmsg(''); - } - }, [msg, username, loggedUser]); - - useEffect(() => { - socket.on("recive_message", (data) => { - setdata_rcv((prevMessages) => [...prevMessages, data]); - }); - return () => { - socket.off("recive_message"); - }; - }, []); - - function formatDate(timestamp) { - const date = new Date(timestamp); - return date.toLocaleString(); + const [msg, setmsg] = useState(""); + const [data_rcv, setdata_rcv] = useState([]); + + const loggedUser = useRecoilValue(userloggedin); + const [username, setusername] = useState("anonymous"); //used to set atom value initially then if the user want to change the name he/she can + + const sendMessage = useCallback(() => { + if (username && msg) { + const createdTime = Date.now(); + let usernameCondition = ""; + if (loggedUser != "anonymous-not-loggedin") { + usernameCondition = loggedUser; + } else { + usernameCondition = username + " (not loggedin)"; + } + socket.emit("send_message", { + username: usernameCondition, + message: msg, + createdTime: createdTime, + }); + setmsg(""); } - - return ( - <> -
-
- -
- - {/* {JSON.parse(localStorage.getItem('user'))} */} - -
-
- -
- -
-

Send Your Message

- - {loggedUser == 'anonymous-not-loggedin' ? ( -
-
  Message without signing in
-
- setusername(e.target.value)} /> -
-
- ) : ( -
  username : {loggedUser}
- )} - - -
- setmsg(e.target.value)} /> -
-
- -
-
+ }, [msg, username, loggedUser]); + + useEffect(() => { + socket.on("recive_message", (data) => { + setdata_rcv((prevMessages) => [...prevMessages, data]); + }); + return () => { + socket.off("recive_message"); + }; + }, []); + + function formatDate(timestamp) { + const date = new Date(timestamp); + return date.toLocaleString(); + } + + return ( + <> +
+
+ +
+ + {/* {JSON.parse(localStorage.getItem('user'))} */} + +
+
+ +
+ +
+

Send Your Message

+ + {loggedUser == "anonymous-not-loggedin" ? ( +
+
  Message without signing in
+
+ setusername(e.target.value)} + />
- -
-

Messeges

-
- { - data_rcv.length === 0 ? (
Fetching ...
) - : (data_rcv.map((msg, i) => ( -
- {i + 1}.  - [{formatDate(msg.createdTime)}]   - {msg.username} :   - {msg.message} -
- )) - ) - } -
-
- +
+ ) : ( +
  username : {loggedUser}
+ )} + +
+ setmsg(e.target.value)} + />
- - ) -}; +
+ +
+
+
+ +
+

Messeges

+
+ {data_rcv.length === 0 ? ( +
Fetching ...
+ ) : ( + data_rcv.map((msg, i) => ( +
+ {i + 1}.  + [{formatDate(msg.createdTime)}]   + {msg.username} :   + {msg.message} +
+ )) + )} +
+
+
+ + ); +} diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index d0e0004..7aeb98a 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -1,5 +1,5 @@ /** @type {import('tailwindcss').Config} */ -const withMT = require("@material-tailwind/react/utils/withMT"); +import withMT from "@material-tailwind/react/utils/withMT"; export default withMT({ content: [