程式設計

聊天室、協作編輯、即時看盤，這些功能的共通點是伺服器要能主動把資料推給瀏覽器，而不是等瀏覽器來問。HTTP 的請求-回應模型做不到這件事，硬要做就得靠輪詢，每隔幾秒打一次 API，既浪費頻寬又有延遲。WebSocket 就是為了解決這個問題而生的：一條 TCP 連線上跑全雙工通訊，兩邊都能隨時送資料。 這篇用 Python 寫後端、原生 JavaScript 寫前端，建一個能在多個瀏覽器分頁之間互傳訊息的聊天室。程式碼都是可以直接跑的，而且特別避開了 websockets 套件新版本上的幾個地雷——網路上很多教學還在用舊版 API，照抄到新環境會直接報錯。 WebSocket 到底是什麼WebSocket 是一個獨立的網路協定（ws:// 或加密的 wss://），握手階段借用 HTTP 升級連線，握手完成後就脫離 HTTP，變成一條雙向的長連線。 跟輪詢比起來，它的好處很實際： 伺服器能主動推播，不必等客戶端發問 連線建立後省掉每次 HTTP 標頭的開銷 延遲低，適合聊天、通知、即時資料這類場景 要注意的是 WebSocket 不會自動重連，連線斷了就是斷了，這部分要自己處...

專案網址 深入解析:使用Python構建全面的市場風險監測工具七月全球同步發生多個利空事件，市場下殺速度快到根本來不及反應，直接被套牢。事後想想，如果有個工具能在風險累積時提早示警，也許不會這麼狼狽。於是花了幾個週末做了這個 VolatilityVigil——用 Python 同時監測多個市場的風險狀態，從波動度計算到 PCA 異常偵測，最後用 K-means 把市場分群，輸出一張能看懂的熱力圖。 1. 程式概述核心功能分五塊： 透過 yfinance 抓 Yahoo Finance 多市場歷史資料（美股、歐股、亞股、商品、外匯） 計算各市場的年化波動度 用 PCA 重建誤差做異常偵測 整合波動度與異常訊號算出風險評分 用 K-means 把市場狀態分群，並將群號整合進最終判讀輸出 用到的套件：pandas（資料處理）、sklearn（演算法）、yfinance（市場資料）、matplotlib 與 seaborn（視覺化）。 2. 核心功能詳解2.1 資料獲取先把整份程式會用到的 import 一次列齊，免得你抄到一半發現少了哪個套件： 1234567891011121...

為什麼要換.NET Core 之後，Microsoft 把 System.Text.Json 直接內建進框架，不用另外裝 NuGet 套件，少一個外部相依。效能上，官方 benchmark 顯示序列化速度比 Newtonsoft.Json 快約 2 倍，記憶體分配也更省。對大多數 Web API 專案來說，日常夠用。 真正讓人猶豫的是行為差異。兩套函式庫有幾個預設值不一樣，遷移時踩到的坑大多出在這裡。我前後把幾個中型 API 專案換過來，下面這幾個點是實際撞到、查到根因才搞定的。 坑一：JSON 輸出變成小駝峰問題現象把序列化從 Newtonsoft.Json 換成 System.Text.Json 之後，原本 "UserName" 這類 Pascal Case 輸出，跑到 ASP.NET Core Web API 回傳時突然變成 "userName"，前端開始炸。 真正的原因這個問題有個很容易踩的誤區：System.Text.Json 函式庫本身的預設 PropertyNamingPolicy 是 null，也就是保持原始屬性名稱不變。...

上一篇文章提到從 Newtonsoft.Json 遷移到 System.Text.Json 的實際經驗，這篇專注在兩者的功能與行為差異，讓你在選型時有具體依據。 歷史背景Newtonsoft.Json（又稱 Json.NET）由 James Newton-King 於 2006 年首次發布，長期是 .NET 生態系的預設 JSON 工具。ASP.NET Core 2.x 的 MVC 框架預設使用它進行模型序列化，直到 ASP.NET Core 3.0 才改為 System.Text.Json。 System.Text.Json 隨 .NET Core 3.0（2019 年）一起推出，由微軟直接整合進執行時期，設計目標是效能與低配置開銷——代價是功能集比 Newtonsoft.Json 精簡。 效能根據 BenchmarkDotNet 的公開測試，System.Text.Json 的序列化吞吐量約比 Newtonsoft.Json 快 20–35%。記憶體配置差距因資料形狀差異很大：小物件可能只差一點，大批次 JSON 串流場景下 System.Text.Json 因避免中間字串配...

WebSocket通訊的握手、傳輸、心跳到關閉，底層到底在做什麼？這篇把整個過程拆開來看。 WebSocket是什麼?WebSocket是一種網路通訊協定，能在瀏覽器和伺服器之間建立全雙工的通訊管道。傳統HTTP是請求—回應模式，每次都要重新建立連線；WebSocket一旦握手完成，雙方就可以隨時互相傳送訊息，連線一直維持著。 WebSocket通訊過程1. 建立連線客戶端（通常是瀏覽器）先發出一個普通的 HTTP GET 請求，帶上升級用的標頭： 1234Upgrade: websocketConnection: UpgradeSec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==Sec-WebSocket-Version: 13 Sec-WebSocket-Key 是瀏覽器隨機產生的 16 bytes，經 base64 編碼後放進去，作用是讓伺服器證明它確實理解 WebSocket 協定。 2. 伺服器回應伺服器若支援 WebSocket，回傳 HTTP 101（Switching Protocols）： 123Upgrade: websoc...

