.net core 和 WPF 開發升訊威線上客服與營銷系統：使用 WebSocket 實現訪客端通訊
阿新 • • 發佈：2021-01-15
本系列文章詳細介紹使用 .net core 和 WPF 開發 升訊威線上客服與營銷系統 的過程。本產品已經成熟穩定並投入商用。
線上演示環境：[https://kf.shengxunwei.com](https://kf.shengxunwei.com) 注意：演示環境僅供演示交流與評估，不保證 7x24 小時可用。
[文章目錄列表請點選這裡](https://blog.shengxunwei.com/Home/Post/44a31a32-d4e1-4ddd-8526-8a2bcd2e22be)
---
對於線上客服與營銷系統，訪客端是指瀏覽網站的網際網路使用者，或是通過APP、微信等內嵌聊天頁面與後臺客服交流的使用者，在本篇文章中，我將詳細介紹如何在 .net core 環境下使用 WebSocket 技術實現訪客在網頁上與伺服器進行通訊。
這裡存在幾個技術難點需要注意：
* 聊天介面要能無縫嵌入客戶的目標網站，對原網站不能有任何影響。
* 訪客可以通過網站右下角的浮動框，一邊聊天一邊瀏覽網站，網頁的跳轉、刷星都不能中斷聊天。
* 需要考慮手機端聊天頁面連線不穩定的情況，要能在APP或瀏覽器切到手機後臺失去連線時，對聊天狀態和資訊進行保持。
訪客端實現的效果：
訪客端在手機上的效果：
後臺客服的實現效果：
---
### 在 asp.net core 中配置中介軟體
首先我們要在 Startup.cs 中，啟用 WebSocket 中介軟體：
~~~csharp
var webSocketOptions = new WebSocketOptions()
{
KeepAliveInterval = TimeSpan.FromSeconds(120),
};
app.UseWebSockets(webSocketOptions);
~~~
可配置以下設定：
* KeepAliveInterval - 向客戶端傳送“ping”幀的頻率，以確保代理保持連線處於開啟狀態。 預設值為 2 分鐘。
* ReceiveBufferSize - 用於接收資料的緩衝區的大小。 高階使用者可能需要對其進行更改，以便根據資料大小調整效能。 預設值為 4 KB。
* AllowedOrigins - 用於 WebSocket 請求的允許的 Origin 標頭值列表。 預設情況下，允許使用所有源。
### 接收訪客端的請求
在請求生命週期後期（例如在 Configure 方法或操作方法的後期），檢查它是否是 WebSocket 請求並接受 WebSocket 請求。
~~~csharp
app.Use(async (context, next) =>
{
if (context.Request.Path == "/ws")
{
if (context.WebSockets.IsWebSocketRequest)
{
using (WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync())
{
await Echo(context, webSocket);
}
}
else
{
context.Response.StatusCode = 400;
}
}
else
{
await next();
}
});
~~~
在請求期間對 Task 執行 await，如下面的示例所示：
~~~csharp
app.Use(async (context, next) =>
{
using (WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync())
{
var socketFinishedTcs = new TaskCompletionSource