.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或瀏覽器切到手機後臺失去連線時,對聊天狀態和資訊進行保持。
訪客端實現的效果:
![](https://blog-api.shengxunwei.com/StaticFiles/Upload/eff58aa5-8c86-4d8f-8f54-aca3caca06d1.jpg)
訪客端在手機上的效果:
![](https://blog-api.shengxunwei.com/StaticFiles/Upload/26425a7b-3e19-4af4-92c9-3b80c1ec5c36.JPG)
後臺客服的實現效果:
![](https://blog-api.shengxunwei.com/StaticFiles/Upload/48026b95-5939-49cb-8175-5c0a33666924.JPG)
---
### 在 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