首先咱们先拆解核心问题：你现在用socketio.emit广播聊天历史，导致所有在线用户（包括老用户）都收到消息，自然老用户的聊天框会重复加载历史。除了客户端判断的思路，其实服务端有更直接的修复方案，先给你说这个，再讲客户端的判断方法。

方案1：服务端仅给新连接用户发送历史（更高效） #

你的服务端代码里用了socketio.emit，这是全局广播给所有连接的客户端。其实在socketio的事件处理函数里，直接用emit()（不带socketio.前缀）就只会给当前发起请求的客户端发送消息——也就是刚连接的新用户。

修改后的服务端代码：

@socketio.on('sync_messages')
def handle_sync(data):
    # 只给当前请求的客户端发送聊天历史，而非广播给所有人
    emit('show_all_messages', messages)

这样老用户不会收到重复的历史，从根源上解决问题，比客户端判断更省心。

方案2：客户端判断消息是否已存在（按你的需求） #

如果确实需要在客户端处理，核心思路是给每个消息加唯一标识，然后检查页面中是否已有该标识的元素，没有再追加。

步骤1：给消息添加唯一ID（服务端调整） #

首先确保你的messages列表里每个消息都有唯一ID（比如自增ID或者UUID），示例结构如下：

# 每个消息包含唯一id和内容
messages = [
    {"id": 1, "content": "<strong>Alice:</strong> Hi everyone!"},
    {"id": 2, "content": "<strong>Bob:</strong> Welcome to the chat!"}
]

步骤2：客户端判断并添加消息 #

在show_all_messages事件回调里，遍历每个消息，先通过唯一ID检查是否已存在，不存在再创建元素：

socket.on('show_all_messages', function(data) {
  const messagesContainer = document.getElementById('messages');
  data.forEach(message => {
    // 通过data属性检查消息是否已存在于页面
    const existingMessage = messagesContainer.querySelector(`[data-message-id="${message.id}"]`);
    if (!existingMessage) {
      const newNode = document.createElement('div');
      // 给消息元素添加唯一标识的data属性
      newNode.setAttribute('data-message-id', message.id);
      newNode.innerHTML = message.content;
      messagesContainer.appendChild(newNode);
    }
  });
})

如何用JavaScript判断页面元素是否存在？ #

常用的几种方法：

• 通过ID判断：用document.getElementById()，返回null则不存在，否则存在：

  const element = document.getElementById('target-id');
  if (element) {
    console.log('元素存在');
  } else {
    console.log('元素不存在');
  }
  

• 通过CSS选择器判断：用document.querySelector()（匹配第一个符合条件的元素）或document.querySelectorAll()（返回所有匹配元素）：

  // 检查是否存在类为"message"的元素
  const hasMessage = document.querySelector('.message') !== null;
  
  // 检查是否存在指定data属性的元素
  const hasTargetMessage = document.querySelector('[data-message-id="1"]') !== null;
  

• 通过类名判断：用document.getElementsByClassName()，返回HTMLCollection，长度为0则不存在：

  const elements = document.getElementsByClassName('message');
  if (elements.length > 0) {
    console.log('元素存在');
  }
  

内容的提问来源于stack exchange，提问作者salmans911