tsr/ircz
1
0
Fork 0
forked from notnull/ircz
Code Releases Activity

lots of refactoring

Browse Source 
backend
- join channels on frontend
- broadcast 'user connected'
- emit 'user joined', 'user left', 'changed nick', 'user disconnected'

frontend
- handleSubmit > submitMessage
- formatMessage()
- chats on state with channels and private chats
- announce 'user connected', 'user joined', 'user left', 'changed nick'
- no longer emit 'chat'
- show nick in message window instead of socketId
This commit is contained in:
notnull 2019-07-26 14:56:24 -04:00 committed by data
parent 0630f346b5
commit 6da52f2770
2 changed files with 296 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
server/socket/index.js
View File

@ -4,47 +4,41 @@ 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() // back to socket
sendUser(users[socket.id]) // announced to all
sendNamespaces()
})
// announce to all
socket.broadcast.emit('user connected', users[socket.id])
// send all users TODO remove
socket.emit(
'got users',
Object.keys(io.sockets.sockets).map(socketId => users[socketId])
)
socket.on('message', message => {
console.log('sending message to namespace', message.namespace, message)
io.to(message.namespace).emit('message', message)
console.log('sending message to ', message.to, message)
io.to(message.to).emit('message', message)
})
socket.on('join', namespace => {
console.log('join:', namespace)
const socketId = socket.id
console.log(`${socketId} joins ${namespace}`)
socket.join(namespace, () => {
sendNamespaces()
io.to(namespace).emit('user joined', { namespace, socketId })
sendNamespace(namespace)
})
})
socket.on('chat', user => {
const target = io.sockets.sockets[user.socketId]
if (!target) return
if (socket.id === target.id) {
console.log('Not allowing chat with itself', socket.id, target.id)
return
}
// create a shared namespace
const namespace = `${socket.id.substr(0, 5)}.${target.id.substr(0, 5)}`
console.log(`${socket.id} starts chat with ${target.id} in ${namespace}`)
socket.join(namespace)
target.join(namespace)
sendNamespaces()
})
socket.on('part', namespace => {
console.log('part', socket.id, namespace)
const socketId = socket.id
console.log('part', socketId, namespace)
socket.leave(namespace, () => {
sendNamespaces()
io.to(namespace).emit('user left', { namespace, socketId })
sendNamespace(namespace)
})
})
socket.on('change nick', nick => {
io.emit('nick changed', { socketId: socket.id, nick: nick })
io.emit('changed nick', { socketId: socket.id, nick: nick })
users[socket.id]['nick'] = nick
})
socket.on('get namespaces', () => sendNamespaces())
@ -57,14 +51,19 @@ module.exports = io => {
io.emit('got namespaces', namespaces)
}
const sendUser = user => socket.broadcast.emit('user connected', user)
const sendUsers = () =>
socket.emit('got users', Object.keys(users).map(u => users[u]))
socket.on('disconnect', async () => {
io.emit('user disconnected', { socketId: socket.id })
io.emit('user disconnected', socket.id)
console.log(`${socket.id} has disconnected.`)
sendNamespaces()
//sendNamespaces()
})
const sendNamespace = namespace => {
if (!io.sockets.adapter.rooms[namespace]) return
const newNamespace = {
namespace,
sockets: Object.keys(io.sockets.adapter.rooms[namespace].sockets),
}
io.emit('got namespace', newNamespace)
}
})
}

354
src/App.js
View File

