PHP在线即时私信系统如何实现无刷新收发展示新消息

无刷新实时更新的核心是避免重载整个页面，仅通过前端和后端的异步数据同步更新局部消息区域，根据你的业务量级可以选择以下两种落地方式：

方案1：短轮询（改造成本最低，适合小流量场景） #

• 核心逻辑：前端通过JS固定间隔（推荐2-3秒）向后端发送异步请求拉取增量新消息，拿到数据后仅更新聊天框区域内容，无需刷新全页
• 前端实现步骤：
  1. 用fetch、XMLHttpRequest或者jQuery的$.ajax实现异步请求，请求全程不会触发页面刷新
  2. 本地存储当前加载到的最后一条消息ID，每次请求携带该ID，后端仅返回大于该ID的新增消息，避免全量查询浪费资源。你之前使用的SELECT * FROM tableName需要优化为SELECT id,content,from_uid,create_time FROM tableName WHERE id > 传入的最后一条消息ID AND (from_uid = 当前聊天对象ID OR to_uid = 当前聊天对象ID)，仅查询必要字段和增量数据
  3. 拿到后端返回的新消息后，通过JS操作DOM将新消息追加到聊天框即可，无需重新渲染整个页面
  4. 用户主动发消息时也用异步请求提交，提交成功后直接把当前发送的消息追加到聊天框，不用等轮询拉取，优化使用体验
• 前端参考代码：

let lastMsgId = 0;
const currentUid = 1; // 替换为当前登录用户的ID
const chatToUid = 2; // 替换为当前聊天对象的ID

// 拉取新消息逻辑
function pullNewMessage() {
  fetch('/api/get_new_message.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: `last_msg_id=${lastMsgId}&chat_to_uid=${chatToUid}`
  })
  .then(res => res.json())
  .then(data => {
    if (data.code === 0 && data.msg_list.length > 0) {
      data.msg_list.forEach(msg => {
        const msgItem = document.createElement('div');
        // 区分自己和对方的消息样式
        msgItem.className = msg.from_uid === currentUid ? 'my-message' : 'other-message';
        msgItem.innerText = msg.content;
        document.querySelector('.chat-container').appendChild(msgItem);
        // 更新最新消息ID
        lastMsgId = Math.max(lastMsgId, msg.id);
      })
      // 聊天框自动滚动到底部
      const chatBox = document.querySelector('.chat-container');
      chatBox.scrollTop = chatBox.scrollHeight;
    }
  })
}

// 启动轮询，每2秒拉一次
setInterval(pullNewMessage, 2000);

// 发消息逻辑
function sendMessage(content) {
  fetch('/api/send_message.php', {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: `content=${encodeURIComponent(content)}&to_uid=${chatToUid}`
  })
  .then(res => res.json())
  .then(data => {
    if (data.code === 0) {
      // 发送成功直接追加自己的消息
      const msgItem = document.createElement('div');
      msgItem.className = 'my-message';
      msgItem.innerText = content;
      document.querySelector('.chat-container').appendChild(msgItem);
      document.querySelector('.chat-input').value = '';
      // 自动滚动到底部
      const chatBox = document.querySelector('.chat-container');
      chatBox.scrollTop = chatBox.scrollHeight;
    }
  })
}

• 后端仅需要新增对应接口，接收参数查询消息后返回JSON格式数据即可，不需要修改原有消息表结构。

方案2：WebSocket长连接（性能更优，适合高流量、低延迟需求场景） #

• 核心逻辑：和短轮询反复发起请求不同，WebSocket会在前端和后端之间建立持久化TCP连接，后端有新消息时可以主动推送给前端，不用前端反复拉取，消息延迟更低、服务器压力更小
• 实现注意点：
  1. PHP场景可以直接用Workerman或者Swoole扩展实现WebSocket服务，不需要手动处理底层协议
  2. 用户建立连接时存储用户ID和对应连接的映射关系，当用户收到新消息时，后端直接通过对应连接把消息推送给用户
  3. 发消息时除了写入数据库，直接推送给接收方的WebSocket连接即可，前端收到推送消息后直接追加到聊天框

如果你使用的是不支持安装扩展的虚拟主机，优先选择短轮询方案，改造成本最低，足够支撑数百人以内的私信使用场景。

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