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,8 +157,14 @@ 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)
+                    .map(u => (
+                      <Dropdown.Item
+                        key={u}
+                        className="bg-dark text-light"
+                        onClick={() => this.query(u)}
+                      >
                         {u}
                       </Dropdown.Item>
                     ))}
@@ -165,7 +176,9 @@ class App extends React.Component {
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu className="bg-dark">
-                  {this.state.namespaces.map(r => (
+                  {this.state.namespaces
+                    .filter(n => n.namespace[0] === '#')
+                    .map(r => (
                       <Dropdown.Item
                         key={r.namespace}
                         className="bg-dark text-light"