如何通过代码创建所有访问用户都可见的HTML元素？

你目前的逻辑仅操作了单个用户本地浏览器的DOM，消息数据完全存储在用户本地内存中，没有经过服务端同步，其他用户自然无法获取到新消息内容。

基础实现逻辑 #

要实现跨用户消息同步，你需要增加服务端存储、前后端数据同步两层能力，以下是两种适配不同开发能力的实现方案：

方案1：短轮询（新手友好，实现门槛低） #

• 先搭建简单后端服务，可选Node.js、PHP等你更容易上手的语言，搭配轻量数据库（SQLite、MySQL均可）用来持久化存储所有消息
• 后端提供两个基础接口：
  • 消息上报接口：接收前端传来的消息内容、发送时间等信息，写入数据库
  • 消息拉取接口：返回数据库中存储的全量/增量消息数据
• 前端发送消息时，先调用消息上报接口将数据同步到服务端，再渲染到本地DOM
• 前端开启定时轮询（比如每2秒请求一次消息拉取接口），拿到最新消息列表后和本地已渲染内容对比，只渲染新增的消息即可
  示例参考代码：

// 发送消息逻辑
async function sendMsg(content) {
  // 先上报到服务端存储
  await fetch('/api/submitMsg', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({content: content, time: Date.now()})
  })
  // 本地渲染消息
  renderNewMsg(content)
}

// 定时拉取最新消息
setInterval(async () => {
  const res = await fetch('/api/getNewMsg?lastId=' + localLastMsgId)
  const newMsgList = await res.json()
  newMsgList.forEach(msg => renderNewMsg(msg.content))
  // 更新本地最新消息ID，下次只拉取更新的内容
  localLastMsgId = newMsgList.at(-1)?.id || localLastMsgId
}, 2000)

方案2：WebSocket（实时性更高，体验更好） #

如果对消息延迟要求高，可以用长连接方案：

• 服务端开启WebSocket服务，用户打开页面时前端就和服务端建立WebSocket长连接
• 用户发送消息时直接通过WebSocket通道把消息传给服务端，服务端存储后主动推送给所有已连接的前端客户端
• 所有前端收到服务端推送的新消息后，直接渲染到页面即可，无需定时轮询

注意事项 #

• 渲染消息前要对内容中的特殊字符做转义，避免用户提交恶意脚本引发XSS攻击
• 所有消息最好生成唯一自增ID，方便对比增量消息，避免重复渲染

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