chats
This commit is contained in:
parent
a2e7396e56
commit
7cdd78e603
@ -1,6 +1,9 @@
|
||||
const users = {}
|
||||
|
||||
module.exports = io => {
|
||||
io.on('connection', async socket => {
|
||||
console.log(`A socket connection to the server has been made: ${socket.id}`)
|
||||
users[socket.id] = { socketId: socket.id, nick: socket.id }
|
||||
socket.join('#projex', () => {
|
||||
sendUsers()
|
||||
sendNamespaces()
|
||||
@ -23,9 +26,14 @@ module.exports = io => {
|
||||
})
|
||||
})
|
||||
|
||||
socket.on('chat', (from, to) => io.to(to).emit('chat', from))
|
||||
|
||||
socket.on('part', () => {
|
||||
console.log('part')
|
||||
})
|
||||
socket.on('change nick', (socketId, nick) => {
|
||||
users[socketId]['nick'] = nick
|
||||
})
|
||||
|
||||
socket.on('get namespaces', () => sendNamespaces())
|
||||
|
||||
@ -38,7 +46,10 @@ module.exports = io => {
|
||||
}
|
||||
|
||||
const sendUsers = () =>
|
||||
socket.emit('got users', Object.keys(io.sockets.sockets))
|
||||
io.emit(
|
||||
'got users',
|
||||
Object.keys(io.sockets.sockets).map(socketId => users[socketId])
|
||||
)
|
||||
|
||||
socket.on('disconnect', async () => {
|
||||
io.emit('user disconnected', { socketId: socket.id })
|
||||
|
||||
130
src/App.js
130
src/App.js
@ -9,7 +9,8 @@ const initialState = {
|
||||
loading: true,
|
||||
messages: [],
|
||||
message: '',
|
||||
namespaces: [],
|
||||
allNamespaces: [],
|
||||
chats: [],
|
||||
namespace: '/',
|
||||
allUsers: [],
|
||||
user: {},
|
||||
@ -33,9 +34,9 @@ class App extends React.Component {
|
||||
componentDidMount() {
|
||||
this.fetchData()
|
||||
this.socket.on('connect', () => {
|
||||
console.log('connected!')
|
||||
const user = { socketId: this.socket.id }
|
||||
this.setState({ user })
|
||||
console.log(`I am ${socket.id}`)
|
||||
const user = { socketId: this.socket.id, nick: this.socket.id }
|
||||
this.setState({ user, namespace: this.socket.id })
|
||||
})
|
||||
|
||||
this.socket.on('user connected', payload => {
|
||||
@ -46,9 +47,9 @@ class App extends React.Component {
|
||||
console.log('a user disconnected.', payload)
|
||||
})
|
||||
|
||||
this.socket.on('got namespaces', namespaces => {
|
||||
console.log('got namespaces:', namespaces)
|
||||
this.setState({ namespaces })
|
||||
this.socket.on('got all namespaces', allNamespaces => {
|
||||
console.log('got all namespaces:', allNamespaces)
|
||||
this.setState({ allNamespaces })
|
||||
})
|
||||
|
||||
this.socket.on('got users', allUsers => {
|
||||
@ -56,11 +57,25 @@ class App extends React.Component {
|
||||
this.setState({ allUsers })
|
||||
})
|
||||
|
||||
this.socket.on('nick change', (socketId, nick) => {
|
||||
const allUsers = this.state.allUsers
|
||||
allUsers.map(u => {
|
||||
if (u.socketId === socketId) u.nick = nick
|
||||
return u
|
||||
})
|
||||
this.setState({ allUsers })
|
||||
})
|
||||
|
||||
this.socket.on('message', msg => {
|
||||
if (msg.namespace === this.state.namespace) msg.read = true
|
||||
const messages = this.state.messages.concat(msg)
|
||||
this.setState({ messages })
|
||||
})
|
||||
|
||||
this.socket.on('chat', socketId => {
|
||||
const chats = this.state.chats.concat(socketId)
|
||||
this.setState({ chats })
|
||||
})
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
@ -82,10 +97,8 @@ class App extends React.Component {
|
||||
const message = {
|
||||
id: uuid(),
|
||||
date: moment().format('MMMM D YYYY, h:mm a'),
|
||||
socketId: this.socket.id,
|
||||
text: this.state.message,
|
||||
namespace: this.state.namespace,
|
||||
from: this.socket.id,
|
||||
from: this.state.user.socketId,
|
||||
to: this.state.namespace,
|
||||
read: false,
|
||||
}
|
||||
@ -103,10 +116,20 @@ class App extends React.Component {
|
||||
join(namespace) {
|
||||
if (namespace.slice(0, 1) !== '#') return alert('Use a leading #, silly!')
|
||||
console.log('joining', namespace)
|
||||
const chats = this.state.chats.concat(namespace)
|
||||
this.socket.emit('join', namespace)
|
||||
this.setState({ namespace })
|
||||
this.setState({ namespace, chats })
|
||||
}
|
||||
query(user) {
|
||||
console.log(`starting query with ${user.socketId}`)
|
||||
const chats = this.state.chats.concat(user.socketId)
|
||||
this.setState({ namespace: user.socketId, chats })
|
||||
}
|
||||
sendMessage(msg) {
|
||||
if (msg.to[0] !== '#' && !this.state.messages.find(m => m.to === msg.to)) {
|
||||
console.log(`openign a chat with ${msg.to}`)
|
||||
this.socket.emit('chat', msg.to)
|
||||
}
|
||||
this.socket.emit('message', msg)
|
||||
}
|
||||
|
||||
@ -148,11 +171,17 @@ class App extends React.Component {
|
||||
</Dropdown.Toggle>
|
||||
|
||||
<Dropdown.Menu className="bg-dark">
|
||||
{this.state.allUsers.map(u => (
|
||||
<Dropdown.Item key={u} className="bg-dark text-light">
|
||||
{u}
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
{this.state.allUsers
|
||||
.filter(u => u.socketId !== this.socket.id)
|
||||
.map(u => (
|
||||
<Dropdown.Item
|
||||
key={u.socketId}
|
||||
className="bg-dark text-light"
|
||||
onClick={() => this.query(u)}
|
||||
>
|
||||
{u.socketId}
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
<Dropdown>
|
||||
@ -161,15 +190,17 @@ class App extends React.Component {
|
||||
</Dropdown.Toggle>
|
||||
|
||||
<Dropdown.Menu className="bg-dark">
|
||||
{this.state.namespaces.map(r => (
|
||||
<Dropdown.Item
|
||||
key={r.namespace}
|
||||
className="bg-dark text-light"
|
||||
onClick={() => this.join(r.namespace)}
|
||||
>
|
||||
{r.namespace}
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
{this.state.allNamespaces
|
||||
.filter(n => n.namespace[0] === '#')
|
||||
.map(r => (
|
||||
<Dropdown.Item
|
||||
key={r.namespace}
|
||||
className="bg-dark text-light"
|
||||
onClick={() => this.join(r.namespace)}
|
||||
>
|
||||
{r.namespace}
|
||||
</Dropdown.Item>
|
||||
))}
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</Nav>
|
||||
@ -192,35 +223,32 @@ class App extends React.Component {
|
||||
<div className="mr-auto">server</div>
|
||||
{/*<div className="ml-auto">{this.state.allUsers.length}</div>*/}
|
||||
</Button>
|
||||
{this.state.namespaces
|
||||
.filter(
|
||||
r =>
|
||||
r.namespace[0] === '#' &&
|
||||
r.sockets.includes(this.state.user.socketId)
|
||||
)
|
||||
.map(r => (
|
||||
<Button
|
||||
key={r.namespace}
|
||||
className="btn btn-dark d-flex"
|
||||
onClick={() => {
|
||||
this.readMessages(r.namespace)
|
||||
this.setState({ namespace: r.namespace })
|
||||
}}
|
||||
{this.state.chats.map(c => (
|
||||
<Button
|
||||
key={c}
|
||||
className="btn btn-dark d-flex"
|
||||
onClick={() => this.activateChat(c)}
|
||||
>
|
||||
<div
|
||||
className={`mr-auto ${
|
||||
this.findUnreadMessages(c) > 0 ? 'text-danger' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="mr-auto">{r.namespace}</div>
|
||||
{/*<div className="mr-auto badge bg-success">
|
||||
{c}
|
||||
</div>
|
||||
{/*<div className="mr-auto badge bg-success">
|
||||
this.state.messages.filter(
|
||||
m => m.namespace === r.namespace
|
||||
).length
|
||||
</div> */}
|
||||
{this.findUnreadMessages(r.namespace) > 0 ? (
|
||||
<div className="mr-auto badge bg-danger">
|
||||
{this.findUnreadMessages(r.namespace)}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="ml-auto">{r.sockets.length}</div>
|
||||
</Button>
|
||||
))}
|
||||
{this.findUnreadMessages(c) > 0 ? (
|
||||
<div className="mr-auto badge bg-danger">
|
||||
{this.findUnreadMessages(c)}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="ml-auto">count</div>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/*Main Section*/}
|
||||
@ -235,7 +263,7 @@ class App extends React.Component {
|
||||
<div className="d-flex flex-column border border-secondary flex-grow-1">
|
||||
<div className="bg-dark flex-grow-1 p-2 text-light">
|
||||
{this.state.messages
|
||||
.filter(m => m.namespace === this.state.namespace)
|
||||
.filter(m => m.to === this.state.namespace)
|
||||
.map(m => (
|
||||
<div className="d-flex justify-content-between" key={m.id}>
|
||||
<div>{m.date}</div>
|
||||
@ -257,7 +285,7 @@ class App extends React.Component {
|
||||
type="submit"
|
||||
onSubmit={this.handleSubmit}
|
||||
>
|
||||
submit
|
||||
submit as {this.state.user.nick}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user