add /nick command

server/socket/index.js

@@ -11,11 +11,6 @@ module.exports = io => {
       io.to(message.namespace).emit('message', message)
     })
 
-    socket.on('get users', () => {
-      console.log('get users')
-      sendUsers()
-    })
-
     socket.on('join', namespace => {
       console.log('join:', namespace)
       socket.join(namespace, () => {
@@ -52,7 +47,7 @@ module.exports = io => {
     }
 
     const sendUsers = () =>
-      socket.emit('got users', Object.keys(io.sockets.sockets))
+      io.emit('got users', Object.keys(io.sockets.sockets))
 
     socket.on('disconnect', async () => {
       io.emit('user disconnected', { socketId: socket.id })

src/App.js

@@ -35,7 +35,7 @@ class App extends React.Component {
     this.socket.on('connect', () => {
       console.log(`I am ${socket.id}`)
       const user = { socketId: this.socket.id }
-      this.setState({ user })
+      this.setState({ user, nick: this.socket.id, namespace: this.socket.id })
     })
 
     this.socket.on('user connected', payload => {
@@ -72,6 +72,7 @@ class App extends React.Component {
     const cmd = args[0].slice(1)
     console.log('command:', cmd)
     if (cmd === 'join') this.join(args[1])
+    else if (cmd === 'nick') this.setState({ nick: args[1] })
     this.setState({ message: '' })
   }
   handleSubmit(e) {
@@ -85,7 +86,7 @@ class App extends React.Component {
       socketId: this.socket.id,
       text: this.state.message,
       namespace: this.state.namespace,
-      from: this.socket.id,
+      from: this.state.nick,
       to: this.state.namespace,
       read: false,
     }
@@ -140,8 +141,8 @@ class App extends React.Component {
     const title =
       this.state.namespace[0] === '#'
         ? 'Channel'
-        : this.state.namespace[0] === '/'
+        : this.state.namespace === this.state.user.socketId
-        ? 'server messages'
+        ? 'Me'
         : 'User'
 
     return (
@@ -201,16 +202,19 @@ class App extends React.Component {
           >
             <h5 className=" border-bottom pb-2">Chats</h5>
             <Button
-              key="/"
+              key={this.state.user.socketId}
               className="btn btn-dark d-flex"
-              onClick={() => this.activateChat('/')}
+              onClick={() => this.activateChat(this.state.user.socketId)}
             >
               <div className="mr-auto">server</div>
               {/*<div className="ml-auto">{this.state.allUsers.length}</div>*/}
             </Button>
             {this.state.namespaces
               .filter(
-                r => r.sockets && r.sockets.includes(this.state.user.socketId)
+                r =>
+                  r.sockets &&
+                  r.sockets.includes(this.state.user.socketId) &&
+                  r.namespace !== this.state.user.socketId
               )
               .map(r => (
                 <Button
@@ -258,7 +262,7 @@ class App extends React.Component {
                   .map(m => (
                     <div className="d-flex justify-content-between" key={m.id}>
                       <div>{m.date}</div>
-                      <div>{m.socketId}</div>
+                      <div>{m.from}</div>
                       <div>{m.text}</div>
                     </div>
                   ))}
@@ -276,7 +280,7 @@ class App extends React.Component {
                   type="submit"
                   onSubmit={this.handleSubmit}
                 >
-                  submit
+                  submit as {this.state.nick}
                 </Button>
               </form>
             </div>