From 0efc52544c04d54006c06be8c36d63a90ef7e306 Mon Sep 17 00:00:00 2001 From: Csillag61 Date: Fri, 16 May 2025 13:56:17 -0400 Subject: [PATCH 1/2] chat-app --- public/index.html | 11 +++++ server/server.js | 73 +++++++++++++++++++++++++++++ src/components/ChatApp.css | 54 ++++++++++++++++++++++ src/components/ChatApp.jsx | 95 ++++++++++++++++++++++++++++++++++++++ src/index.js | 12 +++++ 5 files changed, 245 insertions(+) create mode 100644 public/index.html create mode 100644 server/server.js create mode 100644 src/components/ChatApp.css create mode 100644 src/components/ChatApp.jsx diff --git a/public/index.html b/public/index.html new file mode 100644 index 000000000..9f77e9d3d --- /dev/null +++ b/public/index.html @@ -0,0 +1,11 @@ + + + + + + Chat App + + +
+ + diff --git a/server/server.js b/server/server.js new file mode 100644 index 000000000..5d02550ee --- /dev/null +++ b/server/server.js @@ -0,0 +1,73 @@ +/* eslint-disable */ + +const express = require('express'); +const http = require('http'); +const { Server } = require('socket.io'); + +const app = express(); +const server = http.createServer(app); +const io = new Server(server, { + cors: { + origin: 'http://localhost:3001', // Your frontend URL + methods: ['GET', 'POST'], + }, +}); + +const rooms = {}; // Stores room names and messages + +const cors = require('cors'); + +app.use( + cors({ + origin: 'http://localhost:3001', // Replace with your frontend URL + methods: ['GET', 'POST'], + allowedHeaders: ['Content-Type'], + credentials: true, + }), +); + +app.use(express.json()); +app.use(express.urlencoded({ extended: true })); +app.use(express.static('public')); // Serve static files from the public directory +app.use((req, res, next) => { + res.header('Access-Control-Allow-Origin', 'http://localhost:3000'); + res.header( + 'Access-Control-Allow-Headers', + 'Origin, X-Requested-With, Content-Type, Accept', + ); + next(); +}); + +app.get('/', (req, res) => { + res.send('Server is running!'); +}); + +io.on('connection', (socket) => { + console.log('A user connected'); + + socket.on('setUsername', (username) => { + socket.username = username; + }); + + socket.on('joinRoom', (room) => { + socket.join(room); + + if (!rooms[room]) { + rooms[room] = []; + } + socket.emit('loadMessages', rooms[room]); // Send previous messages + }); + + socket.on('sendMessage', ({ room, message }) => { + const msg = { author: socket.username, time: new Date(), text: message }; + + rooms[room].push(msg); + io.to(room).emit('newMessage', msg); // Broadcast to room + }); + + socket.on('disconnect', () => { + console.log('User disconnected'); + }); +}); + +server.listen(3000, () => console.log('Server running on port 3000')); diff --git a/src/components/ChatApp.css b/src/components/ChatApp.css new file mode 100644 index 000000000..dcbc5a030 --- /dev/null +++ b/src/components/ChatApp.css @@ -0,0 +1,54 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.chat-container { + width: 400px; + background: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + align-items: center; +} + +.input-field, +.button { + width: 100%; /* Make both elements take full width */ + padding: 10px; + margin: 10px 0; + border-radius: 5px; + border: 1px solid #ccc; + box-sizing: border-box; +} + +.button { + background-color: #007bff; + color: white; + border: none; + cursor: pointer; +} + +.button:hover { + background-color: #0056b3; +} + +.message-list { + margin-top: 10px; + max-height: 300px; + overflow-y: auto; +} + +.message { + background: #007bff; + color: white; + padding: 8px; + margin: 5px 0; + border-radius: 5px; +} diff --git a/src/components/ChatApp.jsx b/src/components/ChatApp.jsx new file mode 100644 index 000000000..20cfd5797 --- /dev/null +++ b/src/components/ChatApp.jsx @@ -0,0 +1,95 @@ +/* eslint-disable max-len */ +import { useState, useEffect } from 'react'; +import io from 'socket.io-client'; +import './ChatApp.css'; + +const socket = io('http://localhost:3000', { + transports: ['websocket', 'polling'], +}); // Connect to your backend server + +function ChatApp() { + const [username, setUsername] = useState( + window.localStorage.getItem('username') || '', + ); + const [room, setRoom] = useState(''); + const [messages, setMessages] = useState([]); + const [message, setMessage] = useState(''); + + useEffect(() => { + socket.on('loadMessages', (prevMessages) => setMessages(prevMessages)); + socket.on('newMessage', (msg) => setMessages((prev) => [...prev, msg])); + + return () => { + socket.off('loadMessages'); + socket.off('newMessage'); + }; + }, []); + + const joinRoom = () => { + socket.emit('setUsername', username); + socket.emit('joinRoom', room); + + if (typeof window !== 'undefined' && window.localStorage) { + window.localStorage.setItem('room', room); + } + setMessages([]); + }; + + const sendMessage = () => { + if (message.trim() !== '') { + socket.emit('sendMessage', { room, message }); + setMessage(''); + } + }; + + return ( +
+ { + setUsername(e.target.value); + window.localStorage.setItem('username', e.target.value); + }} + /> + setRoom(e.target.value)} + /> + +
+ {messages.map((msg, idx) => ( +

+ {msg.author} [{new Date(msg.time).toLocaleTimeString()}]:{' '} + {msg.text} +

+ ))} +
+ setMessage(e.target.value)} + /> + +
+ ); +} + +export default ChatApp; diff --git a/src/index.js b/src/index.js index ad9a93a7c..2e4083622 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1,13 @@ +/* eslint-disable */ 'use strict'; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import ChatApp from './components/ChatApp.jsx'; + +const root = ReactDOM.createRoot(document.getElementById('root')); + +root.render( + + + , +); From 19ea34a889e2c84f943d3ee4e2643d6530f9b397 Mon Sep 17 00:00:00 2001 From: Csillag61 Date: Fri, 16 May 2025 14:05:57 -0400 Subject: [PATCH 2/2] fixed localhost number --- server/server.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/server/server.js b/server/server.js index 5d02550ee..71a0e17a4 100644 --- a/server/server.js +++ b/server/server.js @@ -8,7 +8,7 @@ const app = express(); const server = http.createServer(app); const io = new Server(server, { cors: { - origin: 'http://localhost:3001', // Your frontend URL + origin: 'http://localhost:3000', // Your frontend URL methods: ['GET', 'POST'], }, }); @@ -19,7 +19,7 @@ const cors = require('cors'); app.use( cors({ - origin: 'http://localhost:3001', // Replace with your frontend URL + origin: 'http://localhost:3000', // Replace with your frontend URL methods: ['GET', 'POST'], allowedHeaders: ['Content-Type'], credentials: true,