@ -9,7 +9,8 @@ const initialState = {
loading: true,
messages: [],
message: '',
namespaces: [],
allNamespaces: [],
chats: [],
namespace: '/',
allUsers: [],
user: {},
@ -21,7 +22,7 @@ class App extends React.Component {
this.state = initialState
this.socket = socket
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.submitMessage = this.submitMessage.bind(this)
this.join = this.join.bind(this)
this.readMessages = this.readMessages.bind(this)
}
@ -34,35 +35,145 @@ class App extends React.Component {
this.fetchData()
this.socket.on('connect', () => {
console.log(`I am ${socket.id}`)
this.join('#projex')
const user = { socketId: this.socket.id, nick: this.socket.id }
this.setState({ user, namespace: this.socket.id })
this.setState({ user })
})
this.socket.on('user connected', user => {
console.log('a new user connected!', user.nick)
console.log(`${user.nick} connected.`)
const allUsers = this.state.allUsers.concat(user)
this.setState({ allUsers })
})
this.socket.on('nick changed', user => {
this.socket.on('user disconnected', socketId => {
console.log(`${socketId} disconnected.`)
const allUsers = this.state.allUsers.map(u => {
if (u.socketId === socketId) u.offline = true
return u
})
const oldNick = allUsers.find(u => u.socketId === socketId).nick
this.setState({ allUsers })
// inform channels user was part of
this.state.chats.map(c => {
if (c === socketId) {
const messages = this.state.messages.concat(
this.formatMessage(
`${oldNick} disconnected`,
socketId,
'[server]',
c,
c === this.state.namespace ? true : false
)
)
this.setState({ messages })
}
this.state.allNamespaces.map(n => {
if (n.namespace === c && n.sockets.find(s => s === socketId)) {
const messages = this.state.messages.concat(
this.formatMessage(
`${oldNick} disconnected`,
socketId,
'[server]',
c,
c === this.state.namespace ? true : false
)
)
this.setState({ messages })
}
return n
})
return c
})
})
this.socket.on('user joined', data => {
const { namespace, socketId } = data
const user = this.state.allUsers.find(u => u.socketId === socketId)
console.log(`${user.nick} joined ${namespace}`)
const messages = this.state.messages.concat(
this.formatMessage(
`${user.nick} joined ${namespace}`,
socketId,
'[server]',
namespace,
namespace === this.state.namespace ? true : false
)
)
this.setState({ messages })
})
this.socket.on('user left', data => {
const { namespace, socketId } = data
const user = this.state.allUsers.find(u => u.socketId === socketId)
console.log(`${user.nick} left ${namespace}`)
const messages = this.state.messages.concat(
this.formatMessage(
`${user.nick} left ${namespace}`,
socketId,
'[server]',
namespace,
namespace === this.state.namespace ? true : false
)
)
this.setState({ messages })
})
this.socket.on('changed nick', user => {
if (user.socketId === this.state.user.socketId) return
console.log(`${user.socketId} is now known as ${user.nick}.`)
const allUsers = this.state.allUsers
const oldNick = allUsers.find(u => u.socketId === user.socketId).nick
// inform channels user is part of
this.state.chats.map(c => {
if (c === user.socketId) {
const messages = this.state.messages.concat(
this.formatMessage(
`${oldNick} is now known as ${user.nick}`,
user.socketId,
'[server]',
c,
c === this.state.namespace ? true : false
)
)
this.setState({ messages })
}
this.state.allNamespaces.map(n => {
if (n.namespace === c && n.sockets.find(s => s === user.socketId)) {
const messages = this.state.messages.concat(
this.formatMessage(
`${oldNick} is now known as ${user.nick}`,
user.socketId,
'[server]',
c,
c === this.state.namespace ? true : false
)
)
this.setState({ messages })
}
return n
})
return c
})
// update nick
allUsers.map(u => {
if (u.socketId === user.socketId) u.nick = user.nick
return u
})
console.log('new nick', user)
this.setState({ allUsers })
})
this.socket.on('user disconnected', socketId => {
console.log('a user disconnected.', socketId)
const oldUsers = this.state.allUsers
const allUsers = oldUsers.filter(u => u.socketId !== socketId)
this.setState({ allUsers })
})
this.socket.on('got namespaces', namespaces => {
console.log('got namespaces:', namespaces)
this.setState({ namespaces })
this.socket.on('got namespace', namespace => {
console.log('got namespace:', namespace)
const allNamespaces = this.state.allNamespaces
.filter(n => n.namespace !== namespace.namespace)
.concat(namespace)
this.setState({ allNamespaces })
})
this.socket.on('got namespaces', allNamespaces => {
console.log('got namespaces:', allNamespaces)
this.setState({ allNamespaces })
})
this.socket.on('got users', allUsers => {
@ -71,14 +182,23 @@ class App extends React.Component {
})
this.socket.on('message', msg => {
if (msg.namespace === this.state.namespace) msg.read = true
if (
msg.to === this.state.user.socketId &&
!this.state.chats.find(c => c === msg.from)
) {
console.log(`${msg.from} wants to chat with me.`)
const chats = this.state.chats.concat(msg.from)
this.setState({ chats })
}
if (
(msg.to[0] === '#' && msg.to === this.state.namespace) ||
(msg.to[0] !== '#' && msg.from === this.state.namespace)
)
msg.read = true
const messages = this.state.messages.concat(msg)
console.log(msg)
this.setState({ messages })
})
this.socket.on('nick change', user => {
console.log('new nick', user)
})
}
handleChange(e) {
@ -88,29 +208,51 @@ class App extends React.Component {
parseCommand() {
const args = this.state.message.split(' ')
const cmd = args[0].slice(1)
console.log('command:', cmd)
if (cmd === 'join') this.join(args[1])
else if (cmd === 'part') this.part(args[1])
else if (cmd === 'nick') this.nick(args[1])
if (cmd === 'join') {
if (!args[1]) {
alert('did you forget a channel to join?')
return
}
this.join(args[1])
} else if (cmd === 'part' || cmd === 'leave') {
this.part(args[1] ? args[1] : this.state.namespace)
} else if (cmd === 'nick') this.nick(args[1])
else {
alert(`unknown command: ${cmd}`)
}
this.setState({ message: '' })
}
handleSubmit(e) {
e.preventDefault()
if (this.state.message[0] === '/') return this.parseCommand()
formatMessage(text, from, nick, to, read) {
if (!text || !from || !to || !nick) {
console.log(
'[formatMessage] Dropping malformed message (requiring text, from, nick and to).'
)
}
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.state.nick,
to: this.state.namespace,
read: false,
text: text,
from: from,
nick: nick,
to: to,
read: read,
}
return message
}
submitMessage(e) {
e.preventDefault()
this.sendMessage(message)
if (this.state.message[0] === '/') return this.parseCommand()
if (!this.state.message.length > 0) return
this.sendMessage(
this.formatMessage(
this.state.message,
this.state.user.socketId,
this.state.user.nick,
this.state.namespace
)
)
this.setState({ message: '' })
}
renderLoading() {
@ -122,37 +264,59 @@ class App extends React.Component {
}
join(namespace) {
if (namespace.slice(0, 1) !== '#') return alert('Use a leading #, silly!')
if (this.state.chats.find(c => c === namespace)) return
console.log('joining', namespace)
const chats = this.state.chats.concat(namespace)
this.socket.emit('join', namespace)
this.setState({ namespace })
this.setState({ namespace, chats })
}
part(namespace) {
console.log(`leaving ${namespace}`)
socket.emit('part', namespace)
const chats = this.state.chats.filter(c => c !== namespace)
this.setState({ chats, namespace: '/' })
}
nick(nick) {
if (nick[0] === '#') {
alert('nick cannot start with #, sorry!')
return
}
console.log(`Changing nick to ${nick}`)
const user = this.state.user
user.nick = nick
this.setState({ user })
this.socket.emit('change nick', nick)
}
query(user) {
console.log(`starting query with ${user.nick}`)
this.socket.emit('chat', user)
this.setState({ namespace: user.socketId })
if (this.state.chats.find(c => c === user.socketId)) {
this.setState({ namespace: user.socketId })
return
}
console.log(`starting chat with ${user.nick}`)
const chats = this.state.chats.concat(user.socketId)
this.setState({ namespace: user.socketId, chats })
}
sendMessage(msg) {
this.socket.emit('message', msg)
if (msg.to[0] !== '#') {
if (msg.to === this.state.namespace) msg.read = true
const messages = this.state.messages.concat(msg)
this.setState({ messages })
}
}
findUnreadMessages(nsp) {
countUnreadMessages(nsp) {
return this.state.messages.filter(
m => m.read === false && m.namespace === nsp
m =>
!m.read &&
(m.to === nsp || (m.to === this.state.user.socketId && m.from === nsp))
).length
}
readMessages(nsp) {
const messages = this.state.messages
messages.map(m => {
if (m.namespace === nsp && m.read === false) {
if (!m.read && (m.to === nsp || m.from === nsp)) {
m.read = true
}
return m
@ -169,8 +333,8 @@ class App extends React.Component {
this.state.namespace[0] === '#'
? 'Channel'
: this.state.namespace === this.state.user.socketId
? 'Me'
: 'User'
? 'Namespace'
: 'Chat with'
return (
<main role="main" className="d-flex h-100 flex-column">
@ -186,7 +350,9 @@ class App extends React.Component {
<Dropdown.Menu className="bg-dark">
{this.state.allUsers
.filter(u => u.nick !== this.state.user.nick)
.filter(
u => u.socketId !== this.socket.id && u.offline !== true
)
.map(u => (
<Dropdown.Item
key={u.socketId}
@ -204,7 +370,7 @@ class App extends React.Component {
</Dropdown.Toggle>
<Dropdown.Menu className="bg-dark">
{this.state.namespaces
{this.state.allNamespaces
.filter(n => n.namespace[0] === '#')
.map(r => (
<Dropdown.Item
@ -229,48 +395,47 @@ class App extends React.Component {
>
<h5 className=" border-bottom pb-2">Chats</h5>
<Button
key={this.state.user.socketId}
key="/"
className="btn btn-dark d-flex"
onClick={() => this.activateChat(this.state.user.socketId)}
onClick={() => this.activateChat('/')}
>
<div className="mr-auto">server</div>
{/*<div className="ml-auto">{this.state.allUsers.length}</div>*/}
</Button>
{this.state.namespaces
.filter(
r =>
r.sockets &&
r.sockets.includes(this.state.user.socketId) &&
r.namespace !== this.state.user.socketId
)
.map(r => (
<Button
key={r.namespace}
className="btn btn-dark d-flex"
onClick={() => this.activateChat(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.countUnreadMessages(c) > 0 ? 'text-danger' : ''
}`}
>
<div
className={`mr-auto ${
this.findUnreadMessages(r.namespace) > 0
? 'text-danger'
: ''
}`}
>
{r.namespace}
{c[0] === '#' ||
!this.state.allUsers.find(u => u.socketId === c)
? c
: this.state.allUsers.find(u => u.socketId === c)['nick']}
</div>
{this.countUnreadMessages(c) > 0 ? (
<div className="mr-auto badge bg-danger">
{this.countUnreadMessages(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>
))}
) : null}
{/* user count for channels */}
{c[0] === '#' &&
this.state.allNamespaces &&
this.state.allNamespaces.find(n => n.namespace === c) ? (
<div className="ml-auto">
{
this.state.allNamespaces.find(n => n.namespace === c)
.sockets.length
}
</div>
) : null}
</Button>
))}
</div>
{/*Main Section*/}
@ -278,23 +443,32 @@ class App extends React.Component {
{/*Main Section Header*/}
<div className="d-flex justify-content-between flex-wrap flex-md-nowrap pt-3 pb-2 mb-3 border-bottom">
<h4 className="mr-auto ml-3">
{title}: {this.state.namespace}
{title} {this.state.namespace}
</h4>
</div>
{/*Main Section Content*/}
<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[0] === '#' && m.to === this.state.namespace) ||
(m.to[0] !== '#' && m.from === this.state.namespace) ||
(m.from === this.state.user.socketId &&
m.to === this.state.namespace)
)
.map(m => (
<div className="d-flex justify-content-between" key={m.id}>
<div>{m.date}</div>
<div>{m.from}</div>
<div
className="row d-flex justify-content-between"
key={m.id}
>
<div className="col">{m.date}</div>
<div className="col">{m.nick}</div>
<div>{m.text}</div>
</div>
))}
</div>
<form onSubmit={this.handleSubmit}>
<form onSubmit={this.submitMessage}>
<input
className="bg-light p-2 w-100"
name="message"
@ -305,9 +479,9 @@ class App extends React.Component {
<Button
className="btn btn-dark"
type="submit"
onSubmit={this.handleSubmit}
onSubmit={this.submitMessage}
>
submit as {this.state.nick}
submit as {this.state.user.nick}
</Button>
</form>
</div>