send and show messages per namespace

server/socket/index.js

@@ -1,33 +1,25 @@
 module.exports = io => {
   io.on('connection', async socket => {
     console.log(`A socket connection to the server has been made: ${socket.id}`)
-    socket.join('#chat', () => {
+    socket.join('#projex', () => {
-      sendAllRooms()
+      sendUsers()
-      sendAllUsers()
+      sendNamespaces()
-      send_rooms()
-      send_user_rooms()
     })
 
     socket.on('message', message => {
-      console.log(`send a message to room ${message.room}: ${message}`)
+      console.log('sending message to namespace', message.namespace, message)
-      io.of(message.room).emit('message', message)
+      io.to(message.namespace).emit('message', message)
     })
 
-    socket.on('get all users', () => {
+    socket.on('get users', () => {
-      console.log('get all users')
+      console.log('get users')
-      sendAllUsers()
+      sendUsers()
     })
 
-    socket.on('get my rooms', () => {
+    socket.on('join', namespace => {
-      console.log('get my rooms')
+      console.log('join:', namespace)
-      sendAllRooms()
+      socket.join(namespace, () => {
-    })
+        sendNamespaces()
-
-    socket.on('join', roomName => {
-      console.log('join:', roomName)
-      socket.join(roomName, () => {
-        sendAllRooms()
-        send_user_rooms()
       })
     })
 
@@ -35,57 +27,24 @@ module.exports = io => {
       console.log('part')
     })
 
-    socket.on('get all rooms', () => sendAllRooms())
+    socket.on('get namespaces', () => sendNamespaces())
-    socket.on('join', payload => {
-      console.log(payload.room)
-      socket.join(payload.room, () => {
-        socket.emit('got user rooms', Object.keys(socket.rooms))
-        send_rooms()
-        send_user_rooms()
-      })
-    })
 
-    const sendAllRooms = () => {
+    const sendNamespaces = () => {
-      console.log('get all rooms')
+      const namespaces = Object.keys(io.sockets.adapter.rooms).map(k => ({
-      const allRooms = Object.keys(io.sockets.adapter.rooms)
+        namespace: k,
-        .filter(r => r[0] === '#')
+        sockets: Object.keys(io.sockets.adapter.rooms[k]['sockets']),
-        .map(k => ({
+      }))
-          roomName: k,
+      io.emit('got namespaces', namespaces)
-          sockets: Object.keys(io.sockets.adapter.rooms[k]['sockets']),
-        }))
-      io.emit('got all rooms', allRooms)
     }
 
-    const sendAllUsers = () =>
+    const sendUsers = () =>
-      socket.emit('got all users', Object.keys(io.sockets.sockets))
+      socket.emit('got users', Object.keys(io.sockets.sockets))
 
     socket.on('disconnect', async () => {
       io.emit('user disconnected', { socketId: socket.id })
       console.log(`${socket.id} has disconnected.`)
-      send_rooms()
+      sendNamespaces()
+      sendUsers()
     })
-    io.emit('received users', Object.keys(io.sockets.sockets))
-
-    function send_rooms() {
-      io.emit(
-        'received rooms',
-        Object.keys(io.sockets.adapter.rooms)
-          .filter(r => r[0] === '#')
-          .map(k => ({
-            roomName: k,
-            sockets: Object.keys(io.sockets.adapter.rooms[k]['sockets']),
-          }))
-      )
-    }
-    function send_user_rooms() {
-      console.log(socket.rooms)
-      socket.emit(
-        'received my rooms',
-        Object.keys(io.sockets.adapter.rooms).map(k => ({
-          roomName: k,
-          sockets: io.sockets.adapter.rooms[k]['sockets'],
-        }))
-      )
-    }
   })
 }

src/App.js

@@ -9,8 +9,8 @@ const initialState = {
   loading: true,
   messages: [],
   message: '',
-  allRooms: [],
+  namespaces: [],
-  room: '/',
+  namespace: '/',
   allUsers: [],
   user: {},
 }
@@ -27,14 +27,12 @@ class App extends React.Component {
 
   async fetchData() {
     this.setState({ loading: false })
-    this.socket.emit('get my rooms')
   }
 
   componentDidMount() {
     this.fetchData()
     this.socket.on('connect', () => {
       console.log('connected!')
-      this.socket.emit('get all rooms')
       const user = { socketId: this.socket.id }
       this.setState({ user })
     })
@@ -47,13 +45,13 @@ class App extends React.Component {
       console.log('a user disconnected.', payload)
     })
 
-    this.socket.on('got all rooms', allRooms => {
+    this.socket.on('got namespaces', namespaces => {
-      console.log('got all rooms:', allRooms)
+      console.log('got namespaces:', namespaces)
-      this.setState({ allRooms })
+      this.setState({ namespaces })
     })
 
-    this.socket.on('got all users', allUsers => {
+    this.socket.on('got users', allUsers => {
-      console.log('got all users:', allUsers)
+      console.log('got users:', allUsers)
       this.setState({ allUsers })
     })
 
@@ -61,17 +59,6 @@ class App extends React.Component {
       const messages = this.state.messages.concat(msg)
       this.setState({ messages })
     })
-    this.socket.on('received my rooms', myRooms => {
-      console.log('my rooms', myRooms)
-      this.setState({ myRooms })
-    })
-    this.socket.on('received users', users => {
-      console.log(users)
-      this.setState({ users })
-    })
-    this.socket.on('join', room => {
-      console.log('joining', room)
-    })
   }
 
   handleChange(e) {
@@ -82,7 +69,7 @@ class App extends React.Component {
     const args = this.state.message.split(' ')
     const cmd = args[0].slice(1)
     console.log('command:', cmd)
-    if (cmd === 'join') this.socket.emit('join', args[1])
+    if (cmd === 'join') this.join(args[1])
     this.setState({ message: '' })
   }
   handleSubmit(e) {
@@ -95,19 +82,9 @@ class App extends React.Component {
       date: moment().format('MMMM D YYYY, h:mm a'),
       socketId: this.socket.id,
       text: this.state.message,
-      room: this.state.room,
+      namespace: this.state.namespace,
-    }
-    if (message.text[0] === '/') {
-      // handle commands in separate function
-      const args = this.state.message.split(' ')
-      const cmd = args[0].slice(1, 5)
-      console.log('saw a command:', cmd)
-      if (cmd === 'join') {
-        const room = args[1]
-        console.log('user wants to join', room)
-        this.joinRoom(room)
-      }
     }
+
     this.sendMessage(message)
     this.setState({ message: '' })
   }
@@ -118,13 +95,22 @@ class App extends React.Component {
   renderError() {
     return <div>something went wrong.</div>
   }
-  join(room) {
+  join(namespace) {
-    this.socket.emit('join', room)
+    if (namespace.slice(0, 1) !== '#') return alert('Use a leading #, silly!')
+    console.log('joining', namespace)
+    this.socket.emit('join', namespace)
+    this.setState({ namespace })
   }
   sendMessage(msg) {
     this.socket.emit('message', msg)
   }
   renderApp() {
+    const title =
+      this.state.namespace[0] === '#'
+        ? 'Channel'
+        : this.state.namespace[0] === '/'
+        ? 'server messages'
+        : 'User'
     return (
       <main role="main" className="d-flex h-100 flex-column">
         {/*Navbar*/}
@@ -134,12 +120,12 @@ class App extends React.Component {
             <Nav className="ml-auto mr-3">
               <Dropdown>
                 <Dropdown.Toggle variant="dark" id="dropdown-basic">
-                  All Users
+                  Users
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu className="bg-dark">
                   {this.state.allUsers.map(u => (
-                    <Dropdown.Item className="bg-dark text-light">
+                    <Dropdown.Item key={u} className="bg-dark text-light">
                       {u}
                     </Dropdown.Item>
                   ))}
@@ -147,16 +133,17 @@ class App extends React.Component {
               </Dropdown>
               <Dropdown>
                 <Dropdown.Toggle variant="dark" id="dropdown-basic">
-                  All Channels
+                  Channels
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu className="bg-dark">
-                  {this.state.allRooms.map(r => (
+                  {this.state.namespaces.map(r => (
                     <Dropdown.Item
+                      key={r.namespace}
                       className="bg-dark text-light"
-                      onClick={() => this.joinRoom(r.roomName)}
+                      onClick={() => this.join(r.namespace)}
                     >
-                      {r.roomName}
+                      {r.namespace}
                     </Dropdown.Item>
                   ))}
                 </Dropdown.Menu>
@@ -172,17 +159,30 @@ class App extends React.Component {
             id="sidebar2"
           >
             <h5 className=" border-bottom pb-2">User Channels</h5>
-            {this.state.allRooms
+
-              .filter(r => r.sockets.includes(this.state.user.socketId))
+            <Button
+              key="/"
+              className="btn btn-dark d-flex"
+              onClick={() => this.setState({ namespace: '/' })}
+            >
+              <div className="mr-auto">server</div>
+              {/*<div className="ml-auto">{this.state.allUsers.length}</div>*/}
+            </Button>
+            {this.state.namespaces
+              .filter(
+                r =>
+                  r.namespace[0] === '#' &&
+                  r.sockets.includes(this.state.user.socketId)
+              )
               .map(r => (
-                <button
+                <Button
-                  key={r.roomName}
+                  key={r.namespace}
                   className="btn btn-dark d-flex"
-                  onClick={() => this.setState({ room: r.roomName })}
+                  onClick={() => this.setState({ namespace: r.namespace })}
                 >
-                  <div className="mr-auto">{r.roomName}</div>
+                  <div className="mr-auto">{r.namespace}</div>
                   <div className="ml-auto">{r.sockets.length}</div>
-                </button>
+                </Button>
               ))}
           </div>
 
@@ -190,18 +190,22 @@ class App extends React.Component {
           <div className="bg-secondary d-flex flex-column flex-grow-1 px-2 pb-4">
             {/*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">Channel: {this.state.room}</h4>
+              <h4 className="mr-auto ml-3">
+                {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.map(m => (
+                {this.state.messages
-                  <div className="d-flex justify-content-between" key={m.id}>
+                  .filter(m => m.namespace === this.state.namespace)
-                    <div>{m.date}</div>
+                  .map(m => (
-                    <div>{m.socketId}</div>
+                    <div className="d-flex justify-content-between" key={m.id}>
-                    <div>{m.text}</div>
+                      <div>{m.date}</div>
-                  </div>
+                      <div>{m.socketId}</div>
-                ))}
+                      <div>{m.text}</div>
+                    </div>
+                  ))}
               </div>
               <form onSubmit={this.handleSubmit}>
                 <input
@@ -211,13 +215,13 @@ class App extends React.Component {
                   placeholder="Enter message"
                   onChange={this.handleChange}
                 />
-                <button
+                <Button
                   className="btn btn-dark"
                   type="submit"
                   onSubmit={this.handleSubmit}
                 >
                   submit
-                </button>
+                </Button>
               </form>
             </div>
           </div>