Yoru Karu Studio

📹 WebRTC：點對點即時通訊 ⏱️ 閱讀時間： 18 分鐘 🎯 難度： ⭐⭐⭐⭐ (困難) 🏗️ WebRTC 在網路模型中的位置 OSI 7 層模型 ┌──────────────────────────────┬─────────────────────────┐ │ 7. Application Layer (應用層) │ WebRTC API │ ← WebRTC 在這裡 ├──────────────────────────────┼─────────────────────────┤ │ 6. Presentation Layer (表示層)│ 編碼/解碼 (VP8/H.264) │ ├──────────────────────────────┼─────────────────────────┤ │ 5. Session Layer (會話層) │ 信令 (SDP/SIP) │ ├──────────────────────────────┼─────────────────────────┤ │ 4. Transport Layer (傳輸層) │ UDP (SRTP/SCTP) │ ← 使用 UDP ├──────────────────────────────┼─────────────────────────┤ │ 3. Network Layer (網路層) │ IP (ICE/STUN/TURN) │ ├──────────────────────────────┼─────────────────────────┤ │ 2.

09-1. Redis vs Memcached 📌 為什麼需要緩存？ 在 Web 應用中，數據庫往往是性能瓶頸： 用戶請求 → Django → 數據庫查詢（慢！）→ 返回數據引入緩存後： 用戶請求 → Django → 緩存（快！）→ 返回數據 ↓ 未命中 數據庫 → 更新緩存 → 返回數據緩存的價值： ⚡ 減少數據庫壓力（從 100ms 降到 1ms） 🚀 提升響應速度 💰 降低服務器成本 🔍 Redis vs Memcached 核心差異 快速對比表 特性 Redis Memcached 數據類型 String, Hash, List, Set, Sorted Set 僅支持 String 持久化 ✅ 支持（RDB、AOF） ❌ 不支持 分布式 ✅ 內建（Redis Cluster） ⚠️ 需要客戶端實現 單線程/多線程 單線程（6.0+ 支持多線程 I/O） 多線程 內存管理 更複雜（多種數據結構） 簡單（Slab 分配） 最大值大小 512MB 1MB 事務支持 ✅ 支持 ❌ 不支持 發布訂閱 ✅ 支持 ❌ 不支持 腳本支持 ✅ Lua 腳本 ❌ 不支持 🎯 Redis 詳解 1.

🛡️ Web 資安完整指南 課程簡介 本系列從零開始系統化講解 Web 資安，涵蓋 SQL Injection、XSS、CSRF、OWASP Top 10、SSRF、反序列化攻擊等核心主題，並深入 Django 框架的安全實踐。專為全端工程師、資安新手、面試準備設計，幫助你建立完整的資安防禦能力。 為什麼要學資安？ ✅ 避免數據洩漏（Capital One、Equifax 都因資安漏洞損失慘重） ✅ 通過技術面試（SQL Injection、XSS 必考） ✅ 提升職場競爭力（資安意識是優秀工程師的標配） ✅ 保護用戶隱私（開發者的責任） 📚 章節目錄 🔰 基礎必學 01. 資安基礎篇 01-1. 什麼是 Web 資安？為什麼重要？ ⏱️ 8min 01-2. CIA 三元組：機密性、完整性、可用性 ⏱️ 10min 01-3. 常見攻擊類型概覽 ⏱️ 12min 01-4. 攻擊者思維 vs 防禦者思維 ⏱️ 10min 02. Injection 注入攻擊篇（面試必考 ⭐⭐⭐） 02-1. SQL Injection 基礎：什麼是 SQL 注入？ ⏱️ 15min 02-2. SQL Injection 攻擊技巧（Union、Blind、Time-based） ⏱️ 18min 02-3.

