send and show messages per namespace

server/socket/index.js

@@ -1,65 +1,50 @@
 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.emit('get my rooms', socket.rooms)
+    socket.join('#projex', () => {
+      sendUsers()
+      sendNamespaces()
     })
 
     socket.on('message', message => {
-      io.to(message.room).emit(message)
+      console.log('sending message to namespace', message.namespace, message)
+      io.to(message.namespace).emit('message', message)
     })
 
-    socket.on('get all users', () => {
-      console.log('get all users')
-      console.log(Object.keys(io.sockets.sockets))
+    socket.on('get users', () => {
+      console.log('get users')
+      sendUsers()
     })
 
-    socket.on('get all rooms', () => {
-      console.log('get all rooms')
-      console.log(
-        Object.keys(io.sockets.adapter.rooms)
-          .filter(r => r[0] === '#')
-          .map(k => ({
-            roomName: k,
+    socket.on('join', namespace => {
+      console.log('join:', namespace)
+      socket.join(namespace, () => {
+        sendNamespaces()
+      })
+    })
+
+    socket.on('part', () => {
+      console.log('part')
+    })
+
+    socket.on('get namespaces', () => sendNamespaces())
+
+    const sendNamespaces = () => {
+      const namespaces = Object.keys(io.sockets.adapter.rooms).map(k => ({
+        namespace: k,
         sockets: Object.keys(io.sockets.adapter.rooms[k]['sockets']),
       }))
-      )
-    })
+      io.emit('got namespaces', namespaces)
+    }
 
-    socket.on('get my rooms', () => {
-      console.log('get my rooms')
-      console.log(Object.keys(socket.rooms))
-    })
+    const sendUsers = () =>
+      socket.emit('got users', Object.keys(io.sockets.sockets))
 
-    socket.on('join a room', roomName => {
-      console.log('join a room')
-      socket.join(roomName, () => {
-        socket.emit('get my rooms')
-      })
-    })
-
-    socket.on('leave a room', () => {
-      console.log('leave a room')
-    })
-
-    socket.on('join', payload => {
-      console.log(payload.room)
-      socket.join({ room: payload.room }, () => {
-        socket.emit('got user rooms', Object.keys(socket.rooms))
-      })
-    })
     socket.on('disconnect', async () => {
       io.emit('user disconnected', { socketId: socket.id })
       console.log(`${socket.id} has disconnected.`)
-      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']),
-          }))
-      )
+      sendNamespaces()
+      sendUsers()
     })
   })
 }

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import socket from './socket'
 
-import { Navbar, Nav, Dropdown, DropdownButton, Button } from 'react-bootstrap'
+import { Navbar, Nav, Dropdown, Button } from 'react-bootstrap'
 import uuid from 'uuid'
 import moment from 'moment'
 
@@ -9,10 +9,9 @@ const initialState = {
   loading: true,
   messages: [],
   message: '',
-  allRooms: [],
-  myRooms: [],
-  room: '/',
-  users: [],
+  namespaces: [],
+  namespace: '/',
+  allUsers: [],
   user: {},
 }
 
