├── README.md
├── server
├── .gitignore
├── package.json
├── index.js
└── package-lock.json
└── client
├── src
├── App.css
├── main.jsx
├── components
│ ├── Join
│ │ ├── Join.module.css
│ │ └── Join.jsx
│ └── Chat
│ │ ├── Chat.module.css
│ │ └── Chat.jsx
├── App.jsx
├── index.css
└── assets
│ └── react.svg
├── vite.config.js
├── .gitignore
├── index.html
├── package.json
├── public
└── vite.svg
└── package-lock.json
/README.md:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/server/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/client/src/App.css:
--------------------------------------------------------------------------------
1 | body{
2 | height: 100vh;
3 | background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 | }
--------------------------------------------------------------------------------
/client/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/client/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
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?
25 |
--------------------------------------------------------------------------------
/client/src/components/Join/Join.module.css:
--------------------------------------------------------------------------------
1 | .join-container{
2 | background-color: #FFF;
3 | color: #000;
4 | width: 400px;
5 | height: 200px;
6 | display: flex;
7 | flex-direction: column;
8 | justify-content: center;
9 | align-items: center;
10 |
11 | -webkit-box-shadow: 5px 5px 17px 1px rgba(0, 0, 0, 0.3);
12 | box-shadow: 5px 5px 17px 1px rgba(0, 0, 0, 0.3);
13 | }
14 |
--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "server",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "nodemon index.js",
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "dependencies": {
14 | "express": "^4.18.2",
15 | "socket.io": "^4.6.1"
16 | },
17 | "devDependencies": {
18 | "nodemon": "^2.0.20"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/client/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import './App.css'
3 | import Join from './components/Join/Join'
4 | import Chat from './components/Chat/Chat'
5 |
6 | function App() {
7 | const [chatVisibility, setChatVisibility] = useState(false)
8 | const [socket, setSocket] = useState(null)
9 |
10 | return (
11 |
12 | {
13 | chatVisibility ? :
14 | }
15 |
16 | )
17 | }
18 |
19 | export default App
20 |
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@emotion/react": "^11.10.6",
13 | "@emotion/styled": "^11.10.6",
14 | "@mui/icons-material": "^5.11.9",
15 | "@mui/material": "^5.11.10",
16 | "react": "^18.2.0",
17 | "react-dom": "^18.2.0",
18 | "socket.io-client": "^4.6.1"
19 | },
20 | "devDependencies": {
21 | "@types/react": "^18.0.27",
22 | "@types/react-dom": "^18.0.10",
23 | "@vitejs/plugin-react": "^3.1.0",
24 | "vite": "^4.1.0"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
1 | const app = require('express')()
2 | const server = require('http').createServer(app)
3 | const io = require('socket.io')(server, {cors: {origin: 'http://localhost:5173'}})
4 |
5 | const PORT = 3001
6 |
7 | io.on('connection', socket => {
8 | console.log('Usuário conectado!', socket.id);
9 |
10 | socket.on('disconnect', reason => {
11 | console.log('Usuário desconectado!', socket.id)
12 | })
13 |
14 | socket.on('set_username', username => {
15 | socket.data.username = username
16 | })
17 |
18 | socket.on('message', text => {
19 | io.emit('receive_message', {
20 | text,
21 | authorId: socket.id,
22 | author: socket.data.username
23 | })
24 | })
25 | })
26 |
27 | server.listen(PORT, () => console.log('Server running...'))
--------------------------------------------------------------------------------
/client/src/components/Chat/Chat.module.css:
--------------------------------------------------------------------------------
1 | .chat-container{
2 | height: 600px;
3 | width: 400px;
4 | background-color: #fff;
5 | -webkit-box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.3);
6 | box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.3);
7 | }
8 | .chat-body{
9 | padding: 0 10px;
10 | height: 550px;
11 | overflow-y: scroll;
12 | color: #000;
13 | display: flex;
14 | flex-direction: column;
15 | }
16 |
17 | .message-container{
18 | max-width: 250px;
19 | width: fit-content;
20 | background-color: lightgrey;
21 | margin-top: 10px;
22 | padding: 5px 10px;
23 | border-radius: 7px;
24 | align-self: start;
25 | }
26 |
27 | .message-mine{
28 | align-self: end;
29 | background-color: skyblue;
30 | }
31 |
32 | .chat-footer{
33 | width: 100%;
34 | padding: 0 10px;
35 | box-sizing: border-box;
36 | display:flex;
37 | align-items: center;
38 | bottom: 0;
39 | height: 50px;
40 | }
--------------------------------------------------------------------------------
/client/src/components/Join/Join.jsx:
--------------------------------------------------------------------------------
1 | import React, {useRef} from 'react'
2 | import io from 'socket.io-client'
3 | import style from './Join.module.css'
4 | import {Input, Button} from '@mui/material'
5 |
6 | export default function Join({setChatVisibility, setSocket}) {
7 |
8 | const usernameRef = useRef()
9 |
10 | const handleSubmit = async () => {
11 | const username = usernameRef.current.value
12 | if(!username.trim()) return
13 | const socket = await io.connect('http://localhost:3001')
14 | socket.emit('set_username', username)
15 | setSocket(socket)
16 | setChatVisibility(true)
17 | }
18 |
19 | return (
20 |
21 |
Chat em tempo real
22 |
23 |
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/client/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | -webkit-text-size-adjust: 100%;
15 | }
16 |
17 | a {
18 | font-weight: 500;
19 | color: #646cff;
20 | text-decoration: inherit;
21 | }
22 | a:hover {
23 | color: #535bf2;
24 | }
25 |
26 | body {
27 | margin: 0;
28 | display: flex;
29 | place-items: center;
30 | min-width: 320px;
31 | min-height: 100vh;
32 | }
33 |
34 | h1 {
35 | font-size: 3.2em;
36 | line-height: 1.1;
37 | }
38 |
39 | button {
40 | border-radius: 8px;
41 | border: 1px solid transparent;
42 | padding: 0.6em 1.2em;
43 | font-size: 1em;
44 | font-weight: 500;
45 | font-family: inherit;
46 | background-color: #1a1a1a;
47 | cursor: pointer;
48 | transition: border-color 0.25s;
49 | }
50 | button:hover {
51 | border-color: #646cff;
52 | }
53 | button:focus,
54 | button:focus-visible {
55 | outline: 4px auto -webkit-focus-ring-color;
56 | }
57 |
58 | @media (prefers-color-scheme: light) {
59 | :root {
60 | color: #213547;
61 | background-color: #ffffff;
62 | }
63 | a:hover {
64 | color: #747bff;
65 | }
66 | button {
67 | background-color: #f9f9f9;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/client/src/components/Chat/Chat.jsx:
--------------------------------------------------------------------------------
1 | import React, {useRef, useState, useEffect} from 'react'
2 | import {Input} from '@mui/material'
3 | import SendIcon from '@mui/icons-material/Send';
4 | import style from './Chat.module.css'
5 |
6 | export default function Chat({socket}) {
7 |
8 | const bottomRef = useRef()
9 | const messageRef = useRef()
10 | const [messageList, setMessageList] = useState([])
11 |
12 | useEffect(()=>{
13 | socket.on('receive_message', data => {
14 | setMessageList((current) => [...current, data])
15 | })
16 |
17 | return () => socket.off('receive_message')
18 | }, [socket])
19 |
20 | useEffect(()=>{
21 | scrollDown()
22 | }, [messageList])
23 |
24 | const handleSubmit = () => {
25 | const message = messageRef.current.value
26 | if(!message.trim()) return
27 |
28 | socket.emit('message', message)
29 | clearInput()
30 | focusInput()
31 | }
32 |
33 | const clearInput = () => {
34 | messageRef.current.value = ''
35 | }
36 |
37 | const focusInput = () => {
38 | messageRef.current.focus()
39 | }
40 |
41 | const getEnterKey = (e) => {
42 | if(e.key === 'Enter')
43 | handleSubmit()
44 | }
45 |
46 | const scrollDown = () => {
47 | bottomRef.current.scrollIntoView({behavior: 'smooth'})
48 | }
49 |
50 | return (
51 |
52 |
53 |
54 | {
55 | messageList.map((message,index) => (
56 |
57 |
{message.author}
58 |
{message.text}
59 |
60 | ))
61 | }
62 |
63 |
64 |
65 | getEnterKey(e)} fullWidth />
66 | handleSubmit()} color="primary" />
67 |
68 |
69 |