為什麼現代搜尋能「讀懂」你的意思？ 想像你在圖書館找書，問館員：「有沒有教我做網站的書？」 傳統搜尋引擎會找書名有「做」、「網站」這些字的書。 現代 AI 搜尋會理解你其實想找「網頁開發」、「Web Development」、「前端教學」相關的書。 這兩者的差異，就是關鍵字匹配與語義理解的差異。本文將帶你走過搜尋技術 50 年的演進之路。 📚 第一代：TF-IDF（詞頻-逆文檔頻率） 核心思想：統計詞的重要性 TF-IDF 誕生於 1970 年代，是最經典的文本檢索演算法。它的邏輯非常直觀： TF（Term Frequency，詞頻） 一個詞在文檔中出現越多次，這個詞對該文檔越重要 計算：TF = 詞在文檔中出現次數 / 文檔總詞數 IDF（Inverse Document Frequency，逆文檔頻率） 一個詞在越少文檔中出現，這個詞越有鑑別力 常見詞如「的」、「是」出現在所有文檔中，沒有鑑別能力 計算：IDF = log(總文檔數 / 包含該詞的文檔數) TF-IDF 分數 = TF × IDF 實際例子 假設查詢：「what is nlp」 文檔 1：「what is life! candy is life!」 文檔 2：「nlp is an acronym for natural language processing」 文檔 3：「I like to do good research on nlp」

🚀 WebSocket 實戰應用 🎯 實戰專案概覽 本篇將實作四個完整的 WebSocket 應用： 即時聊天室 💬 即時通知系統 🔔 協作編輯器 ✏️ 多人遊戲同步 🎮 💬 專案一：即時聊天室 需求分析 功能： ✅ 多個使用者同時聊天 ✅ 顯示線上人數 ✅ 顯示「正在輸入...」 ✅ 訊息歷史記錄 ✅ 私訊功能後端實作（Node.js + ws） // server.js const WebSocket = require('ws'); const http = require('http'); const express = require('express'); const app = express(); const server = http.createServer(app); const wss = new WebSocket.Server({ server }); // 儲存所有連線 const clients = new Map(); // 訊息歷史（實務應該用資料庫） const messageHistory = []; wss.

🔀 WebSocket vs HTTP 深度比較 🎯 核心差異 💡 比喻： HTTP = 郵寄信件 - 你寄一封信（請求） - 郵局回信（回應） - 一問一答，不能主動通知 WebSocket = 電話通話 - 撥通後保持連線 - 雙方隨時可以說話 - 即時雙向溝通連線模式對比 HTTP（請求-回應）： 客戶端 伺服器 │ │ ├─ GET /data ──────────────>│ │ │ │<─ 200 OK ──────────────────┤ │ (data) │ │ │ ├─ GET /data ──────────────>│ (需要新資料，再次請求) │ │ │<─ 200 OK ──────────────────┤ │ (new data) │WebSocket（雙向通訊）： 客戶端 伺服器 │ │ ├─ WebSocket Handshake ────>│ (一次連線) │<─ 101 Switching Protocols ┤ │ │ │<══════ 保持連線 ═══════════>│ │ │ ├─ Message ────────────────>│ (隨時發送) │<─ Message ──────────────────┤ (伺服器主動推送) ├─ Message ────────────────>│ │<─ Message ──────────────────┤ 📊 詳細比較表 特性 HTTP WebSocket 連線 短連線（一次性） 長連線（持續） 方向 單向（客戶端發起） 雙向（任一方發起） 開銷 每次請求都有 Header（~200+ bytes） 握手後僅需 2-6 bytes 延遲 高（需建立連線） 低（連線已建立） 即時性 需輪詢 即時推送 瀏覽器支援 ✅ 所有瀏覽器 ✅ 現代瀏覽器 快取 ✅ 支援 ❌ 不支援 CDN ✅ 支援 ❌ 不支援 防火牆 ✅ 友善 ⚠️ 可能被阻擋 🔄 HTTP 實現即時通訊的方法 1️⃣ 短輪詢（Short Polling） 💡 比喻：每隔幾秒問一次「有新訊息嗎？」// 客戶端：每 3 秒請求一次 function shortPolling() { setInterval(async () => { const response = await fetch('/api/messages'); const messages = await response.