資料表裡出現重複記錄，通常有幾個來源：ETL 流程沒做冪等性保護、應用層缺少唯一約束、或手動匯入時重複執行。本文介紹幾種查法與對應的效能取捨。 目錄 什麼是重複資料？ 基礎查詢方法 進階查詢技巧 實務案例分析 效能優化建議 1. 什麼是重複資料？重複資料指的是在資料表中，某些欄位或欄位組合的值完全相同的記錄。例如，在員工資料表中，可能會出現相同姓名、生日和部門的多筆記錄。 2. 基礎查詢方法2.1 使用 GROUP BY 和 HAVING最基本的查詢重複資料方式是使用 GROUP BY 和 HAVING 子句： 1234SELECT 欄位1, 欄位2, COUNT(*) as 重複次數FROM 資料表GROUP BY 欄位1, 欄位2HAVING COUNT(*) > 1; 2.2 查看重複記錄的完整資訊若要查看重複記錄的所有欄位資訊，可以使用以下方式： 1234567891011WITH 重複資料 AS ( SELECT 欄位1, 欄位2 FROM 資料表 GROUP BY 欄位1, 欄位2 HAVING COUNT(*) > 1)SEL...

專案裡有個 AngularJS 畫面，scope.datalist 每筆資料的欄位開頭儲存著 (一)、(二)、(十)、(二十) 這類中文數字前綴。Array.sort 預設按 Unicode 碼位排，(一) 排在 (三) 前面沒問題，但 (十) 和 (二十) 的字元碼比個位數字大，順序就全亂了。 下面這個 customSort 把中文數字轉成阿拉伯數字再比較，支援一到九十九，沒有前綴的項目自動排到最後。 欄位名稱說明： 範例中的 Catacory 是原始資料庫欄位名稱（歷史拼錯沿用至今），不是 typo 建議，直接抄用時請換成你自己的欄位名。 完整程式碼12345678910111213141516171819202122232425262728const getNumber = (str) => { if (!str) return 100; // null / undefined / 空字串全部排到最後 const match = str.match(/^\(([一二三四五六七八九十]+)\)/); if (!match) return 100; ...

表單使用 Vue 元件，this.business.editdata 是元件的資料物件。這篇記錄從踩到 iOS Safari 日期限制的坑，到把整個 validateForm 重構的過程。 初始問題：日期驗證邏輯一開始表單只是單純使用 HTML date 的 max 跟 min 屬性來限制，結果使用者通報在蘋果手機的瀏覽器無法正常運作。iOS Safari 對 min/max 的支援不完整——選擇器本身不會將無效日期標灰，使用者可以選到範圍外的日期，且 Safari 不一定會在送出時執行 constraint validation 擋下來，相當於限制形同虛設。因此補上了 JavaScript 日期驗證： 整理以下驗證需求： 計算最小允許的開始日期（現在日期加7天）。 檢查使用者輸入的開始日期是否符合要求。 如果日期無效，自動將其修正為最早允許的日期。 程式碼如下： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546const today = new Date()...

偽元素讓你在不碰 HTML 的前提下插入內容、選取特定部分，或者做純裝飾性的事。下面從最常用的 ::before/::after 開始，到幾個容易忽略的偽元素，逐一說明。 什麼是偽元素？偽元素讓你在文件中插入內容或選取特定部分，不需要修改 HTML 結構。語法是雙冒號 ::（基於向後相容，部分偽元素也接受舊的單冒號 : 寫法）。 CSS 偽元素列表以下是常見的 CSS 偽元素： ::before - 在元素內容之前插入生成內容 ::after - 在元素內容之後插入生成內容 ::first-line - 選取元素的第一行 ::first-letter - 選取元素的第一個字母 ::selection - 選取使用者反白的部分 ::placeholder - 選取輸入框的預設提示文字 ::marker - 選取列表項目的標記（點或數字） ::backdrop - 全螢幕元素底下的背景層 較少使用但在特定情況下很有用的偽元素： ::cue - 用於 WebVTT 字幕 ::slotted() - 用於 Web Components 中的投影內容 ::before 和 ::af...

前言幾百張表的資料庫，欄位名稱記不住放在哪張表——一張張展開 SSMS 物件總管根本沒有效率。這篇整理幾種用系統視圖直接查的方式，從基礎模糊搜尋到跨資料庫都有，下次忘了直接拿來用。 基本搜尋方法最直接的做法是透過 sys.tables 和 sys.columns 這兩個系統視圖 JOIN 起來查： 1234567891011SELECT t.name AS TableName, c.name AS ColumnNameFROM sys.tables tINNER JOIN sys.columns c ON t.object_id = c.object_idWHERE c.name LIKE '%YourColumnName%'ORDER BY TableName, ColumnName; 使用說明 將 YourColumnName 替換成你要搜尋的欄位名稱 % 符號代表萬用字元，可以做模糊搜尋 查詢結果會顯示所有符合的資料表名稱及欄位名稱 進階搜尋技巧只知道欄位名稱還不夠，通常還要確認型別、長度、能不能為空。加...