lots of refactoring

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

server/socket/index.js

@@ -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
+    // announce to all
-      sendUser(users[socket.id]) // announced to all
+    socket.broadcast.emit('user connected', users[socket.id])
-      sendNamespaces()
+    // 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)
+      console.log('sending message to ', message.to, message)
-      io.to(message.namespace).emit('message', 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)
+    }
   })
 }

src/App.js

@@ -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 => {
+    this.socket.on('got namespace', namespace => {
-      console.log('got namespaces:', namespaces)
+      console.log('got namespace:', namespace)
-      this.setState({ namespaces })
+      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') {
-    if (cmd === 'join') this.join(args[1])
+      if (!args[1]) {
-    else if (cmd === 'part') this.part(args[1])
+        alert('did you forget a channel to join?')
-    else if (cmd === 'nick') this.nick(args[1])
+        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) {
+  formatMessage(text, from, nick, to, read) {
-    e.preventDefault()
+    if (!text || !from || !to || !nick) {
-
+      console.log(
-    if (this.state.message[0] === '/') return this.parseCommand()
+        '[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: text,
-      text: this.state.message,
+      from: from,
-      namespace: this.state.namespace,
+      nick: nick,
-      from: this.state.nick,
+      to: to,
-      to: this.state.namespace,
+      read: read,
-      read: false,
     }
+    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}`)
+    if (this.state.chats.find(c => c === user.socketId)) {
-    this.socket.emit('chat', user)
+      this.setState({ namespace: 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'
+        ? 'Namespace'
-        : 'User'
+        : '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
+            {this.state.chats.map(c => (
-              .filter(
+              <Button
-                r =>
+                key={c}
-                  r.sockets &&
+                className="btn btn-dark d-flex"
-                  r.sockets.includes(this.state.user.socketId) &&
+                onClick={() => this.activateChat(c)}
-                  r.namespace !== this.state.user.socketId
+              >
-              )
+                <div
-              .map(r => (
+                  className={`mr-auto ${
-                <Button
+                    this.countUnreadMessages(c) > 0 ? 'text-danger' : ''
-                  key={r.namespace}
+                  }`}
-                  className="btn btn-dark d-flex"
-                  onClick={() => this.activateChat(r.namespace)}
                 >
-                  <div
+                  {c[0] === '#' ||
-                    className={`mr-auto ${
+                  !this.state.allUsers.find(u => u.socketId === c)
-                      this.findUnreadMessages(r.namespace) > 0
+                    ? c
-                        ? 'text-danger'
+                    : this.state.allUsers.find(u => u.socketId === c)['nick']}
-                        : ''
+                </div>
-                    }`}
+                {this.countUnreadMessages(c) > 0 ? (
-                  >
+                  <div className="mr-auto badge bg-danger">
-                    {r.namespace}
+                    {this.countUnreadMessages(c)}
                   </div>
-                  {/*<div className="mr-auto badge bg-success">
+                ) : null}
-                      this.state.messages.filter(
+                {/* user count for channels */}
-                        m => m.namespace === r.namespace
+                {c[0] === '#' &&
-                      ).length
+                this.state.allNamespaces &&
-                  </div>  */}
+                this.state.allNamespaces.find(n => n.namespace === c) ? (
-                  {this.findUnreadMessages(r.namespace) > 0 ? (
+                  <div className="ml-auto">
-                    <div className="mr-auto badge bg-danger">
+                    {
-                      {this.findUnreadMessages(r.namespace)}
+                      this.state.allNamespaces.find(n => n.namespace === c)
-                    </div>
+                        .sockets.length
-                  ) : null}
+                    }
-                  <div className="ml-auto">{r.sockets.length}</div>
+                  </div>
-                </Button>
+                ) : 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
-                      <div>{m.date}</div>
+                      className="row d-flex justify-content-between"
-                      <div>{m.from}</div>
+                      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>