Merge pull request #38 from snehas-05/master

Master
Ramsey99 · Oct 12, 2024 · 500a2c5 · 500a2c5
2 parents 627c423 + 1e36f56
commit 500a2c5
Show file tree

Hide file tree

Showing 5 changed files with 184 additions and 0 deletions.
diff --git a/real_time_event_updates/app.js b/real_time_event_updates/app.js
@@ -0,0 +1,36 @@
+// Establish WebSocket connection
+const socket = new WebSocket('ws://localhost:8080');
+
+// Real-Time Event Updates
+const eventUpdates = document.getElementById('event-updates');
+
+socket.addEventListener('message', function (event) {
+  const data = JSON.parse(event.data);
+
+  // If the data is for event updates
+  if (data.type === 'event-update') {
+    const update = document.createElement('p');
+    update.textContent = data.message;
+    eventUpdates.appendChild(update);
+  }
+
+  // If the data is a chat message
+  if (data.type === 'chat-message') {
+    const chatMessages = document.getElementById('chat-messages');
+    const message = document.createElement('p');
+    message.textContent = data.username + ": " + data.message;
+    chatMessages.appendChild(message);
+  }
+});
+
+// Sending chat messages
+const chatInput = document.getElementById('chat-input');
+const sendButton = document.getElementById('send-button');
+
+sendButton.addEventListener('click', function () {
+  const message = chatInput.value;
+  if (message) {
+    socket.send(JSON.stringify({ type: 'chat-message', message: message }));
+    chatInput.value = ''; // Clear input after sending
+  }
+});
diff --git a/real_time_event_updates/index.html b/real_time_event_updates/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Real-Time Event Updates & Live Chat</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <!-- Real-Time Updates Section -->
+  <div class="event-updates-container">
+    <h2>Real-Time Event Updates</h2>
+    <div id="event-updates" class="updates">
+      <p>No new updates yet.</p>
+    </div>
+  </div>
+
+  <!-- Live Chat Support Section -->
+  <div class="live-chat-container">
+    <h2>Live Chat Support</h2>
+    <div id="chat-window" class="chat-window">
+      <div id="chat-messages"></div>
+    </div>
+    <input type="text" id="chat-input" placeholder="Type your message..." />
+    <button id="send-button">Send</button>
+  </div>
+
+  <script src="app.js"></script> <!-- link to javascript-->
+</body>
+</html>
diff --git a/real_time_event_updates/package.json b/real_time_event_updates/package.json
@@ -0,0 +1,15 @@
+{
+    "name": "real-time-chat-updates",
+    "version": "1.0.0",
+    "description": "Real-time event updates and live chat feature",
+    "main": "server.js",
+    "dependencies": {
+      "ws": "^8.0.0"
+    },
+    "scripts": {
+      "start": "node server.js"
+    },
+    "author": "",
+    "license": "ISC"
+  }
+
diff --git a/real_time_event_updates/server.js b/real_time_event_updates/server.js
@@ -0,0 +1,40 @@
+const WebSocket = require('ws');
+const wss = new WebSocket.Server({ port: 8080 });
+
+// List of event updates 
+const eventUpdates = [
+  'Event A is starting in 30 minutes!',
+  'Event B has been rescheduled to 2:00 PM.',
+  'New event added: Hackathon at 5:00 PM!',
+];
+
+// Broadcast to all clients
+function broadcast(data) {
+  wss.clients.forEach(client => {
+    if (client.readyState === WebSocket.OPEN) {
+      client.send(JSON.stringify(data));
+    }
+  });
+}
+
+wss.on('connection', ws => {
+  console.log('New client connected');
+
+  // Send a welcome message with updates of event
+  eventUpdates.forEach(update => {
+    ws.send(JSON.stringify({ type: 'event-update', message: update }));
+  });
+
+  // Handle incoming messages from clients
+  ws.on('message', message => {
+    const data = JSON.parse(message);
+
+    if (data.type === 'chat-message') {
+      broadcast({ type: 'chat-message', message: data.message, username: 'User' });
+    }
+  });
+
+  ws.on('close', () => {
+    console.log('Client disconnected');
+  });
+});
diff --git a/real_time_event_updates/style.css b/real_time_event_updates/style.css
@@ -0,0 +1,63 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 20px;
+  }
+
+  /* Event Updates Section */
+  .event-updates-container {
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .updates {
+    background-color: #f0f0f0;
+    padding: 15px;
+    height: 200px;
+    overflow-y: auto;
+  }
+
+  h2 {
+    color: #333;
+  }
+
+  /* Live Chat Section */
+  .live-chat-container {
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .chat-window {
+    background-color: #f0f0f0;
+    padding: 10px;
+    height: 200px;
+    overflow-y: auto;
+    border: 1px solid #ccc;
+    margin-bottom: 10px;
+  }
+
+  #chat-input {
+    width: 80%;
+    padding: 10px;
+    margin-right: 10px;
+  }
+
+  #send-button {
+    padding: 10px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  #send-button:hover {
+    background-color: #0056b3;
+  }
+