Broadcast senderId with a message

main.js

@@ -4,6 +4,7 @@ const debugSocket = require('debug')('main:socket')
 const faker = require('faker')
 const config = require('./config')
 const Action = require('./module/Action')
+const util = require('./static/util')
 const $messageForm = $('#message-form')
 const $messageInput = $('#message-input')
 const $messages = $('#messages')
@@ -75,9 +76,13 @@ ws.onmessage = (messageEvent) => {
         debugSocket('eventKey.userConnect', action.data)
         break
       case eventKey.newMessage:
+        /** @type {Payload} */
+        const payload = action.data
+
         // ui
         const $message = $('<div>', {class: 'message'})
-        $message.html(action.data)
+        const html = `${util.short(payload.userId)}: ${payload.message}`
+        $message.html(html)
         $messages.append($message)
 
         // log

module/Action.js

@@ -1,7 +1,7 @@
 class Action {
   /**
    * @param {string} key
-   * @param {string} data
+   * @param {any} data
    */
   constructor (key, data) {
     this.key = key

module/Payload.js

@@ -0,0 +1,12 @@
+class Payload {
+  /**
+   * @param {string} userId
+   * @param {string} message
+   */
+  constructor (userId, message) {
+    this.userId = userId
+    this.message = message
+  }
+}
+
+module.exports = Payload

server.js

@@ -5,13 +5,17 @@ const WebSocket = require('ws')
 const uuid = require('uuid/v1')
 const config = require('./config')
 const Action = require('./module/Action')
+const Payload = require('./module/Payload')
+const util = require('./static/util')
 const port = config.port
 const eventKey = config.eventKey
 const readyStateKey = config.readyStateKey
 const oneSec = 1000
 
 /** @type {string[]} */
 let userIds = []
+/** @type {string[]} */
+let payloads = []
 
 // ================================================================ Function
 
@@ -93,13 +97,17 @@ wss.on('connection', (ws) => {
         case eventKey.message:
           const message = action.data
 
+          // save into payloads
+          const payload = new Payload(ws.id, message)
+          payloads.push(payload)
+
           // broadcast
           forEachClient((ws) => {
-            send(ws, eventKey.newMessage, message)
+            send(ws, eventKey.newMessage, payload)
           })
 
           // log
-          debugSocket(`User {ws.id}: {message}`)
+          debugSocket(`${util.short(ws.id)}: ${message}`)
           break
         default:
           debugSocket('Invalid action', action)

static/util.js

@@ -0,0 +1,13 @@
+/**
+ * @returns {string} 6 length of str
+ */
+function short (str) {
+  const returnedLength = 6
+  if (str && str.length > returnedLength) {
+    return `${str.substr(1, 4)}..`
+  }
+}
+
+module.exports = {
+  short
+}