Laravel VueJS项目中DB变更触发视图更新方案咨询

针对IoT平台直接修改数据库后需要更新Laravel/Vue视图的场景，以下是几种实用方案：

1. 前端定时轮询（最易实现） #

直接在Vue前端定时请求Laravel接口拉取最新数据，适合变更频率不高的场景。

• Vue侧实现示例：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';

const latestData = ref({});
let pollTimer = null;

const fetchLatestData = async () => {
  const res = await axios.get('/api/latest-iot-data');
  latestData.value = res.data;
};

onMounted(() => {
  // 初始加载数据
  fetchLatestData();
  // 每5秒轮询一次，可根据业务需求调整间隔
  pollTimer = setInterval(fetchLatestData, 5000);
});

onUnmounted(() => {
  clearInterval(pollTimer);
});
</script>

• Laravel侧只需编写一个接口，查询对应数据表的最新数据并返回即可。

优点：零额外服务依赖，代码量少、易维护；缺点：存在固定延迟，高频轮询会增加服务器压力。

2. 数据库触发器 + WebSocket #

通过数据库触发器捕获数据变更事件，再推送给WebSocket服务，前端监听WebSocket消息实时更新视图。

步骤： #

• 数据库触发器：以MySQL为例，创建触发器，当目标表数据变更时，触发外部脚本或HTTP请求推送变更信息。

  DELIMITER //
  CREATE TRIGGER iot_data_after_update
  AFTER UPDATE ON iot_data
  FOR EACH ROW
  BEGIN
    -- 调用自定义存储过程或外部脚本发送HTTP请求，通知WebSocket服务
    CALL notify_websocket(NEW.id, NEW.sensor_value);
  END //
  DELIMITER ;
  

  注：MySQL本身不支持直接发送HTTP请求，可通过lib_mysqludf_http扩展实现，或触发器触发本地Python/Shell脚本完成请求发送。

• WebSocket服务：可使用Laravel官方的laravel-websockets包，或单独搭建Node.js WebSocket服务。收到触发器的通知后，向订阅对应频道的前端推送变更消息。

• Vue侧：通过laravel-echo（搭配Laravel WebSocket）或原生WebSocket连接，监听消息并实时更新视图数据。

优点：实时性高，前端无冗余请求；缺点：需要配置触发器和WebSocket服务，依赖数据库扩展或外部脚本，复杂度中等。

3. 数据库变更捕获（CDC）工具 #

适合数据变更频繁、需要可靠事件传递的场景，通过监听数据库binlog捕获所有变更事件。

大致流程： #

• 部署CDC工具（如Debezium），监听数据库的binlog，将变更事件同步到消息队列（如Kafka、RabbitMQ）。
• Laravel后端消费消息队列中的变更事件，通过WebSocket服务推送给前端Vue。
• Vue前端监听WebSocket消息，实时更新视图。

优点：不侵入业务代码，能捕获所有数据库变更，可靠性高；缺点：需要部署CDC工具和消息队列，运维复杂度较高，适合中大型项目。

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