WebRTC（Web Real‑Time Communication）是瀏覽器直接進行音訊、視訊與資料流的開放規範。核心流程包含：信令（Signaling）、ICE／STUN/TURN 連線募端、以及 SRTP/RTP 資料傳輸。雖然 WebRTC 本身不會傳輸信令，而是依賴開發者自訂機制；在 WordPress 應用中，最常見的做法是以 WebSocket 作為信令通道，因其提供雙向、低延遲、長連線的特性，適合即時檢測與傳遞 SDP 與 ICE 候選列表。
1. 為什麼 WordPress 需要 WebRTC + WebSocket？
- 在客戶端即時協調會議或遠距客服，WordPress 內建的 <iframe> 或自訂 shortcodes 能將通話介面嵌入任何頁面或文章。
- WebSocket 提供了持久化連線的效能，減少頻繁 HTTP POST 的開銷，對於同步多方訊息（如即時留言、共享畫面）尤其重要。
- WordPress 強大的後台管理與插件機制可以把 WebSocket 伺服器整合成「REST API」或「AJAX 端點」的延伸，確保權限驗證、角色控制與地理位址封鎖等安全需求。
2. 基礎架構設計
下面列舉一個典型的 WordPress 環境搭配 WebRTC + WebSocket 的架構：
| 組件 | 說明 |
|---|---|
| 前端（WordPress 主題/插件） | 採用 HTML/JavaScript 撰寫 WebRTC API，並連線至 WebSocket 服務 |
| WebSocket 服務 | Node.js / Socket.IO / Go / Rust 皆可；部署於 Vercel、Netlify Edge 或專有伺服器 |
| STUN/TURN 伺服器 | Google 的 stun:stun.l.google.com:19302 為免費 STUN；TURN 可用 Coturn / freeIPA 或商業方案 |
| WordPress REST API | 提供用戶註冊、會議室建立、存取權限等管理功能 |
3. WebSocket 信號交換流程
以下用伺服器端 Socket.IO 與前端 JavaScript 來示範最小化的信令邏輯。
Server (Node.js + Socket.IO)
require('socket.io')(3000, {
cors: { origin: "*" }
});
io.on('connection', socket => {
console.log(`Client ${socket.id} connected`);
socket.on('join-room', room => {
socket.join(room);
console.log(`Client ${socket.id} joined ${room}`);
});
socket.on('signal', data => {
// data: { to: socketId, from: socketId, signal: signalData }
io.to(data.to).emit('signal', data);
});
});Client（WordPress 主題中）
// 建立 Socket.IO 連線
const socket = io('wss://yourwebsocket.example.com');
// 將此用戶加入會議房間
const roomId = 'demo-room';
socket.emit('join-room', roomId);
// 取得本地 Media
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
document.getElementById('localVideo').srcObject = stream;
startCall(stream);
});
function startCall(stream) {
const peer = new RTCPeerConnection({
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});
// 送出自己的 tracks
stream.getTracks().forEach(track => peer.addTrack(track, stream));
// 監聽 ICE 候選
peer.onicecandidate = event => {
if (event.candidate) {
socket.emit('signal', {
to: BROADCAST_ID, // 或另一方Socket ID
from: socket.id,
signal: { candidate: event.candidate }
});
}
};
// 監聽遠端 SDP
peer.ontrack = event => {
document.getElementById('remoteVideo').srcObject = event.streams[0];
};
// 建立 Offer
peer.createOffer()
.then(offer => peer.setLocalDescription(offer))
.then(() => {
socket.emit('signal', {
to: BROADCAST_ID,
from: socket.id,
signal: { sdp: peer.localDescription }
});
});
// 處理收到的信號
socket.on('signal', data => {
if (data.signal.sdp) {
peer.setRemoteDescription(new RTCSessionDescription(data.signal.sdp));
} else if (data.signal.candidate) {
peer.addIceCandidate(new RTCIceCandidate(data.signal.candidate));
}
});
}上記範例已涵蓋：1) 建立 WebSocket 連線；2) 用戶加入特定房間；3) 信號傳遞（SDP、ICE candidate）；4) RTCPeerConnection 初始化並綁定本地與遠端流。
4.安全性考量：避免信令被竊聽、濫用或偽造
WebRTC 本身具備端到端加密（DTLS + SRTP），但 信令（SDP、ICE）在進入 WebSocket 前都是未加密的 JavaScript 物件，這也是多數攻擊者的切入點。
以下整理實務安全重點：
(1) WebSocket 一定要使用 WSS（TLS）
否則攻擊者可：
-
MitM 攔截 SDP
-
修改 ICE candidate
-
導向攻擊者自建中繼
-
注入惡意 payload 造成 XSS / CSRF
正確設定示例（Nginx）：
location /socket.io/ {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
proxy_set_header Host $host;
}
(2) Token 驗證 + WordPress 使用者登入綁定
WordPress 本身可以產生 Nonces、JWT、OAuth2 Token 作為：
- WebSocket 連線參數（?token=xxxx）
- 加入會議室的身份證明
- 會議室建立者／主持人權限
Node.js 端可在握手時驗證 Token：
io.use(async (socket, next) => {
const token = socket.handshake.auth?.token;
if (!verifyWordPressJWT(token)) {
return next(new Error("Unauthorized"));
}
next();
});
(3) TURN 伺服器帳密不可放在前端明碼
常見錯誤：
❌
iceServers: [{
urls: "turn:yourserver.com",
username: "admin",
credential: "password"
}]
任何人都能偷走你的 TURN 伺服器，拿來跑爬蟲與 DoS。
✔ 正確做法：
- 使用「REST TURN Credential」
- Token 為 30 秒有效期限
- 後端 PHP 用 secret key 產生 username/password
示例（Coturn REST API 產生 Token）：
$ttl = 60;
$username = time() + $ttl;
$hmac = base64_encode(hash_hmac('sha1', $username, TURN_SECRET_KEY, true));
return [
"urls" => "turn:turn.example.com",
"username" => $username,
"credential" => $hmac
];
安全性高出數個維度。
(4) CSP 內容安全政策必須加入 WebSocket 白名單
WordPress 中建議開啟：
Content-Security-Policy:
connect-src 'self' https://yourdomain.com wss://ws.yourdomain.com;
可防止：
- 惡意 JavaScript 竊取你的 WebRTC 連線
- 外部網站偷偷連到你的 WebSocket
(5) 避免「未授權建立會議室」與「訊號廣播濫用」
攻擊者若知道 WebSocket URL，可暴力發送：
join-room: 9999
join-room: 10000
join-room: 10001
…
造成無限房間塞爆記憶體。
解決方式：
✔ 會議室由 WordPress 產生（REST API）
✔ 產生 room_uuid 並綁定 user_id
✔ WebSocket 僅接受 WordPress API 建立過的房間
5. WordPress 整合 WebRTC 的方式
根據複雜度分成三種方式：
(5.1) 插入 Shortcode：最容易部署
你可建立一個短碼：
function dreamj_webrtc_shortcode() {
ob_start();
?>
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script src="/js/webrtc-client.js"></script>
<?php
return ob_get_clean();
}
add_shortcode('dreamj_webrtc', 'dreamj_webrtc_shortcode');
這能嵌入任何 WP 頁面，如：
[dreamj_webrtc]
✔ 用於客服、遠端技術支援
✔ 與 LMS、會員系統整合
✔ 可限制特定角色（Role）使用
(5.2) WordPress 插件形式：權限最高、可控性最強
插件中可：
- 自動建立 WebSocket Token
- 產生 WebRTC 房間
- 寫入 wp_usermeta
- 控制誰能發起／加入通話
你也可把你的 Node.js WebSocket 伺服器管理頁面嵌到 WP 後台。
(5.3) 直接與 WordPress SSO 整合 WebRTC（企業級）
若你的站點使用：
- Azure AD
- Google Workspace
- Okta
- LDAP
可使 WebRTC 房間：
- 自動帶入使用者 email
- 對應企業部門
- 使用 ID Token 控制通話權限
6. 最佳部署架構（2025 建議版）
以下是你現在系統的強化版，也適合正式上線：
----------------------------
| WordPress 前端 |
| (短碼 / Plugin / UI) |
----------------------------
|
v
----------------------------
| WebSocket Signaling | ← Node.js / Socket.IO / NestJS
|（驗證 Token + Room 控制） |
----------------------------
|
v
----------------------------
| STUN/TURN (Coturn) | ← REST Secret + TLS
----------------------------
|
v
----------------------------
| WebRTC Peer-to-Peer | ← SRTP + DTLS 加密
----------------------------
安全性與效能同時兼顧。
7. 結語：WordPress 也能做到企業級 WebRTC
儘管 WordPress 并非專為即時通訊打造，但透過：
- WebRTC（音視訊）
- WebSocket（即時信令）
- WordPress 使用者驗證（JWT/OAuth2）
- CSP + HTTPS + TURN REST 伺服器
你完全能在 WordPress 提供：
✔ 客服面對面視訊
✔ 遠端技術支援（含螢幕分享）
✔ 線上教學、家教、直播教室
✔ 一對一診療、金融顧問視訊
✔ 企業內部協作會議
架構輕量、跨平台、且無需安裝額外 App。
- 🧠 本文由 DreamJ AI 自動網路探索生成系統撰寫，內容經 AI 模型審核與自動優化，
僅供技術參考與研究用途。
