如何无需刷新页面获取API响应以更新聊天列表？

当前你的getChatsList方法仅在页面加载（或手动触发）时一次性获取聊天记录，要实现无刷新更新，需要添加实时获取/接收新消息的机制，以下是几种可行方案：

方案一：定时轮询（快速落地） #

通过定时调用API拉取最新消息，适合后端暂不支持长连接的场景。为避免重复获取旧数据，建议优化API支持传入last_message_id，只返回该ID之后的新消息；如果暂时无法修改API，可对比本地最后一条消息的时间/ID，筛选出新消息追加到列表。

修改后的代码示例： #

// 记录最后一条消息的ID，初始为0或空
lastMsgId: 0;

getChatsList(isPolling = false) {
  const params = { room_id: this.roomId };
  // 如果是轮询请求，带上最后一条消息ID，只拉取新消息（需后端API支持）
  if (isPolling && this.lastMsgId) {
    params.last_message_id = this.lastMsgId;
  }

  this.api.post_private('v1/chats/getById', params)
    .then((data: any) => {
      if (data?.status === 200 && data.data.length) {
        if (isPolling) {
          // 轮询时追加新消息到列表
          this.messageList = [...this.messageList, ...data.data];
        } else {
          // 首次加载时覆盖列表
          this.messageList = data.data;
        }
        // 更新最后一条消息ID
        this.lastMsgId = data.data[data.data.length - 1].id;
      }
    })
    .catch(error => {
      console.log(error);
    });
}

// 初始化轮询，页面加载后启动
startPolling() {
  // 每隔3秒拉取一次，可根据需求调整间隔
  this.pollingTimer = setInterval(() => {
    this.getChatsList(true);
  }, 3000);
}

// 页面销毁时清除定时器，避免内存泄漏
beforeDestroy() {
  if (this.pollingTimer) {
    clearInterval(this.pollingTimer);
  }
}

方案二：WebSocket（实时性最优） #

和后端建立长连接，后端在有新消息时主动推送给前端，无需前端频繁请求，适合对实时性要求高的场景。

代码示例： #

// 初始化WebSocket连接
initWebSocket() {
  // 替换为你的WebSocket服务地址，带上room_id参数
  const ws = new WebSocket(`ws://your-server/ws/chats?room_id=${this.roomId}`);
  
  ws.onopen = () => {
    console.log('WebSocket连接已建立');
  };

  // 接收后端推送的新消息
  ws.onmessage = (event) => {
    const newMsg = JSON.parse(event.data);
    // 将新消息追加到列表
    this.messageList = [...this.messageList, newMsg];
    // 滚动到最新消息（可选）
    this.scrollToBottom();
  };

  ws.onerror = (error) => {
    console.error('WebSocket错误:', error);
    // 连接出错时尝试重连
    setTimeout(() => this.initWebSocket(), 5000);
  };

  ws.onclose = () => {
    console.log('WebSocket连接已关闭');
    // 连接关闭时尝试重连
    setTimeout(() => this.initWebSocket(), 5000);
  };

  this.ws = ws;
}

// 页面销毁时关闭WebSocket连接
beforeDestroy() {
  if (this.ws) {
    this.ws.close();
  }
}

// 滚动到聊天底部（可选）
scrollToBottom() {
  const chatContainer = document.getElementById('chat-container');
  if (chatContainer) {
    chatContainer.scrollTop = chatContainer.scrollHeight;
  }
}

方案三：Server-Sent Events（SSE，单向推送） #

SSE是一种基于HTTP的单向推送机制，相比WebSocket更轻量，适合仅后端向前端推送消息的场景。

代码示例： #

initSSE() {
  // 替换为你的SSE服务地址，带上room_id参数
  const eventSource = new EventSource(`/api/v1/chats/sse?room_id=${this.roomId}`);
  
  eventSource.onmessage = (event) => {
    const newMsg = JSON.parse(event.data);
    this.messageList = [...this.messageList, newMsg];
  };

  eventSource.onerror = (error) => {
    console.error('SSE错误:', error);
    eventSource.close();
    // 重连
    setTimeout(() => this.initSSE(), 5000);
  };

  this.eventSource = eventSource;
}

beforeDestroy() {
  if (this.eventSource) {
    this.eventSource.close();
  }
}

注意事项 #

• 轮询需合理设置间隔时间，过短增加服务器压力，过长影响实时性。
• WebSocket/SSE需要后端配合实现推送逻辑，确保新消息产生时能推送给对应房间的客户端。
• 所有方案都要处理连接中断、重连的情况，保证稳定性。

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