在开发网页时，实现数据的实时同步是一个常见的需求。以下是几种常见的方式和技术，可以帮助你实现网页数据显示的同步：

1、WebSocket
WebSocket 是一种全双工通信协议，允许服务器主动向客户端推送数据，非常适合需要实时更新的场景。

实现步骤：
服务端：使用支持 WebSocket 的框架（如 Node.js 的 `ws` 或 Python 的 `Tornado`）来建立 WebSocket 连接。
客户端：通过 JavaScript 的 `WebSocket` API 建立连接，并监听消息事件。
数据推送：当服务器有新数据时，直接通过 WebSocket 发送给客户端，客户端更新页面。

示例代码：
javascript
// 客户端
const socket = new WebSocket('ws://65.hk/socket');

socket.onopen = () = {
console.log('WebSocket connection established');
};

socket.onmessage = (event) = {
const data = JSON.parse(event.data);
// 更新页面
document.getElementById('data').innerText = data.message;
};

2、ServerSent Events (SSE)
SSE 是一种单向通信机制，允许服务器向客户端推送事件流，适用于实时更新但不需要双向通信的场景。

实现步骤：
服务端：发送 HTTP 响应头 `ContentType: text/eventstream` 和 `CacheControl: nocache`，并通过 `send()` 方法推送数据。
客户端：通过 `EventSource` API 监听服务器推送的消息。

示例代码：
javascript
// 客户端
const eventSource = new EventSource('/stream');

eventSource.onmessage = (event) = {
const data = JSON.parse(event.data);
document.getElementById('data').innerText = data.message;
};

3、轮询 (Polling)
轮询是一种简单的实现方式，客户端定期向服务器发起请求以获取最新数据。

实现步骤：
客户端：使用 `setInterval` 或 `setTimeout` 定期发送 AJAX 请求。
服务端：每次请求返回最新的数据。

示例代码：
javascript
function fetchData() {
fetch('/api/data')
.then(response = response.json())
.then(data = {
document.getElementById('data').innerText = data.message;
});
}

setInterval(fetchData, 5000); // 每 5 秒请求一次

4、Long Polling
Long Polling 是一种改进的轮询方式，客户端发起请求后，服务器保持连接直到有新数据可用，然后立即响应。

实现步骤：
客户端：发起请求后等待服务器响应。
服务端：在没有新数据时挂起请求，有新数据时立即返回。

示例代码：
javascript
function longPoll() {
fetch('/api/longpoll')
.then(response = response.json())
.then(data = {
document.getElementById('data').innerText = data.message;
longPoll(); // 再次发起请求
});
}

longPoll();

5、GraphQL Subscriptions
如果你使用 GraphQL，可以通过订阅机制实现数据的实时同步。

实现步骤：
服务端：配置 GraphQL 服务器支持 subscriptions。
客户端：使用 Apollo Client 或其他 GraphQL 客户端订阅数据变化。

示例代码：
javascript
import { gql, useSubscription } from '@apollo/client';

const SUBSCRIPTION_QUERY = gql`
subscription {
messageUpdated {
id
content
}
}
`;

function App() {
const { data } = useSubscription(SUBSCRIPTION_QUERY);

if (data) {
document.getElementById('data').innerText = data.messageUpdated.content;
}

return null;
}

6、第三方服务
如果不想自己实现，可以使用一些成熟的第三方服务，例如：
Firebase Realtime Database 或 Firestore：自动同步数据到客户端。
Pusher：提供简单易用的实时通信功能。
Ably 或 PubNub：支持实时数据推送。

示例（Firebase Realtime Database）：
javascript
import { getDatabase, ref, onValue } from firebase/database;

const db = getDatabase();
const starCountRef = ref(db, 'messages/latest');

onValue(starCountRef, (snapshot) = {
const data = snapshot.val();
document.getElementById('data').innerText = data;
});

总结
选择哪种方式取决于你的具体需求：
如果需要低延迟和高并发，推荐 WebSocket。
如果只需要单向推送且不关心复杂性，推荐 SSE。
如果需要简单实现，可以选择 轮询 或 Long Polling。
如果使用 GraphQL，推荐 GraphQL Subscriptions。

如果你有更具体的需求或技术栈，请提供更多细节，我可以为你进一步优化方案！