mirror of
https://github.com/sergeyyarkov/react-chat-app.git
synced 2026-10-11 10:29:04 +03:00
fixes
This commit is contained in:
parent
88d301d2c3
commit
7f5cf978de
@ -1,6 +1,9 @@
|
||||
import React from 'react';
|
||||
import { socket } from '../../App'
|
||||
import Header from './Header/Header'
|
||||
import ChatOnline from "./ChatOnline/ChatOnline";
|
||||
import ChatContent from './ChatContent/ChatContent'
|
||||
import ChatInput from "./ChatInput/ChatInput"
|
||||
import './ChatBox.scss'
|
||||
|
||||
const ChatBox = ({ user }) => {
|
||||
@ -19,84 +22,40 @@ const ChatBox = ({ user }) => {
|
||||
socket.emit('chat:message', { message: message.value, username: user.username, date: `${date.getHours()}:${(`0${date.getMinutes()}`).slice(-2)}` })
|
||||
}
|
||||
|
||||
const ChatContent = () => {
|
||||
return (
|
||||
<div ref={chatContentElement} className="chat-content">
|
||||
{messages.map((client, i) => {
|
||||
return (
|
||||
<div key={i}>
|
||||
{client.date !== null ? <div className='message'>
|
||||
<div className="message-username">
|
||||
<p>
|
||||
{client.username}
|
||||
<span>{client.date}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="message-text">
|
||||
{client.message}
|
||||
</div>
|
||||
</div> : <div className='info'>
|
||||
<span>{client.message}</span>
|
||||
</div>}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const ChatOnline = () => {
|
||||
return (
|
||||
<div className='chat-online'>
|
||||
<span>Online: {online}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const ChatInput = () => {
|
||||
|
||||
const handleInputChange = e => {
|
||||
setInputMessage(e.target.value)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="chat-input">
|
||||
<form onSubmit={sendMessage}>
|
||||
<input ref={inputMessageElement} onChange={(e) => handleInputChange(e)} value={inputMessage} required type="text" name='message' placeholder='Type your message...'/>
|
||||
<button>
|
||||
<svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.5111 9.27032L3.34053 0.900689C2.49077 0.548052 1.53076 0.703179 0.835207 1.30533C0.139651 1.90757 -0.151267 2.8355 0.0760766 3.72696L1.87144 10.7676H10.6618C11.0663 10.7676 11.3942 11.0955 11.3942 11.5001C11.3942 11.9045 11.0663 12.2325 10.6618 12.2325H1.87144L0.0760766 19.2731C-0.151267 20.1646 0.139602 21.0925 0.835207 21.6947C1.53218 22.2981 2.49229 22.4513 3.34058 22.0994L23.5112 13.7298C24.4295 13.3487 25 12.4943 25 11.5001C25 10.5058 24.4295 9.65132 23.5111 9.27032Z" fill="#0070F3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const scrollChatToBottom = (chatContentElement) => chatContentElement.current.scrollTop = chatContentElement.current.scrollHeight
|
||||
|
||||
React.useEffect(() => {
|
||||
socket.on('chat:message', ({ message, username, date }) => {
|
||||
setMessages(messages => ([...messages, { message, username, date }]))
|
||||
chatContentElement.current.scrollTop = chatContentElement.current.scrollHeight
|
||||
// inputMessageElement.current.focus()
|
||||
scrollChatToBottom(chatContentElement)
|
||||
inputMessageElement.current.focus()
|
||||
setInputMessage('')
|
||||
})
|
||||
|
||||
socket.on('user:connected', ({ username, online }) => {
|
||||
setOnline(online)
|
||||
setMessages(messages => ([...messages, { message: `${username} joined!`, username, date: null }]))
|
||||
scrollChatToBottom(chatContentElement)
|
||||
})
|
||||
|
||||
socket.on('user:disConnected', ({ username, online }) => {
|
||||
setOnline(online)
|
||||
setMessages(messages => ([...messages, { message: `${username} left!`, username, date: null }]))
|
||||
scrollChatToBottom(chatContentElement)
|
||||
})
|
||||
}, [setMessages, setOnline]);
|
||||
|
||||
return (
|
||||
<div className="chat">
|
||||
<Header />
|
||||
<ChatOnline />
|
||||
<ChatContent />
|
||||
<ChatInput />
|
||||
<ChatOnline online={online} />
|
||||
<ChatContent chatContentElement={chatContentElement} messages={messages} />
|
||||
<ChatInput
|
||||
inputMessageElement={inputMessageElement}
|
||||
inputMessage={inputMessage}
|
||||
setInputMessage={setInputMessage}
|
||||
sendMessage={sendMessage}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
29
client/src/components/ChatBox/ChatContent/ChatContent.js
Normal file
29
client/src/components/ChatBox/ChatContent/ChatContent.js
Normal file
@ -0,0 +1,29 @@
|
||||
import React from 'react'
|
||||
|
||||
const ChatContent = ({ chatContentElement, messages }) => {
|
||||
return (
|
||||
<div ref={chatContentElement} className="chat-content">
|
||||
{messages.map((client, i) => {
|
||||
return (
|
||||
<div key={i}>
|
||||
{client.date !== null ? <div className='message'>
|
||||
<div className="message-username">
|
||||
<p>
|
||||
{client.username}
|
||||
<span>{client.date}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="message-text">
|
||||
{client.message}
|
||||
</div>
|
||||
</div> : <div className='info'>
|
||||
<span>{client.message}</span>
|
||||
</div>}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChatContent
|
||||
23
client/src/components/ChatBox/ChatInput/ChatInput.js
Normal file
23
client/src/components/ChatBox/ChatInput/ChatInput.js
Normal file
@ -0,0 +1,23 @@
|
||||
import React from "react"
|
||||
|
||||
const ChatInput = ({ setInputMessage, sendMessage, inputMessageElement, inputMessage }) => {
|
||||
|
||||
const handleInputChange = e => {
|
||||
setInputMessage(e.target.value)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="chat-input">
|
||||
<form onSubmit={sendMessage}>
|
||||
<input ref={inputMessageElement} onChange={(e) => handleInputChange(e)} value={inputMessage} required type="text" name='message' placeholder='Type your message...'/>
|
||||
<button>
|
||||
<svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.5111 9.27032L3.34053 0.900689C2.49077 0.548052 1.53076 0.703179 0.835207 1.30533C0.139651 1.90757 -0.151267 2.8355 0.0760766 3.72696L1.87144 10.7676H10.6618C11.0663 10.7676 11.3942 11.0955 11.3942 11.5001C11.3942 11.9045 11.0663 12.2325 10.6618 12.2325H1.87144L0.0760766 19.2731C-0.151267 20.1646 0.139602 21.0925 0.835207 21.6947C1.53218 22.2981 2.49229 22.4513 3.34058 22.0994L23.5112 13.7298C24.4295 13.3487 25 12.4943 25 11.5001C25 10.5058 24.4295 9.65132 23.5111 9.27032Z" fill="#0070F3"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChatInput
|
||||
11
client/src/components/ChatBox/ChatOnline/ChatOnline.js
Normal file
11
client/src/components/ChatBox/ChatOnline/ChatOnline.js
Normal file
@ -0,0 +1,11 @@
|
||||
import React from "react"
|
||||
|
||||
const ChatOnline = ({ online }) => {
|
||||
return (
|
||||
<div className='chat-online'>
|
||||
<span>Online: {online}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChatOnline
|
||||
22
server/consumer.js
Normal file
22
server/consumer.js
Normal file
@ -0,0 +1,22 @@
|
||||
module.exports = {
|
||||
start: (io) => {
|
||||
io.on('connection', (socket) => {
|
||||
socket.on('user:connected', ({ username }) => {
|
||||
users.push({ username, socketId: socket.id })
|
||||
io.emit('user:connected', { username, online: users.length })
|
||||
})
|
||||
|
||||
socket.on('chat:message', ({ message, username, date }) => {
|
||||
io.emit('chat:message', { message, username, date })
|
||||
})
|
||||
|
||||
socket.on('disconnecting', () => {
|
||||
const userIndex = users.findIndex((user) => socket.id === user.socketId)
|
||||
if (userIndex !== -1) {
|
||||
io.emit('user:disConnected', { username: users[userIndex].username, online: users.length - 1 })
|
||||
users.splice(userIndex, 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -1,37 +1,13 @@
|
||||
const server = require('express')()
|
||||
const http = require('http').createServer(server)
|
||||
const io = require('socket.io')(http)
|
||||
|
||||
const consumer = require('./consumer')
|
||||
const PORT = process.env.PORT || 3001
|
||||
|
||||
global.users = []
|
||||
|
||||
server.get('/', (req, res) => {
|
||||
res.send('React Chat API')
|
||||
})
|
||||
consumer.start(io)
|
||||
|
||||
const users = []
|
||||
server.get('/', (req, res) => res.json({ users }))
|
||||
|
||||
io.on('connection', (socket) => {
|
||||
|
||||
socket.on('user:connected', ({ username }) => {
|
||||
users.push({ username, socketId: socket.id })
|
||||
io.emit('user:connected', { username, online: users.length })
|
||||
})
|
||||
|
||||
socket.on('chat:message', ({ message, username, date }) => {
|
||||
io.emit('chat:message', { message, username, date })
|
||||
})
|
||||
|
||||
socket.on('disconnecting', () => {
|
||||
const userIndex = users.findIndex((user) => socket.id === user.socketId)
|
||||
|
||||
if (userIndex !== -1) {
|
||||
io.emit('user:disConnected', { username: users[userIndex].username, online: users.length - 1 })
|
||||
users.splice(userIndex, 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
http.listen(PORT, () => {
|
||||
console.log(`Server running on port: ${PORT}`)
|
||||
})
|
||||
http.listen(PORT, () => console.log(`Server running on port: ${PORT}`))
|
||||
Loading…
x
Reference in New Issue
Block a user