WPF + WCF 打造音訊聊天室（二）：文字聊天與白板共享實作

本篇建立 WPF 介面佈局與 WCF 雙工通訊基礎架構，實現文字聊天與共享白板功能。

WPF 介面設計

登入控制項 (LoginControl.xaml)

採用 StackPanel 垂直堆疊佈局，包含伺服器/客戶端單選、伺服器位址輸入、使用者名稱輸入、登入/取消按鈕。漸層背景與圓角邊框提升視覺質感。

主聊天視窗 (ZqlChartWindow.xaml)

使用 Grid 3×3 佈局：

• 左側：使用者列表 (ListView)
• 中上：工具列（語音按鈕、白板模式切換、顏色選擇）
• 中中：共享白板 (InkCanvas)
• 底部：文字聊天區（訊息顯示、輸入框、發送/離開按鈕）

WCF 雙工通訊架構

服務合約

[ServiceContract(CallbackContract = typeof(IZqlChartServiceCallback))]
public interface IZqlChartService
{
    [OperationContract] bool Join(ChatUser chatUser);
    [OperationContract] void Leave(ChatUser chatUser);
    [OperationContract] void SendBroadcastMessage(string strUserName, string message);
    [OperationContract] bool IsUserNameTaken(string strUserName);
    [OperationContract] void SendInkStrokes(MemoryStream memoryStream);
}

回調合約

[ServiceContract]
public interface IZqlChartServiceCallback
{
    [OperationContract(IsOneWay = true)] void NotifyMessage(string message);
    [OperationContract(IsOneWay = true)] void UpdateUsersList(List<ChatUser> listChatUsers);
    [OperationContract(IsOneWay = true)] void OnInkStrokesUpdate(ChatUser chatUser, byte[] bytesStroke);
    [OperationContract(IsOneWay = true)] void ServerDisconnected();
}

服務端實作 (ZqlChartService)

核心邏輯：

• 靜態字典 s_dictCallbackToUser 維護回調通道與使用者對應；
• Join：註冊使用者，廣播更新列表；
• Leave：移除使用者，伺服器離開時清空所有連線；
• SendBroadcastMessage：排除發送者外廣播文字訊息；
• SendInkStrokes：將 MemoryStream 序列化為 byte[] 廣播筆跡資料。

客戶端回調類別 (ClientCallBack)

關鍵點：使用 SynchronizationContext 將服務回調封送至 UI 執行緒：

public class ClientCallBack : IZqlChartServiceCallback
{
    private SynchronizationContext m_uiSyncContext;
    private ZqlChartWindow m_mainWindow;

    public void NotifyMessage(string message)
    {
        m_uiSyncContext.Post(_ => m_mainWindow.NotifyMessage(message), null);
    }
    public void UpdateUsersList(List<ChatUser> list)
    {
        m_uiSyncContext.Post(_ => m_mainWindow.UpdateUsersList(list), null);
    }
    public void OnInkStrokesUpdate(ChatUser user, byte[] strokes)
    {
        m_uiSyncContext.Post(_ => m_mainWindow.OnInkStrokesUpdate(strokes), strokes);
        m_uiSyncContext.Post(_ => m_mainWindow.LastUserDraw(user), user);
    }
    // ... 其他回調同理
}

執行效果

1. 伺服器登入：
2. 客戶端登入：
3. 文字聊天：
4. 共享白板：

白板功能基於 WPF 內建 InkCanvas，筆跡序列化為記憶體串流透過 WCF 傳輸，各客戶端反序列化還原。下一篇將在此架構上增加語音聊天功能。