本文介绍如何根据 ajax 返回数据中的 `bot` 布尔字段，动态为聊天消息容器添加 `right` 或默认类，从而在前端区分用户消息（左对齐）与机器人消息（右对齐），并保持 html 结构简洁、css 可扩展。

在构建实时聊天界面时，仅靠统一的 .chat 类无法体现消息发送方的身份差异。为实现“用户消息靠左、机器人消息靠右”的视觉逻辑，关键在于将后端返回的 model.bot 布尔值映射为前端 CSS 类名，并将其动态注入到消息容器元素中。

核心思路是：在 JavaScript 模板字符串拼接前，用三元表达式判断 model.bot 值，生成对应类名字符串（如 'right' 或空字符串），再将其插入

以下是优化后的完整 JS 实现（含必要注释）：

$(document).ready(function() {
  function imgMarkup(model) {
    return model.mediasrc 
      ? `@@##@@`
      : '';
  }

  setInterval(function() {
    $.ajax({
      type: 'GET',
      url: '/checkview',
      success: function(response) {
        console.log('Received messages:', response.models_to_return);
        $('#display').empty();

        response.models_to_return.forEach(function(model) {
          // ✅ 动态决定额外 CSS 类：bot 为 true → 添加 'right'
          const botClass = model.bot ? 'right' : '';

          // ✅ 拼接完整 HTML 片段，支持多类共存
          const temp = `
            
              ${model.datetime}
              ${model.user_id}
              
${model.room}
              ${imgMarkup(model)}
            
          `;
          $('#display').append(temp);
        });
      },
      error: function(xhr, status, err) {
        console.warn('AJAX request failed:', status, err);
      }
    });
  }, 1000);
});

⚠️ 注意事项与最佳实践：

• CSS 需补充 .chat.right 样式：仅添加类名无效，必须在 CSS 中定义其布局行为。例如：

  .chat {
    max-width: 80%;
    margin: 0.5em 0;
    padding: 0.75em 1em;
  }
  .chat.right {
    margin-left: auto; /* 推向右侧 */
    background-color: #007bff; /* 区分色 */
  }
  .chat:not(.right) {
    background-color: #6c757d; /* 用户消息背景 */
  }

• 模板字符串安全建议：若 model.user_id 或 model.room 可能含 HTML 特殊字符（如 ），应使用 textContent 或 DOM 方法替代内联插值，防止 XSS；当前示例假设数据已可信。
• 性能优化提示：频繁的 setInterval + 全量重绘（empty() + 逐条 append()）在消息量大时可能卡顿。进阶方案可采用虚拟滚动、增量更新或 DocumentFragment 批量插入。

通过该方法，你无需修改后端结构或增加复杂状态管理，即可用最小代价实现语义清晰、样式可控的双侧消息布局。