Skip to content

Commit 56bdab2

Browse files
ajibade3210ajibade3210
authored
adding socketio files (thombergs#291)
1 parent ced202b commit 56bdab2

File tree

7 files changed

+1144
-0
lines changed

7 files changed

+1144
-0
lines changed

‎nodejs/socket-chat-app/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Understanding Socket.IO: Building a simple real-time chat app with Node.js and Socket.IO
2+
3+
This README provides a quick guide to start a simple Node.js and HTML project.
4+
5+
Install Depeendecies
6+
7+
```bash
8+
npm install
9+
```
10+
11+
Start your Node.js server:
12+
13+
```bash
14+
node server.js
15+
```
16+
17+
Open the index.html file in a web browser. It will connect to our Socket.IO server running on http://localhost:5000.

‎nodejs/socket-chat-app/client/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Socket Chat App</title>
8+
</head>
9+
10+
<body>
11+
<h1>Socket Chat App</h1>
12+
<div class="container">
13+
<div class="chatbox">
14+
<ul id="messagelist"></ul>
15+
<form class="Input">
16+
<input type="text" placeholder="Type your message ..." />
17+
<button>Send</button>
18+
</form>
19+
</div>
20+
<br />
21+
<div class="activeusers">
22+
<h2>Active Users</h2>
23+
<ul id="users"></ul>
24+
</div>
25+
</div>
26+
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>
27+
<script src="index.js"></script>
28+
</body>
29+
</html>

‎nodejs/socket-chat-app/client/index.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
const messageform = document.querySelector(".chatbox form");
2+
const messageList = document.querySelector("#messagelist");
3+
const userList = document.querySelector("ul#users");
4+
const chatboxinput = document.querySelector(".chatbox input");
5+
const socket = io("http://localhost:5000");
6+
7+
let users = [];
8+
let messages = [];
9+
let isUser = "";
10+
11+
socket.on("message", message => {
12+
messages.push(message);
13+
updateMessages();
14+
});
15+
16+
socket.on("private", data => {
17+
isUser = data.name;
18+
});
19+
20+
socket.on("users", function (_users) {
21+
users = _users;
22+
updateUsers();
23+
});
24+
25+
messageform.addEventListener("submit", messageSubmitHandler);
26+
27+
function updateUsers() {
28+
userList.textContent = "";
29+
for (let i = 0; i < users.length; i++) {
30+
var node = document.createElement("LI");
31+
var textnode = document.createTextNode(users[i]);
32+
node.appendChild(textnode);
33+
userList.appendChild(node);
34+
}
35+
}
36+
37+
function updateMessages() {
38+
messageList.textContent = "";
39+
for (let i = 0; i < messages.length; i++) {
40+
const show = isUser === messages[i].user ? true : false;
41+
messageList.innerHTML += `<li class=${show ? "private" : ""}>
42+
<p>${messages[i].user}</p>
43+
<p>${messages[i].message}</p>
44+
</li>`;
45+
}
46+
}
47+
48+
function messageSubmitHandler(e) {
49+
e.preventDefault();
50+
let message = chatboxinput.value;
51+
socket.emit("message", message);
52+
chatboxinput.value = "";
53+
}
54+
55+
function userAddHandler(user) {
56+
userName = user || `User${Math.floor(Math.random() * 1000000)}`;
57+
socket.emit("adduser", userName);
58+
}
59+
60+
userAddHandler();

‎nodejs/socket-chat-app/client/style.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
* {
2+
padding: 0px;
3+
margin: 0px;
4+
box-sizing: border-box;
5+
font-family: Arial, Helvetica, sans-serif;
6+
}
7+
8+
h2 {
9+
font-weight: 100;
10+
}
11+
12+
nav {
13+
text-align: center;
14+
background-color: blueviolet;
15+
padding: 10px;
16+
color: white;
17+
}
18+
19+
.container {
20+
max-width: 1000px;
21+
margin: 100px auto 50px;
22+
padding: 20px;
23+
}
24+
25+
.chatbox {
26+
height: 500px;
27+
list-style: none;
28+
display: flex;
29+
flex-flow: column;
30+
background: #eee;
31+
border-radius: 6px;
32+
box-shadow: 1px 0px 10px #eee;
33+
}
34+
35+
#messagelist {
36+
flex: 1;
37+
overflow-y: scroll;
38+
}
39+
40+
#messagelist .private {
41+
background: #015e4b;
42+
color: #fff;
43+
margin-left: auto;
44+
}
45+
46+
#messagelist li {
47+
list-style: none;
48+
background: white;
49+
max-width: 400px;
50+
padding: 10px;
51+
margin: 10px;
52+
}
53+
54+
#messagelist p:first-child {
55+
color: #53bdea;
56+
}
57+
58+
#messagelist .private p:first-child {
59+
color: #03c493;
60+
}
61+
62+
form.Input {
63+
display: flex;
64+
}
65+
66+
form.Input input {
67+
flex: 10;
68+
padding: 14px 10px;
69+
border: none;
70+
}
71+
72+
form.Input button {
73+
padding: 4px;
74+
background: teal;
75+
border: none;
76+
flex: 1;
77+
color: white;
78+
cursor: pointer;
79+
}
80+
81+
#users {
82+
list-style: none;
83+
display: flex;
84+
flex-wrap: wrap;
85+
height: 100px;
86+
overflow-y: scroll;
87+
flex-flow: row;
88+
padding-top: 20px;
89+
}
90+
91+
#users li {
92+
min-width: 100px;
93+
max-height: 20px;
94+
border-radius: 10px;
95+
background: white;
96+
text-align: center;
97+
box-shadow: 0px 2px 10px #eee;
98+
}

0 commit comments

Comments
 (0)