Lesson: Sending Messages to Rooms

Andrew Mead · Andrew Mead · commit f7f096b35f26 · 2019-02-05T11:08:35.000-05:00
diff --git a/chat-app/public/chat.html b/chat-app/public/chat.html
@@ -17,7 +17,7 @@
 
             <div class="compose">
                 <form id="message-form">
-                    <input name="message" placeholder="Message">
+                    <input name="message" placeholder="Message" required autocomplete="off">
                     <button>Send</button>
                 </form>
                 <button id="send-location">Send location</button>
@@ -28,7 +28,7 @@
     <script id="message-template" type="text/html">
             <div class="message">
                 <p>
-                    <span class="message__name">Some User Name</span>
+                    <span class="message__name">{{username}}</span>
                     <span class="message__meta">{{createdAt}}</span>
                 </p>
                 <p>{{message}}</p>
@@ -38,7 +38,7 @@
     <script id="location-message-template" type="text/html">
             <div class="message">
                 <p>
-                    <span class="message__name">Some User Name</span>
+                    <span class="message__name">{{username}}</span>
                     <span class="message__meta">{{createdAt}}</span>
                 </p>
                 <p><a href="{{url}}" target="_blank">My current location</a></p>
diff --git a/chat-app/public/js/chat.js b/chat-app/public/js/chat.js
@@ -17,6 +17,7 @@ const { username, room } = Qs.parse(location.search, { ignoreQueryPrefix: true }
 socket.on('message', (message) => {
     console.log(message)
     const html = Mustache.render(messageTemplate, {
+        username: message.username,
         message: message.text,
         createdAt: moment(message.createdAt).format('h:mm a')
     })
@@ -26,6 +27,7 @@ socket.on('message', (message) => {
 socket.on('locationMessage', (message) => {
     console.log(message)
     const html = Mustache.render(locationMessageTemplate, {
+        username: message.username,
         url: message.url,
         createdAt: moment(message.createdAt).format('h:mm a')
     })
diff --git a/chat-app/src/index.js b/chat-app/src/index.js
@@ -27,33 +27,35 @@ io.on('connection', (socket) => {
 
         socket.join(user.room)
 
-        socket.emit('message', generateMessage('Welcome!'))
-        socket.broadcast.to(user.room).emit('message', generateMessage(`${user.username} has joined!`))
+        socket.emit('message', generateMessage('Admin', 'Welcome!'))
+        socket.broadcast.to(user.room).emit('message', generateMessage('Admin', `${user.username} has joined!`))
 
         callback()
     })
 
     socket.on('sendMessage', (message, callback) => {
+        const user = getUser(socket.id)
         const filter = new Filter()
 
         if (filter.isProfane(message)) {
             return callback('Profanity is not allowed!')
         }
 
-        io.to('Center City').emit('message', generateMessage(message))
+        io.to(user.room).emit('message', generateMessage(user.username, message))
         callback()
     })
 
     socket.on('sendLocation', (coords, callback) => {
-        io.emit('locationMessage', generateLocationMessage(`https://google.com/maps?q=${coords.latitude},${coords.longitude}`))
+        const user = getUser(socket.id)
+        io.to(user.room).emit('locationMessage', generateLocationMessage(user.username, `https://google.com/maps?q=${coords.latitude},${coords.longitude}`))
         callback()
     })
 
     socket.on('disconnect', () => {
         const user = removeUser(socket.id)
 
         if (user) {
-            io.to(user.room).emit('message', generateMessage(`${user.username} has left!`))
+            io.to(user.room).emit('message', generateMessage('Admin', `${user.username} has left!`))
         }
     })
 })
diff --git a/chat-app/src/utils/messages.js b/chat-app/src/utils/messages.js
@@ -1,12 +1,14 @@
-const generateMessage = (text) => {
+const generateMessage = (username, text) => {
     return {
+        username,
         text,
         createdAt: new Date().getTime()
     }
 }
 
-const generateLocationMessage = (url) => {
+const generateLocationMessage = (username, url) => {
     return {
+        username,
         url,
         createdAt: new Date().getTime()
     }

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,14 @@`
`1`		`-const generateMessage = (text) => {`
	`1`	`+const generateMessage = (username, text) => {`
`2`	`2`	`return {`
	`3`	`+ username,`
`3`	`4`	`text,`
`4`	`5`	`createdAt: new Date().getTime()`
`5`	`6`	`}`
`6`	`7`	`}`
`7`	`8`
`8`		`-const generateLocationMessage = (url) => {`
	`9`	`+const generateLocationMessage = (username, url) => {`
`9`	`10`	`return {`
	`11`	`+ username,`
`10`	`12`	`url,`
`11`	`13`	`createdAt: new Date().getTime()`
`12`	`14`	`}`