Socket.IO聊天应用显示[object Object]及JS对象转字符串问题咨询

根因说明 #

你遇到的[object Object]显示问题核心有两个：

• 服务端message事件推送的参数格式不统一：欢迎消息是generateMessage返回的带text、createdAt字段的对象，用户加入/离开的广播消息直接推送纯字符串，前端逻辑没有兼容两种格式。
• 前端渲染逻辑错误：直接将消息对象整体插入DOM节点，JS自动调用对象的toString()方法就会输出[object Object]。

分步修复步骤 #

步骤1：统一服务端所有消息格式 #

将所有message事件的推送参数都用generateMessage包裹，保证所有消息都是统一的对象结构，修正后的Socket.IO服务端代码如下：

io.on("connection", (socket) => {
    console.log("New socket connection")

    socket.emit("message", generateMessage("Welcome to the chat"))
    // 用户加入广播改为统一消息格式
    socket.broadcast.emit("message", generateMessage("A new user has joined"))

    socket.on("sendMessage", (message, callback) => {
        // 用户发送的消息也包一层统一格式
        io.emit("message", generateMessage(message))
        callback()
    })
    socket.on("disconnect", () => {
        // 用户离开广播改为统一消息格式
        io.emit("message", generateMessage("A user has left"))
    })
})

步骤2：修正前端渲染逻辑 #

在chat2.js的message事件监听逻辑中，先提取消息对象的text属性，再插入DOM渲染，参考代码如下：
如果你使用了Mustache模板引擎匹配现有template结构：

const socket = io()
const messagesContainer = document.querySelector('#messages')
const messageTemplate = document.querySelector('#message-template').innerHTML

socket.on('message', (message) => {
    // 可按需格式化时间戳后和文本拼接展示
    const renderData = {
        content: `${new Date(message.createdAt).toLocaleTimeString()} ${message.text}`
    }
    const html = Mustache.render(messageTemplate, renderData)
    messagesContainer.insertAdjacentHTML('beforeend', html)
})

如果没有使用模板引擎，可直接操作DOM：

const socket = io()
const messagesContainer = document.querySelector('#messages')

socket.on('message', (message) => {
    const pTag = document.createElement('p')
    pTag.textContent = `${new Date(message.createdAt).toLocaleTimeString()} ${message.text}`
    messagesContainer.appendChild(pTag)
})

JavaScript对象转可展示字符串的常用方法 #

• 正常业务渲染：直接提取对象需要展示的属性，按需拼接为字符串即可，不要直接渲染整个对象。
• 调试场景：使用JSON.stringify(待转换对象, null, 2)可将对象转换为格式化的JSON字符串，方便查看完整结构。

内容的提问来源于stack exchange，提问作者Jake.L.B