簡易線上 C# IDE 實作（一）：架構設計與輸出捕獲機制

前言

想在瀏覽器裡直接編寫、編譯、執行 C# 代碼？本系列分享一個極簡線上 IDE 實作，解決兩大核心問題：

1. 如何將網頁文字框的代碼動態編譯並執行。
2. 如何捕獲程式執行輸出（Console.Write*）並在網頁顯示。

架構概覽

• 前端：文字區編輯代碼，AJAX 發送至後端 API。
• 後端：CSharpCodeProvider 動態編譯 → 記憶體組件 → 反射呼叫 Main。
• 輸出捕獲：編譯前以字串替換將 Console.Write* 重導向至自訂 Consoler 靜態類別，執行後收集輸出回傳前端。

輸出捕獲核心：Consoler 類別

using System;
using System.Collections.Generic;

namespace VSOnline.Framework
{
    public class Consoler
    {
        public static Dictionary Outputs { get; private set; } = new Dictionary();

        public List Output { get; private set; } = new List();

        public void Write(object obj) => Output.Add(obj?.ToString() ?? "");
        public void WriteLine(object obj) => Output.Add((obj?.ToString() ?? "") + "\n");
    }
}

運作流程

1. 前端提交代碼與唯一 id（如 Session ID 或 GUID）。
2. 後端 CodeRun.Run(code, id)：
   　　a. Consoler.Outputs[id] = new Consoler() 建立輸出收集器。
   　　b. 字串替換 Console.Write/WriteLine → Consoler.Outputs["id"].Write/WriteLine。
   　　c. 動態編譯、載入、執行。
   　　d. 執行期間所有輸出導向該 Consoler 實例。
   　　e. 執行結束，ReturnOutput(id) 取出字串列表、移除收集器、回傳前端。
3. 前端將字串陣列渲染於輸出區。

關鍵設計決策

結語

極簡架構即可跑通「瀏覽器寫 C# → 後端編譯執行 → 回傳輸出」完整流程。後續文章將給出 CodeRun 完整實作與單元測試。