Scribd
Upload
22 views5 pages

Chatting Time

Uploaded by

nicodemuskiptoo8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
22 views5 pages

Chatting Time

Uploaded by

nicodemuskiptoo8
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

https://plagiarismsearch.

com/
https://voca.ro/18ELVH5I7b3l

// utils/db.js

import { MongoClient } from 'mongodb';

const uri = process.env.MONGODB_URI;


const options = {};

let client;
let clientPromise;

if (!process.env.MONGODB_URI) {
throw new Error('Please add your Mongo URI to .env.local');
}

if (process.env.NODE_ENV === 'development') {


if (!global._mongoClientPromise) {
client = new MongoClient(uri, options);
global._mongoClientPromise = client.connect();
}
clientPromise = global._mongoClientPromise;
} else {
client = new MongoClient(uri, options);
clientPromise = client.connect();
}

export async function connectToDatabase() {


try {
await clientPromise;
return {
client,
db: client.db('app-data')
};
} catch (error) {
console.error('Error connecting to database:', error);
throw new Error('Failed to connect to database');
}
}

export { clientPromise };

.......app/utils/db
// utils/db.js
import { MongoClient } from 'mongodb';

const uri = process.env.MONGODB_URI;


const options = {};

let client;

export async function connectToDatabase() {


if (!client) {
client = new MongoClient(uri, options);
await client.connect();
}
return {
client,
db: client.db('app-data') // Replace 'app-data' with your actual database name
};
}

........
// pages/api/messages.js
import { connectToDatabase } from '../../utils/db';

export default async function handler(req, res) {


try {
const { db } = await connectToDatabase();
const messages = db.collection('messages');

if (req.method === 'POST') {


const { username, content } = req.body;
const message = { username, content, timestamp: new Date() };

const result = await messages.insertOne(message);


message._id = result.insertedId;
res.status(201).json(message);
} else if (req.method === 'GET') {
const allMessages = await messages.find({}).toArray();
res.status(200).json(allMessages);
} else {
res.status(405).json({ message: 'Method not allowed' });
}
} catch (error) {
console.error('Error handling messages:', error);
res.status(500).json({ message: 'Internal server error' });
}
}

.....
// socketServer.js

import { Server } from 'socket.io';


import jwt from 'jsonwebtoken';
import { connectToDatabase } from './src/utils/db'; //
import { insertMessage, getAllMessages } from './src/utils/dbUtils'; //

const ioHandler = async (req, res) => {


if (!res.socket.server.io) {
const io = new Server(res.socket.server);
res.socket.server.io = io;

io.use(async (socket, next) => {


try {
const token = socket.handshake.auth.token;
if (!token) {
return next(new Error('Authentication error'));
}

const decoded = jwt.verify(token, process.env.JWT_SECRET || '4737'); //


JWT secret
if (!decoded) {
return next(new Error('Invalid token'));
}

// Fetch user from database based on decoded username


const client = await connectToDatabase();
const db = client.db('chat_app');
const users = db.collection('users');
const user = await users.findOne({ username: decoded.username });

if (!user) {
return next(new Error('User not found'));
}

socket.user = user; // Attach user object to socket for use in event


handlers
next();
} catch (error) {
next(new Error('Authentication error'));
}
});

io.on('connection', (socket) => {


console.log('New client connected');

// Load all messages when a client connects


socket.on('load_messages', async () => {
const allMessages = await getAllMessages();
socket.emit('load_messages', allMessages);
});

// Handle send_message event


socket.on('send_message', async (message) => {
try {
// Store message in MongoDB
await insertMessage({
sender: socket.user.username,
content: message.content,
timestamp: new Date()
});

// Emit message to all connected clients


io.emit('receive_message', {
sender: socket.user.username,
content: message.content,
timestamp: new Date()
});
} catch (error) {
console.error('Error sending message:', error);
}
});

socket.on('disconnect', () => {
console.log('Client disconnected');
});
});
}
res.end();
};
export default ioHandler;

....
// src/pages/index.tsx

import React, { useEffect, useState } from 'react';


import axios from 'axios';
import { io, Socket } from 'socket.io-client';
import Navbar from '../components/Navbar';
import MessageList from '../components/MessageList';
import MessageInput from '../components/MessageInput';
import ChatWindow from '../components/ChatWindow';
import Chat from '../components/Chat';

interface Message {
id: string;
content: string;
sender: string;
timestamp: string;
}

const Home: React.FC = () => {


const [messages, setMessages] = useState<Message[]>([]);
const socketRef = React.useRef<Socket | null>(null);

useEffect(() => {
// Fetch messages from the API
axios.get('/api/messages')
.then((response) => {
const fetchedMessages = response.data.map((msg: any) => ({
id: msg._id,
content: msg.content,
sender: msg.sender,
timestamp: msg.timestamp
}));
setMessages(fetchedMessages as Message[]);
})
.catch((error) => {
console.error('Error fetching messages:', error);
});

// Initialize socket.io
const socket: Socket = io();
socketRef.current = socket;

socket.on('receive_message', (message: any) => {


const newMessage: Message = {
id: message._id,
content: message.content,
sender: message.sender,
timestamp: message.timestamp,
};
setMessages((prevMessages) => [...prevMessages, newMessage]);
});

return () => {
socket.disconnect();
};
}, []);
const handleSendMessage = (content: string) => {
const newMessage: Message = {
id: 'temp-id', // Generate or replace with actual id logic
sender: 'Current User', // Replace with actual user logic
content,
timestamp: new Date().toISOString(),
};

axios.post('/api/messages', {
sender: newMessage.sender,
content: newMessage.content,
})
.then((response) => {
const savedMessage = response.data;
setMessages((prevMessages) => [
...prevMessages,
{
id: savedMessage._id,
content: savedMessage.content,
sender: savedMessage.sender,
timestamp: savedMessage.timestamp,
},
]);
})
.catch((error) => {
console.error('Error sending message:', error);
});

if (socketRef.current) {
socketRef.current.emit('send_message', newMessage);
}
};

return (
<div>
<Navbar />
<main className="flex flex-col items-center justify-between p-24">
<Chat user={{ username: 'Current User' }}>
<ChatWindow>
<MessageList messages={messages} />
<MessageInput onSendMessage={handleSendMessage} />
</ChatWindow>
</Chat>
</main>
</div>
);
};

export default Home;

You might also like