create private namespaces

server/socket/index.js

@@ -22,6 +22,20 @@ 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)
+        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)}`
+      socket.join(namespace)
+      target.join(namespace)
+      sendNamespaces()
+    })
 
     socket.on('part', () => {
       console.log('part')

src/App.js

@@ -106,6 +106,11 @@ class App extends React.Component {
     this.socket.emit('join', namespace)
     this.setState({ namespace })
   }
+  query(user) {
+    console.log(`starting query with ${user}`)
+    this.socket.emit('chat', user)
+    this.setState({ namespace: user })
+  }
   sendMessage(msg) {
     this.socket.emit('message', msg)
   }
@@ -152,11 +157,17 @@ class App extends React.Component {
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu className="bg-dark">
-                  {this.state.allUsers.map(u => (
+                  {this.state.allUsers
-                    <Dropdown.Item key={u} className="bg-dark text-light">
+                    .filter(u => u !== socket.id)
-                      {u}
+                    .map(u => (
-                    </Dropdown.Item>
+                      <Dropdown.Item
-                  ))}
+                        key={u}
+                        className="bg-dark text-light"
+                        onClick={() => this.query(u)}
+                      >
+                        {u}
+                      </Dropdown.Item>
+                    ))}
                 </Dropdown.Menu>
               </Dropdown>
               <Dropdown>
@@ -165,15 +176,17 @@ class App extends React.Component {
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu className="bg-dark">
-                  {this.state.namespaces.map(r => (
+                  {this.state.namespaces
-                    <Dropdown.Item
+                    .filter(n => n.namespace[0] === '#')
-                      key={r.namespace}
+                    .map(r => (
-                      className="bg-dark text-light"
+                      <Dropdown.Item
-                      onClick={() => this.join(r.namespace)}
+                        key={r.namespace}
-                    >
+                        className="bg-dark text-light"
-                      {r.namespace}
+                        onClick={() => this.join(r.namespace)}
-                    </Dropdown.Item>
+                      >
-                  ))}
+                        {r.namespace}
+                      </Dropdown.Item>
+                    ))}
                 </Dropdown.Menu>
               </Dropdown>
             </Nav>