added namespaces

server/socket/index.js

@@ -2,64 +2,62 @@ 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)
+      sendAllRooms()
+      sendAllUsers()
     })
 
     socket.on('message', message => {
-      io.to(message.room).emit(message)
+      console.log(`send a message to room ${message.room}: ${message}`)
+      io.of(message.room).emit('message', message)
     })
 
     socket.on('get all users', () => {
       console.log('get all users')
-      console.log(Object.keys(io.sockets.sockets))
+      sendAllUsers()
-    })
-
-    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,
-            sockets: Object.keys(io.sockets.adapter.rooms[k]['sockets']),
-          }))
-      )
     })
 
     socket.on('get my rooms', () => {
       console.log('get my rooms')
-      console.log(Object.keys(socket.rooms))
+      sendAllRooms()
     })
 
-    socket.on('join a room', roomName => {
+    socket.on('join', roomName => {
-      console.log('join a room')
+      console.log('join:', roomName)
       socket.join(roomName, () => {
-        socket.emit('get my rooms')
+        sendAllRooms()
       })
     })
 
-    socket.on('leave a room', () => {
+    socket.on('part', () => {
-      console.log('leave a room')
+      console.log('part')
     })
 
-    socket.on('join', payload => {
+    socket.on('get all rooms', () => sendAllRooms())
-      console.log(payload.room)
+    socket.on('send all clients', () => {
-      socket.join({ room: payload.room }, () => {
+      // https://socket.io/docs/server-api/#namespace-clients-callback
-        socket.emit('got user rooms', Object.keys(socket.rooms))
+      io.clients((error, clients) => {
+        if (error) throw error
+        console.log(clients)
       })
     })
-    socket.on('disconnect', async () => {
+
-      io.emit('user disconnected', { socketId: socket.id })
+    const sendAllRooms = () => {
-      console.log(`${socket.id} has disconnected.`)
+      console.log('get all rooms')
-      io.emit(
+      const allRooms = Object.keys(io.sockets.adapter.rooms)
-        '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']),
         }))
-      )
+      io.emit('got all rooms', allRooms)
+    }
+
+    const sendAllUsers = () =>
+      socket.emit('got all users', Object.keys(io.sockets.sockets))
+
+    socket.on('disconnect', async () => {
+      io.emit('user disconnected', { socketId: socket.id })
+      console.log(`${socket.id} has disconnected.`)
     })
   })
 }

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'
 
@@ -10,9 +10,8 @@ const initialState = {
   messages: [],
   message: '',
   allRooms: [],
-  myRooms: [],
   room: '/',
-  users: [],
+  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,11 @@ class App extends React.Component {
 
   componentDidMount() {
     this.fetchData()
-    this.socket.on('message', msg => {
+    this.socket.on('connect', () => {
-      const messages = this.state.messages.concat(msg)
+      console.log('connected!')
-      this.setState({ messages })
+      this.socket.emit('get all rooms')
+      const user = { socketId: this.socket.id }
+      this.setState({ user })
     })
 
     this.socket.on('user connected', payload => {
@@ -45,14 +46,19 @@ class App extends React.Component {
       console.log('a user disconnected.', payload)
     })
 
-    this.socket.on('received rooms', rooms => {
+    this.socket.on('got all rooms', allRooms => {
-      console.log(rooms)
+      console.log('got all rooms:', allRooms)
-      this.setState({ rooms })
+      this.setState({ allRooms })
     })
 
-    this.socket.on('get user rooms', roomArray => {
+    this.socket.on('got all users', allUsers => {
-      const myRooms = roomArray.filter(roomString => roomString[0] === '#')
+      console.log('got all users:', allUsers)
-      this.setState({ myRooms })
+      this.setState({ allUsers })
+    })
+
+    this.socket.on('message', msg => {
+      const messages = this.state.messages.concat(msg)
+      this.setState({ messages })
     })
   }
 
@@ -60,8 +66,18 @@ 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.socket.emit('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'),
@@ -79,8 +95,8 @@ class App extends React.Component {
   renderError() {
     return <div>something went wrong.</div>
   }
-  joinRoom(room) {
+  join(room) {
-    this.socket.emit('join', { room })
+    this.socket.emit('join', room)
   }
   sendMessage(msg) {
     this.socket.emit('message', msg)
@@ -99,9 +115,9 @@ class App extends React.Component {
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu className="bg-dark">
-                  {this.state.users.map(r => (
+                  {this.state.allUsers.map(u => (
                     <Dropdown.Item className="bg-dark text-light">
-                      {r.roomName}
+                      {u}
                     </Dropdown.Item>
                   ))}
                 </Dropdown.Menu>
@@ -113,37 +129,16 @@ class App extends React.Component {
 
                 <Dropdown.Menu className="bg-dark">
                   {this.state.allRooms.map(r => (
-                    <Dropdown.Item className="bg-dark text-light">
+                    <Dropdown.Item
+                      className="bg-dark text-light"
+                      onClick={() => this.joinRoom(r.roomName)}
+                    >
                       {r.roomName}
                     </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,12 +149,13 @@ 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.allRooms
-            {this.state.myRooms.map(r => (
+              .filter(r => r.sockets.includes(this.state.user.socketId))
+              .map(r => (
                 <button
                   key={r.roomName}
                   className="btn btn-dark d-flex"
-                onClick={() => this.joinRoom(r.roomName)}
+                  onClick={() => this.setState({ room: r.roomName })}
                 >
                   <div className="mr-auto">{r.roomName}</div>
                   <div className="ml-auto">{r.sockets.length}</div>
@@ -171,14 +167,12 @@ 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">Channel: {this.state.room}</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
+                {this.state.messages.map(m => (
-                  .filter(m => m.room === this.state.room)
-                  .map(m => (
                   <div className="d-flex justify-content-between" key={m.id}>
                     <div>{m.date}</div>
                     <div>{m.socketId}</div>