@@ -23,7 +22,7 @@ class App extends React.Component {
     this.socket = socket
     this.handleChange = this.handleChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
-    this.joinRoom = this.joinRoom.bind(this)
+    this.join = this.join.bind(this)
   }
 
   async fetchData() {
@@ -32,9 +31,10 @@ class App extends React.Component {
 
   componentDidMount() {
     this.fetchData()
-    this.socket.on('message', msg => {
-      const messages = this.state.messages.concat(msg)
-      this.setState({ messages })
+    this.socket.on('connect', () => {
+      console.log('connected!')
+      const user = { socketId: this.socket.id }
+      this.setState({ user })
     })
 
     this.socket.on('user connected', payload => {
@@ -45,14 +45,19 @@ class App extends React.Component {
       console.log('a user disconnected.', payload)
     })
 
-    this.socket.on('received rooms', rooms => {
-      console.log(rooms)
-      this.setState({ rooms })
+    this.socket.on('got namespaces', namespaces => {
+      console.log('got namespaces:', namespaces)
+      this.setState({ namespaces })
     })
 
-    this.socket.on('get user rooms', roomArray => {
-      const myRooms = roomArray.filter(roomString => roomString[0] === '#')
-      this.setState({ myRooms })
+    this.socket.on('got users', allUsers => {
+      console.log('got users:', allUsers)
+      this.setState({ allUsers })
+    })
+
+    this.socket.on('message', msg => {
+      const messages = this.state.messages.concat(msg)
+      this.setState({ messages })
     })
   }
 
@@ -60,15 +65,26 @@ class App extends React.Component {
     this.setState({ [e.target.name]: e.target.value })
   }
 
+  parseCommand() {
+    const args = this.state.message.split(' ')
+    const cmd = args[0].slice(1)
+    console.log('command:', cmd)
+    if (cmd === 'join') this.join(args[1])
+    this.setState({ message: '' })
+  }
   handleSubmit(e) {
     e.preventDefault()
+
+    if (this.state.message[0] === '/') return this.parseCommand()
+
     const message = {
       id: uuid(),
       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,
     }
+
     this.sendMessage(message)
     this.setState({ message: '' })
   }
@@ -79,13 +95,22 @@ class App extends React.Component {
   renderError() {
     return <div>something went wrong.</div>
   }
-  joinRoom(room) {
-    this.socket.emit('join', { room })
+  join(namespace) {
+    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*/}
@@ -95,55 +120,35 @@ 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.users.map(r => (
-                    <Dropdown.Item className="bg-dark text-light">
-                      {r.roomName}
+                  {this.state.allUsers.map(u => (
+                    <Dropdown.Item key={u} className="bg-dark text-light">
+                      {u}
                     </Dropdown.Item>
                   ))}
                 </Dropdown.Menu>
               </Dropdown>
               <Dropdown>
                 <Dropdown.Toggle variant="dark" id="dropdown-basic">
-                  All Channels
+                  Channels
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu className="bg-dark">
-                  {this.state.allRooms.map(r => (
-                    <Dropdown.Item className="bg-dark text-light">
-                      {r.roomName}
+                  {this.state.namespaces.map(r => (
+                    <Dropdown.Item
+                      key={r.namespace}
+                      className="bg-dark text-light"
+                      onClick={() => this.join(r.namespace)}
+                    >
+                      {r.namespace}
                     </Dropdown.Item>
                   ))}
                 </Dropdown.Menu>
               </Dropdown>
             </Nav>
-            <Button
-              variant="dark"
-              onClick={() => {
-                this.socket.emit('get all users')
-              }}
-            >
-              Get All Users
-            </Button>
-            <Button
-              variant="dark"
-              onClick={() => {
-                this.socket.emit('get all rooms')
-              }}
-            >
-              Get All Rooms
-            </Button>
-            <Button
-              variant="dark"
-              onClick={() => {
-                this.socket.emit('get my rooms')
-              }}
-            >
-              Get My Rooms
-            </Button>
           </Navbar.Collapse>
         </Navbar>
 
@@ -154,16 +159,30 @@ class App extends React.Component {
             id="sidebar2"
           >
             <h5 className=" border-bottom pb-2">User Channels</h5>
-            <p>this currently shows all channels</p>
-            {this.state.myRooms.map(r => (
-              <button
-                key={r.roomName}
+
+            <Button
+              key="/"
               className="btn btn-dark d-flex"
-                onClick={() => this.joinRoom(r.roomName)}
+              onClick={() => this.setState({ namespace: '/' })}
             >
-                <div className="mr-auto">{r.roomName}</div>
+              <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
+                  key={r.namespace}
+                  className="btn btn-dark d-flex"
+                  onClick={() => this.setState({ namespace: r.namespace })}
+                >
+                  <div className="mr-auto">{r.namespace}</div>
                   <div className="ml-auto">{r.sockets.length}</div>
-              </button>
+                </Button>
               ))}
           </div>
 
@@ -171,13 +190,15 @@ 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">current channel</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
-                  .filter(m => m.room === this.state.room)
+                  .filter(m => m.namespace === this.state.namespace)
                   .map(m => (
                     <div className="d-flex justify-content-between" key={m.id}>
                       <div>{m.date}</div>
@@ -194,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>