├── .gitignore ├── .DS_Store ├── public ├── .DS_Store ├── sound.mp3 ├── index.html ├── script.js └── style.css ├── package.json └── app.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bitwisegaurav/ChatWebApp/HEAD/.DS_Store -------------------------------------------------------------------------------- /public/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bitwisegaurav/ChatWebApp/HEAD/public/.DS_Store -------------------------------------------------------------------------------- /public/sound.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bitwisegaurav/ChatWebApp/HEAD/public/sound.mp3 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chatapp", 3 | "version": "1.0.0", 4 | "description": "This is chatting website", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Gaurav Mishra", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.18.2", 13 | "socket.io": "^4.7.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ChatWebApp 7 | 8 | 9 | 10 | 11 | 12 |
13 |

ChatWebApp

14 |
15 |
16 | 41 |
42 |
43 | 44 | 45 |
46 | 47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const http = require("http"); 3 | const socketIo = require("socket.io"); 4 | 5 | const app = express(); 6 | const server = http.createServer(app); 7 | const io = socketIo(server); 8 | const users = {}; 9 | 10 | app.use(express.static("public")); 11 | 12 | io.on("connection", (socket) => { 13 | socket.on("new-user", (name) => { 14 | users[socket.id] = name; 15 | if(name) 16 | socket.broadcast.emit("user-connected", name); 17 | // broadcast to all other users 18 | }); 19 | socket.on("send-chat-message", (message) => { 20 | let time = new Date(); 21 | let hours = time.getHours(); 22 | let minutes = time.getMinutes(); 23 | let timeString = `${hours}:${minutes}`; 24 | socket.broadcast.emit("chat-message", { 25 | message: message, 26 | name: users[socket.id], 27 | time: timeString, 28 | }); 29 | // broadcast to all other users 30 | }); 31 | socket.on("disconnect", () => { 32 | socket.broadcast.emit("user-disconnected", users[socket.id]); 33 | delete users[socket.id]; 34 | // broadcast to all other users 35 | }); 36 | }); 37 | 38 | server.listen(3000, () => { 39 | console.log("listening on *:3000"); 40 | }); 41 | 42 | // const express = require('express'); 43 | // const path = require('path'); 44 | // const app = express(); 45 | // const port = 80; 46 | 47 | // // change content type for css and js files to text/css and text/javascript 48 | // // app.use((req, res, next) => { 49 | // // if (req.url.endsWith('.css')) { 50 | // // res.contentType('text/css'); 51 | // // } else if (req.url.endsWith('.js')) { 52 | // // res.contentType('text/javascript'); 53 | // // } 54 | // // next(); 55 | // // }); 56 | // app.use(express.static(path.join(__dirname, 'files'))); 57 | 58 | // app.get('/', (req, res) => { 59 | // // res.send('Hello World!'); 60 | // res.sendFile(__dirname + '/files/index.html'); 61 | // }) 62 | 63 | // app.listen(port, () => { 64 | // console.log(`Example app listening on port ${port}`) 65 | // }) 66 | -------------------------------------------------------------------------------- /public/script.js: -------------------------------------------------------------------------------- 1 | const socket = io("http://localhost:3000"); 2 | const formBox = document.getElementById("formBox"); 3 | const inputBox = document.getElementById("inputBox"); 4 | const sendBtn = document.getElementById("sendBtn"); 5 | const chatBox = document.getElementById("chats"); 6 | const audio = new Audio("sound.mp3"); 7 | let username; 8 | 9 | window.addEventListener("load", () => { 10 | username = prompt("Enter your name to join"); 11 | if(!username){ 12 | while(!username){ 13 | username = prompt("Enter your name to join"); 14 | } 15 | } 16 | socket.emit("new-user", username); 17 | }); 18 | 19 | const appendUser = (name, connection) => { 20 | const messageElement = document.createElement("div"); 21 | messageElement.innerHTML = `${name} ${connection}`; 22 | messageElement.classList.add("userJoined"); 23 | chatBox.append(messageElement); 24 | chatBox.scrollTop = chatBox.scrollHeight; 25 | }; 26 | 27 | const appendMessage = (name, message, time, user) => { 28 | const messageElement = document.createElement("div"); 29 | messageElement.innerHTML = ` 30 |
31 |
32 |

${name}

33 |

${time}

34 |
35 |
36 |

${message}

37 |
38 |
`; 39 | messageElement.classList.add("user"); 40 | messageElement.classList.add(user); 41 | chatBox.append(messageElement); 42 | chatBox.scrollTop = chatBox.scrollHeight; 43 | if(user === 'other') 44 | audio.play(); 45 | }; 46 | 47 | socket.on("user-connected", (name) => { 48 | if(name) 49 | appendUser(name, 'joined'); 50 | }); 51 | 52 | sendBtn.addEventListener("click", (e) => { 53 | e.preventDefault(); 54 | const message = inputBox.value; 55 | if(message){ 56 | socket.emit("send-chat-message", message); 57 | let time = new Date(); 58 | let hours = time.getHours(); 59 | let minutes = time.getMinutes(); 60 | let timeString = `${hours}:${minutes}`; 61 | appendMessage('You', message, timeString, 'self'); 62 | } 63 | inputBox.value = ""; 64 | }); 65 | 66 | socket.on("chat-message", (data) => { 67 | appendMessage(data.name, data.message, data.time, 'other'); 68 | }); 69 | 70 | socket.on("user-disconnected", (name) => { 71 | if(name) 72 | appendUser(name, 'left'); 73 | }); 74 | 75 | // const main = document.querySelector("main"); 76 | // const username = "username"; 77 | 78 | // console.log(username); 79 | // if(username){ 80 | // main.style.display = "flex"; 81 | // } 82 | -------------------------------------------------------------------------------- /public/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | } 7 | body{ 8 | background-color: #f1f1f1; 9 | display: grid; 10 | place-items: center; 11 | height: 100vh; 12 | } 13 | main{ 14 | width: 80vw; 15 | height: 95vh; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | flex-direction: column; 20 | } 21 | h1{ 22 | font-size: 30px; 23 | color: #333; 24 | text-align: center; 25 | margin-bottom: 20px; 26 | } 27 | 28 | .chatBox{ 29 | position: relative; 30 | /* width: 100%; */ 31 | width: 800px; 32 | height: calc(100% - 60px); 33 | max-width: 600px; 34 | margin: 0 auto; 35 | background-color: #fff; 36 | box-shadow: 0 2px 5px #ccc; 37 | border-radius: 5px; 38 | } 39 | 40 | .chatBox form{ 41 | position:sticky; 42 | bottom: 0; 43 | left: 0; 44 | width: 100%; 45 | margin-top: 1rem; 46 | padding: 0.3rem 1rem; 47 | display: flex; 48 | justify-content: center; 49 | align-items: center; 50 | background-color: #fff; 51 | box-shadow: 0 -10px 15px #fff; 52 | /* border: 2px solid red; */ 53 | } 54 | .chatBox form input{ 55 | width: 100%; 56 | padding: 10px; 57 | border: 1px solid #ccc; 58 | border-radius: 5px; 59 | outline: none; 60 | font-size: 16px; 61 | } 62 | .chatBox form button{ 63 | padding: 10px 15px; 64 | margin-left: 10px; 65 | background-color: #333; 66 | color: #fff; 67 | border: none; 68 | border-radius: 5px; 69 | cursor: pointer; 70 | outline: none; 71 | font-size: 16px; 72 | } 73 | .chatBox form button:hover{ 74 | background-color: #444; 75 | } 76 | .chatBox form button:active{ 77 | background-color: #555; 78 | } 79 | .chatBox form button:focus{ 80 | background-color: #555; 81 | } 82 | 83 | #chats{ 84 | padding: 1rem 2rem; 85 | height: calc(100% - 70px); 86 | overflow-y: scroll; 87 | } 88 | 89 | #chats::-webkit-scrollbar{ 90 | width: 2px; 91 | } 92 | #chats::-webkit-scrollbar-thumb{ 93 | background-color: #333; 94 | border-radius: 5%; 95 | } 96 | #chats::-webkit-scrollbar-track{ 97 | background-color: #fff; 98 | } 99 | 100 | #chats .userJoined{ 101 | display: flex; 102 | justify-content: center; 103 | align-items: center; 104 | margin-bottom: 1rem; 105 | width: 100%; 106 | } 107 | #chats .userJoined span{ 108 | text-align: center; 109 | color: rgba(0, 0, 0, 0.541); 110 | width: 80%; 111 | font-size: small; 112 | padding: 5px 0; 113 | border-radius: 10px; 114 | margin-right: 10px; 115 | background-color: rgba(159, 180, 251, 0.484); 116 | } 117 | 118 | #chats .user{ 119 | display: flex; 120 | justify-content: flex-start; 121 | align-items: center; 122 | margin-bottom: 1rem; 123 | width: 100%; 124 | } 125 | #chats .usermsg{ 126 | display: inline-flex; 127 | flex-direction: column; 128 | gap: 10px; 129 | padding: 0.5rem 1rem; 130 | background-color: rgba(0, 0, 0, 0.1); 131 | max-width: 80%; 132 | border-radius: 5px; 133 | font-size: small; 134 | } 135 | #chats .usermsg .details{ 136 | display: flex; 137 | justify-content: space-between; 138 | align-items: center; 139 | gap: 10px; 140 | width: 100%; 141 | font-size: smaller; 142 | } 143 | #chats .usermsg .details .name{ 144 | color: #5670c6; 145 | } 146 | #chats .usermsg .details .time{ 147 | color: rgb(5, 156, 61); 148 | } 149 | #chats .usermsg #message{ 150 | width: 100%; 151 | font-size: 16px; 152 | } 153 | #chats .self { 154 | justify-content: flex-end; 155 | } 156 | #chats .self .usermsg{ 157 | background-color: #003cffab; 158 | color: #fff; 159 | } 160 | #chats .self .usermsg .details .name{ 161 | color: #c2cae3; 162 | } 163 | #chats .self .usermsg .details .time{ 164 | color: rgb(159, 251, 193); 165 | } --------------------------------------------------------------------------------