非单页应用前端 - 实时交互JS元素的最佳实践

以下是一种解决方法，其中包含代码示例：

1. 使用WebSocket进行实时通信：使用WebSocket可以实现客户端和服务器之间的双向实时通信。在前端代码中，可以通过WebSocket对象连接到服务器，并在接收到服务器发送的消息时更新页面上的元素。

// 前端代码
const socket = new WebSocket('ws://example.com/socket'); // 连接服务器的WebSocket

socket.onmessage = function(event) {
  const data = JSON.parse(event.data); // 解析服务器发送的消息
  // 更新页面上的元素
  document.getElementById('elementId').innerText = data.message;
};

// 向服务器发送消息
function sendMessage(message) {
  socket.send(JSON.stringify({ message: message }));
}

2. 使用Ajax进行长轮询：如果WebSocket不可用，可以使用Ajax进行长轮询。在前端代码中，可以定期向服务器发送Ajax请求，服务器在有新消息时返回响应。前端代码接收到响应后，更新页面上的元素。

// 前端代码
function pollServer() {
  // 发送Ajax请求
  $.ajax({
    url: '/poll', // 向服务器发送请求的URL
    method: 'GET',
    dataType: 'json',
    success: function(response) {
      // 更新页面上的元素
      document.getElementById('elementId').innerText = response.message;
      // 再次发送Ajax请求
      pollServer();
    },
    error: function() {
      // 发生错误时处理
    }
  });
}

// 启动长轮询
pollServer();

3. 使用Server-Sent Events进行服务器推送：Server-Sent Events是一种基于HTTP的服务器推送技术，用于实现服务器向客户端的实时推送。在前端代码中，可以使用EventSource对象连接到服务器，并在接收到服务器发送的消息时更新页面上的元素。

// 前端代码
const eventSource = new EventSource('/stream'); // 连接服务器的EventSource

eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data); // 解析服务器发送的消息
  // 更新页面上的元素
  document.getElementById('elementId').innerText = data.message;
};

4. 使用第三方库进行实时交互：除了上述原生方案，还可以使用第三方库来简化实时交互的实现。例如，可以使用Socket.IO库来处理实时通信，或使用Firebase库来实现实时数据库更新。

// 使用Socket.IO进行实时通信
const socket = io('http://example.com');
socket.on('message', function(data) {
  // 更新页面上的元素
  document.getElementById('elementId').innerText = data.message;
});

// 使用Firebase实时数据库
const database = firebase.database();
database.ref('path/to/data').on('value', function(snapshot) {
  const data = snapshot.val();
  // 更新页面上的元素
  document.getElementById('elementId').innerText = data.message;
});

以上是一些非单页应用前端实时交互的最佳实践解决方法，包含了一些代码示例。具体的实现方式可以根据实际需求和使用的技术栈进行调整和修改。