add part and nick commands, store users as objects

server/socket/index.js

@@ -1,8 +1,12 @@
+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()
+      sendUsers() // back to socket
+      sendUser(users[socket.id]) // announced to all
       sendNamespaces()
     })
 
@@ -17,23 +21,30 @@ module.exports = io => {
         sendNamespaces()
       })
     })
-    socket.on('chat', id => {
-      const target = io.sockets.sockets[id]
-      if (!target || socket.id === target.id) {
-        console.log('Not starting chat.', socket, target)
+    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
       }
-      console.log(`${socket.id} wants to chat with ${target.id}`)
 
       // 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', () => {
-      console.log('part')
+    socket.on('part', namespace => {
+      console.log('part', socket.id, namespace)
+      socket.leave(namespace, () => {
+        sendNamespaces()
+      })
+    })
+    socket.on('change nick', nick => {
+      io.emit('nick changed', { socketId: socket.id, nick: nick })
     })
 
     socket.on('get namespaces', () => sendNamespaces())
@@ -46,14 +57,14 @@ module.exports = io => {
       io.emit('got namespaces', namespaces)
     }
 
+    const sendUser = user => socket.broadcast.emit('user connected', user)
     const sendUsers = () =>
-      io.emit('got users', Object.keys(io.sockets.sockets))
+      socket.emit('got users', Object.keys(users).map(u => users[u]))
 
     socket.on('disconnect', async () => {
       io.emit('user disconnected', { socketId: socket.id })
       console.log(`${socket.id} has disconnected.`)
       sendNamespaces()
-      sendUsers()
     })
   })
 }

src/App.js

@@ -34,16 +34,30 @@ class App extends React.Component {
     this.fetchData()
     this.socket.on('connect', () => {
       console.log(`I am ${socket.id}`)
-      const user = { socketId: this.socket.id }
-      this.setState({ user, nick: this.socket.id, namespace: this.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 => {
-      console.log('a new user connected!', payload)
+    this.socket.on('user connected', user => {
+      console.log('a new user connected!', user.nick)
+      const allUsers = this.state.allUsers.concat(user)
+      this.setState({ allUsers })
     })
 
-    this.socket.on('user disconnected', payload => {
-      console.log('a user disconnected.', payload)
+    this.socket.on('nick changed', user => {
+      const allUsers = this.state.allUsers
+      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 => {
@@ -61,6 +75,10 @@ class App extends React.Component {
       const messages = this.state.messages.concat(msg)
       this.setState({ messages })
     })
+
+    this.socket.on('nick change', user => {
+      console.log('new nick', user)
+    })
   }
 
   handleChange(e) {
@@ -72,7 +90,8 @@ class App extends React.Component {
     const cmd = args[0].slice(1)
     console.log('command:', cmd)
     if (cmd === 'join') this.join(args[1])
-    else if (cmd === 'nick') this.setState({ nick: args[1] })
+    else if (cmd === 'part') this.part(args[1])
+    else if (cmd === 'nick') this.nick(args[1])
     this.setState({ message: '' })
   }
   handleSubmit(e) {
@@ -107,10 +126,18 @@ class App extends React.Component {
     this.socket.emit('join', namespace)
     this.setState({ namespace })
   }
+  part(namespace) {
+    console.log(`leaving ${namespace}`)
+    socket.emit('part', namespace)
+  }
+  nick(nick) {
+    console.log(`Changing nick to ${nick}`)
+    this.socket.emit('change nick', nick)
+  }
   query(user) {
-    console.log(`starting query with ${user}`)
+    console.log(`starting query with ${user.nick}`)
     this.socket.emit('chat', user)
-    this.setState({ namespace: user })
+    this.setState({ namespace: user.socketId })
   }
   sendMessage(msg) {
     this.socket.emit('message', msg)
@@ -159,14 +186,14 @@ class App extends React.Component {
 
                 <Dropdown.Menu className="bg-dark">
                   {this.state.allUsers
-                    .filter(u => u !== socket.id)
+                    .filter(u => u.nick !== this.state.user.nick)
                     .map(u => (
                       <Dropdown.Item
-                        key={u}
+                        key={u.socketId}
                         className="bg-dark text-light"
                         onClick={() => this.query(u)}
                       >
-                        {u}
+                        {u.nick}
                       </Dropdown.Item>
                     ))}
                 </Dropdown.Menu>