Skip to content

Commit 3f55800

Browse files
subashcsSubash Chandra Sapkota
subashcs
authored and
Subash Chandra Sapkota
committed
Update chat app
1 parent b31feb2 commit 3f55800

File tree

2,705 files changed

+3555
-239510
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

2,705 files changed

+3555
-239510
lines changed

‎README.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
# chatappwithsocket
2-
Chat Web App made using socket and node
3-
UI Demo
4-
https://subashcs.github.io/chatappwithsocket/
1+
# Chat App with Socket
2+
Chat Web App made using socket, node and React
3+
4+
## Getting Started
5+
1. Clone the repo
6+
2. Install dependencies in each sub folder
7+
3. Run both server and client

‎client/.eslintrc.cjs

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:react/recommended',
7+
'plugin:react/jsx-runtime',
8+
'plugin:react-hooks/recommended',
9+
],
10+
ignorePatterns: ['dist', '.eslintrc.cjs'],
11+
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12+
settings: { react: { version: '18.2' } },
13+
plugins: ['react-refresh'],
14+
rules: {
15+
'react/jsx-no-target-blank': 'off',
16+
'react/prop-types': 'off',
17+
'react-refresh/only-export-components': [
18+
'warn',
19+
{ allowConstantExport: true },
20+
],
21+
},
22+
}

‎client/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎client/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# React + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

‎client/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
13+
</html>

‎client/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "chat-client",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"react": "^18.3.1",
14+
"react-dom": "^18.3.1",
15+
"socket.io-client": "^4.7.5"
16+
},
17+
"devDependencies": {
18+
"@types/react": "^18.3.3",
19+
"@types/react-dom": "^18.3.0",
20+
"@vitejs/plugin-react": "^4.3.1",
21+
"eslint": "^8.57.0",
22+
"eslint-plugin-react": "^7.34.3",
23+
"eslint-plugin-react-hooks": "^4.6.2",
24+
"eslint-plugin-react-refresh": "^0.4.7",
25+
"vite": "^5.3.4"
26+
}
27+
}

‎client/public/avatar.webp

5.29 KB
Binary file not shown.

‎client/public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎client/src/App.jsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { useEffect, useRef, useState } from "react";
2+
import { io } from "socket.io-client";
3+
import Chat from "./Chat";
4+
5+
const socket = io("ws://localhost:9013");
6+
7+
8+
const UserForm= ({ onUserEnter }) => {
9+
const userRef = useRef();
10+
11+
const onSubmit = (e) => {
12+
e.preventDefault();
13+
if (userRef.current) {
14+
onUserEnter(userRef.current.value);
15+
}
16+
};
17+
18+
return (
19+
<form onSubmit={onSubmit} className="user-form">
20+
<input type="text" ref={userRef} />
21+
<button type="submit" style={{ marginLeft: '20px' }}>
22+
Set User
23+
</button>
24+
</form>
25+
);
26+
};
27+
28+
function App() {
29+
const [currentUser, setCurrentUser] = useState("");
30+
31+
useEffect(() => {
32+
socket.on("connection", () => {
33+
console.log("Connected to server");
34+
});
35+
}, []);
36+
37+
const onUserEnter = (user) => {
38+
setCurrentUser(user);
39+
socket.emit("join", { username: user });
40+
};
41+
42+
return (
43+
<div className="chat-app">
44+
<header>
45+
<h3>Fast messaging</h3>
46+
47+
</header>
48+
<main className="chatapp">
49+
{!currentUser && (
50+
<UserForm onUserEnter={onUserEnter}/>
51+
)}
52+
53+
{currentUser && <Chat socket={socket} currentUser={currentUser} />}
54+
</main>
55+
</div>
56+
57+
);
58+
}
59+
60+
export default App;

‎client/src/Chat.jsx

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import React, { useEffect, useState } from "react";
2+
3+
const Message = ({ message, currentUser }) => {
4+
const isCurrentUsersMessage = message.username === currentUser;
5+
return (
6+
<div>
7+
<div
8+
className="left"
9+
style={{
10+
display: "flex",
11+
flexDirection: isCurrentUsersMessage ? "row-reverse" : "row",
12+
}}
13+
>
14+
{message.type !== "join" && (
15+
<div className="user" style={{ margin: "4px" }}>
16+
<img
17+
alt={message.username}
18+
src="./avatar.webp"
19+
height="30px"
20+
width="30px"
21+
style={{ borderRadius: "100%" }}
22+
/>
23+
<div className="username" style={{ color: "gray" }}>
24+
{message.username}
25+
</div>
26+
</div>
27+
)}
28+
<div
29+
className="message-des"
30+
style={{
31+
textAlign: isCurrentUsersMessage ? "right" : "left",
32+
margin: "10px 2px 2px 10px",
33+
}}
34+
>
35+
{message.message}
36+
</div>
37+
</div>
38+
</div>
39+
);
40+
};
41+
42+
const Chat = ({ socket, currentUser }) => {
43+
const [message, setMessage] = useState("");
44+
const [messages, setMessages] = useState([]);
45+
46+
useEffect(() => {
47+
socket.on("receiveMessage", (message) => {
48+
setMessages((prevMessages) => [...prevMessages, message]);
49+
});
50+
51+
socket.on("joinMessage", (message) => {
52+
console.log("got message", message);
53+
const isSameAsCurrentUser = currentUser === message.username;
54+
55+
setMessages((prevMessages) => [
56+
...prevMessages,
57+
{
58+
username: message.username,
59+
message: `${
60+
isSameAsCurrentUser ? "You" : currentUser
61+
} have joined the chat.`,
62+
type: "join",
63+
},
64+
]);
65+
});
66+
67+
return () => {
68+
socket.off("receiveMessage");
69+
socket.off("joinMessage");
70+
};
71+
}, [socket]);
72+
73+
const sendMessage = (e) => {
74+
e.preventDefault();
75+
if (message.trim()) {
76+
socket.emit("sendMessage", { username: currentUser, message });
77+
setMessage("");
78+
}
79+
};
80+
81+
return (
82+
<div className="chatbox">
83+
<div className="message-box">
84+
{messages.map((item) => {
85+
return (
86+
<Message
87+
key={item.username}
88+
message={item}
89+
currentUser={currentUser}
90+
/>
91+
);
92+
})}
93+
</div>
94+
<form className="message-form" onSubmit={sendMessage}>
95+
<input
96+
type="text"
97+
value={message}
98+
onChange={(e) => setMessage(e.target.value)}
99+
placeholder="Type a message..."
100+
/>
101+
<button type="submit" className="send-button">
102+
Send
103+
</button>
104+
</form>
105+
</div>
106+
);
107+
};
108+
109+
export default Chat;

0 commit comments

Comments
 (0)