server/socket/index.js

@@ -1,50 +1,65 @@
 module.exports = io => {
   io.on('connection', async socket => {
     console.log(`A socket connection to the server has been made: ${socket.id}`)
-    socket.join('#projex', () => {
+    socket.join('#chat', () => {
-      sendUsers()
+      socket.emit('get my rooms', socket.rooms)
-      sendNamespaces()
     })
 
     socket.on('message', message => {
-      console.log('sending message to namespace', message.namespace, message)
+      io.to(message.room).emit(message)
-      io.to(message.namespace).emit('message', message)
     })
 
-    socket.on('get users', () => {
+    socket.on('get all users', () => {
-      console.log('get users')
+      console.log('get all users')
-      sendUsers()
+      console.log(Object.keys(io.sockets.sockets))
     })
 
-    socket.on('join', namespace => {
+    socket.on('get all rooms', () => {
-      console.log('join:', namespace)
+      console.log('get all rooms')
-      socket.join(namespace, () => {
+      console.log(
-        sendNamespaces()
+        Object.keys(io.sockets.adapter.rooms)
-      })
+          .filter(r => r[0] === '#')
-    })
+          .map(k => ({
-
+            roomName: k,
-    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)
+      )
-    }
+    })
 
-    const sendUsers = () =>
+    socket.on('get my rooms', () => {
-      socket.emit('got users', Object.keys(io.sockets.sockets))
+      console.log('get my rooms')
+      console.log(Object.keys(socket.rooms))
+    })
 
+    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.`)
-      sendNamespaces()
+      io.emit(
-      sendUsers()
+        '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']),
+          }))
+      )
     })
   })
 }

src/App.js

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