WordPress Block Theme Stream Processing —

WordPress Stream Processing

WordPress Block Theme Stream Processing WebSocket SSE Live Dashboard Notification Chat Real-time Custom Block React Performance

SSE Implementation

=== Server-Sent Events with WordPress ===

PHP — SSE Endpoint (wp-content/mu-plugins/sse-endpoint.php)

add_action('rest_api_init', function() {

register_rest_route('stream/v1', '/events', [

'methods' => 'GET',

'callback' => function($request) {

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

header('Connection: keep-alive');

header('X-Accel-Buffering: no');

while (true) {

$data = get_latest_updates();

if ($data) {

echo "event: update\n";

echo "data: " . json_encode($data) . "\n\n";

ob_flush();

flush();

}

sleep(2);

if (connection_aborted()) break;

}

},

'permission_callback' => function() {

return is_user_logged_in();

}

]);

});

เนื้อหาเกี่ยวข้อง — อ่านต่อ: Nextra MDX Architecture Design Pattern

JavaScript — SSE Client (in Custom Block)

const eventSource = new EventSource('/wp-json/stream/v1/events');

eventSource.addEventListener('update', (event) => {

const data = JSON.parse(event.data);

updateDashboard(data);

});

eventSource.addEventListener('error', (event) => {

console.log('SSE error, reconnecting...');

แนะนำเพิ่มเติม — ติดตาม XM Signal

setTimeout(() => {

eventSource.close();

connectSSE();

}, 5000);

});

from dataclasses import dataclass

@dataclass

class StreamFeature:

feature: str

technology: str

wp_integration: str

example: str

features = [

StreamFeature("Live Dashboard", "SSE",

"Custom Block + REST API SSE endpoint",

"Real-time visitor count, sales, orders"),

StreamFeature("Live Notifications", "SSE",

"mu-plugin + JavaScript EventSource",

"New comment, order, form submission"),

StreamFeature("Live Chat", "WebSocket",

เนื้อหาเกี่ยวข้อง — Istio Traffic Management Career Development IT

"Node.js WebSocket + WP Auth",

"Customer support, community chat"),

StreamFeature("Live Comments", "SSE",

"REST API polling or SSE",

"Blog comments appear without refresh"),

StreamFeature("Stock Ticker", "WebSocket",

"External WebSocket API + Custom Block",

"Real-time stock/crypto prices"),

]

Custom Block Development

=== WordPress Custom Block for Real-time ===

Create block plugin

แนะนำเพิ่มเติม — SiamCafeBook

npx @wordpress/create-block live-dashboard-block

cd live-dashboard-block

src/edit.js — Editor View

import { useEffect, useState } from '@wordpress/element';

import { useBlockProps } from '@wordpress/block-editor';

export default function Edit() {

const blockProps = useBlockProps();

const [stats, setStats] = useState({

visitors: 0, pageviews: 0, orders: 0

});

useEffect(() => {

const sse = new EventSource('/wp-json/stream/v1/stats');

sse.addEventListener('stats', (e) => {

เนื้อหาเกี่ยวข้อง — แนะนำให้อ่าน Cloud-init Blue Green Canary Deploy

setStats(JSON.parse(e.data));

});

return () => sse.close();

}, []);

return (

<div {...blockProps}>

<div className="live-dashboard">

<div className="stat">

<span className="label">Visitors</span>

<span className="value">{stats.visitors}</span>

</div>

<div className="stat">

<span className="label">Pageviews</span>

<span className="value">{stats.pageviews}</span>

</div>

<div className="stat">

<span className="label">Orders</span>

<span className="value">{stats.orders}</span>

</div>

</div>

</div>

);

}

block.json

{

"apiVersion": 3,

"name": "my/live-dashboard",

เนื้อหาเกี่ยวข้อง — แนะนำให้อ่าน Neon Serverless Postgres Observability Stack

"title": "Live Dashboard",

"category": "widgets",

"icon": "chart-bar",

"attributes": {

"refreshInterval": { "type": "number", "default": 2000 },

"showVisitors": { "type": "boolean", "default": true },

"showOrders": { "type": "boolean", "default": true }

}

}

@dataclass

class BlockComponent:

component: str

file: str

purpose: str

tech: str

components = [

BlockComponent("edit.js", "src/edit.js", "Editor view with SSE preview", "React + WordPress hooks"),

BlockComponent("view.js", "src/view.js", "Frontend SSE connection", "Vanilla JS or React"),

BlockComponent("style.scss", "src/style.scss", "Block styling", "SCSS compiled to CSS"),

BlockComponent("block.json", "block.json", "Block metadata and attributes", "JSON config"),

BlockComponent("index.php", "plugin.php", "Block registration", "register_block_type"),

BlockComponent("sse-endpoint.php", "includes/sse.php", "SSE REST endpoint", "WordPress REST API"),

]

เคล็ดลับ

• SSE: เริ่มด้วย SSE ก่อน ง่ายกว่า WebSocket เหมาะกับ Dashboard Notification
• Nginx: ปิด proxy_buffering สำหรับ SSE Endpoint ไม่งั้นข้อมูลจะไม่ส่งทันที
• Reconnect: ใส่ Reconnect Logic ใน Client เมื่อ Connection หลุด
• Auth: ตรวจสอบ Authentication ใน SSE Endpoint ด้วย permission_callback
• Scale: ใช้ Redis Pub/Sub เมื่อต้อง Scale หลาย Server

Stream Processing บน WordPress คืออะไร

Real-time WordPress WebSocket SSE Server-Sent Events Live Dashboard Notification Chat Stock Ticker Comments Block Theme Custom Block React