C#通過fleck實現wss協議的WebSocket多人Web實時聊天（附源碼）

来源:https://www.cnblogs.com/hxsfx/archive/2022/09/15/16698238.html
-Advertisement-
Play Games

前言 最近想做一個Web版的即時聊天為後面開發的各項功能做輔助，就需要瀏覽器與伺服器能夠實時通訊。而WebSocket這種雙向通信協議，就很合適用來實現這種需求。 本篇文章主要解決C#如何實現WebSocket服務端和Javascript客戶端基於wss協議的安全通信問題。 本文代碼已開源至Gith ...


前言

最近想做一個Web版的即時聊天為後面開發的各項功能做輔助，就需要瀏覽器與伺服器能夠實時通訊。而WebSocket這種雙向通信協議，就很合適用來實現這種需求。
本篇文章主要解決C#如何實現WebSocket服務端和Javascript客戶端基於wss協議的安全通信問題。
本文代碼已開源至Github：https://github.com/hxsfx/WebSocketServerTest

環境

  • 編程語言：C#
  • Websocket開源庫：fleck
  • SSL功能變數名稱證書：騰訊雲IIS版本功能變數名稱證書

最終效果

代碼實現

前端

1、HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="Content/index.css" rel="stylesheet" />
</head>
<body>
    <div id="ChatContainer">
        <div class="tip "></div>
        <div class="msgList"></div>
        <div class="msgInput">
            <textarea id="SendMsgContent"></textarea>
            <button id="SendMsgButton">發送</button>
        </div>
    </div>
    <script src="Scripts/index.js"></script>
</body>
</html>

2、JavaScript

window.onload = function () {
    var TipElement = document.querySelector("#ChatContainer > div.tip");
    var MsgListElement = document.querySelector("#ChatContainer > div.msgList");
    var SendMsgContentElement = document.getElementById("SendMsgContent");
    var SendMsgButton = document.getElementById("SendMsgButton");
    window.wss = new WebSocket("wss://xxx.hxsfx.com:xxx");
    //監聽消息狀態
    wss.onmessage = function (e) {
        var dataJson = JSON.parse(e.data);
        loadData(dataJson.nickName, dataJson.msg, dataJson.date, dataJson.time, true);
    }
    //監聽鏈接狀態
    wss.onopen = function () {
        if (TipElement.className.indexOf("conn") < 0) {
            TipElement.className = TipElement.className + " conn";
        }
        if (TipElement.className.indexOf("disConn") >= 0) {
            TipElement.className = TipElement.className.replace("disConn", "");
        }
    }
    //監聽關閉狀態
    wss.onclose = function () {
        if (TipElement.className.indexOf("conn") >= 0) {
            TipElement.className = TipElement.className.replace("conn", "");
        }
        if (TipElement.className.indexOf("disConn") < 0) {
            TipElement.className = TipElement.className + " disConn";
        }
    }
    //監控輸入框回車鍵（直接發送輸入內容）
    SendMsgContentElement.onkeydown = function () {
        if (event.keyCode == 13 && SendMsgContentElement.value.trim() != "") {
            if (SendMsgContentElement.value.trim() != "") {
                SendMsgButton.click();
                event.returnValue = false;
            } else {
                SendMsgContentElement.value = "";
            }
        }
    }
    //發送按鈕點擊事件
    SendMsgButton.onclick = function () {
        var msgDataJson = {
            msg: SendMsgContentElement.value,
        };
        SendMsgContentElement.value = "";
        var today = new Date();
        var date = today.getFullYear() + "年" + (today.getMonth() + 1) + "月" + today.getDate() + "日";
        var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
        loadData("自己", msgDataJson.msg, date, time, false);
        let msgDataJsonStr = JSON.stringify(msgDataJson);
        wss.send(msgDataJsonStr);
    }
    //把數據載入到對話框中
    function loadData(nickName, msg, date, time, isOther) {
        let msgItemElement = document.createElement('div');
        if (isOther) {
            msgItemElement.className = "msgItem other";
        } else {
            msgItemElement.className = "msgItem self";
        }
        let chatHeadElement = document.createElement('div');
        chatHeadElement.className = "chatHead";
        chatHeadElement.innerHTML = "<svg viewBox=\"0 0 1024 1024\"><path d=\"M956.696128 512.75827c0 245.270123-199.054545 444.137403-444.615287 444.137403-245.538229 0-444.522166-198.868303-444.522166-444.137403 0-188.264804 117.181863-349.108073 282.675034-413.747255 50.002834-20.171412 104.631012-31.311123 161.858388-31.311123 57.297984 0 111.87909 11.128455 161.928996 31.311123C839.504032 163.650197 956.696128 324.494489 956.696128 512.75827L956.696128 512.75827M341.214289 419.091984c0 74.846662 38.349423 139.64855 94.097098 171.367973 23.119557 13.155624 49.151443 20.742417 76.769454 20.742417 26.64894 0 51.773154-7.096628 74.286913-19.355837 57.06467-31.113625 96.650247-96.707552 96.650247-172.742273 0-105.867166-76.664054-192.039781-170.936137-192.039781C417.867086 227.053226 341.214289 313.226864 341.214289 419.091984L341.214289 419.091984M513.886977 928.114163c129.883139 0 245.746984-59.732429 321.688583-153.211451-8.971325-73.739445-80.824817-136.51314-182.517917-167.825286-38.407752 34.55091-87.478354 55.340399-140.989081 55.340399-54.698786 0-104.770182-21.907962-143.55144-57.96211-98.921987 28.234041-171.379229 85.823668-188.368158 154.831344C255.507278 861.657588 376.965537 928.114163 513.886977 928.114163L513.886977 928.114163M513.886977 928.114163 513.886977 928.114163z\"></path></svg>";
        let msgMainElement = document.createElement('div');
        msgMainElement.className = "msgMain";
        let nickNameElement = document.createElement('div');
        nickNameElement.className = "nickName";
        nickNameElement.innerText = nickName;
        let msgElement = document.createElement('div');
        msgElement.className = "msg";
        msgElement.innerText = msg;
        let timeElement = document.createElement('div');
        timeElement.className = "time";
        let time_date_Element = document.createElement('span');
        time_date_Element.innerText = date;
        let time_time_Element = document.createElement('span');
        time_time_Element.innerText = time;
        timeElement.append(time_date_Element);
        timeElement.append(time_time_Element);
        msgMainElement.append(nickNameElement);
        msgMainElement.append(msgElement);
        msgMainElement.append(timeElement);
        msgItemElement.append(chatHeadElement);
        msgItemElement.append(msgMainElement);
        MsgListElement.append(msgItemElement);
        MsgListElement.scrollTop = MsgListElement.scrollHeight - MsgListElement.clientHeight;
    }
}

3、CSS

* {
  padding: 0;
  margin: 0;
}
html,
body {
  font-size: 14px;
  height: 100%;
}
body {
  padding: 2%;
  box-sizing: border-box;
  background-color: #a3aebc;
}
#ChatContainer {
  padding: 1% 25px 0 25px;
  width: 80%;
  max-width: 850px;
  height: 100%;
  background-color: #fefefe;
  border-radius: 10px;
  box-sizing: border-box;
  margin: auto;
}
#ChatContainer .tip {
  height: 30px;
  line-height: 30px;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: #999999;
}
#ChatContainer .tip:before {
  content: "連接中";
}
#ChatContainer .tip.disConn {
  color: red;
}
#ChatContainer .tip.disConn:before {
  content: "× 連接已斷開";
}
#ChatContainer .tip.conn {
  color: green;
}
#ChatContainer .tip.conn:before {
  content: "√ 已連接";
}
#ChatContainer .msgList {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100% - 100px);
}
#ChatContainer .msgList .msgItem {
  display: flex;
  margin: 5px;
}
#ChatContainer .msgList .msgItem .chatHead {
  height: 36px;
  width: 36px;
  background-color: #ffffff;
  border-radius: 100%;
}
#ChatContainer .msgList .msgItem .msgMain {
  margin: 0 5px;
  display: flex;
  flex-direction: column;
}
#ChatContainer .msgList .msgItem .msgMain .nickName {
  color: #666666;
}
#ChatContainer .msgList .msgItem .msgMain .msg {
  padding: 10px;
  line-height: 30px;
  color: #333333;
}
#ChatContainer .msgList .msgItem .msgMain .time {
  color: #999999;
  font-size: 9px;
}
#ChatContainer .msgList .msgItem .msgMain .time span:first-child {
  margin-right: 3px;
}
#ChatContainer .msgList .self {
  flex-direction: row-reverse;
}
#ChatContainer .msgList .self .nickName {
  text-align: right;
}
#ChatContainer .msgList .self .msg {
  border-radius: 10px 0 10px 10px;
  background-color: #d6e5f6;
}
#ChatContainer .msgList .self .time {
  text-align: right;
}
#ChatContainer .msgList .other .msg {
  border-radius: 0 10px 10px 10px;
  background-color: #e8eaed;
}
#ChatContainer .msgInput {
  margin: 15px 0;
  display: flex;
}
#ChatContainer .msgInput textarea {
  font-size: 16px;
  padding: 0 5px;
  width: 80%;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  color: #333333;
  border-radius: 10px 0 0 10px;
  border: none;
  outline: none;
  border: 1px solid #eee;
  resize: none;
}
#ChatContainer .msgInput button {
  width: 20%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #fefefe;
  background-color: #2a6bf2;
  border-radius: 0 10px 10px 0;
  border: 1px solid #2a6bf2;
}

後端

創建控制台程式（通過cmd命令調用，可修改源碼為直接運行使用），然後進入Gnet安裝fleck，其中的主要代碼如下（完整源碼移步github獲取）：

//組合監聽地址
var loaction = webSocketProtocol + "://" + ListenIP + ":" + ListenPort;
var webSocketServer = new WebSocketServer(loaction);
if (loaction.StartsWith("wss://"))
{
    webSocketServer.Certificate = new X509Certificate2(pfxFilePath, pfxPassword
   , X509KeyStorageFlags.Exportable | X509KeyStorageFlags.MachineKeySet | X509KeyStorageFlags.PersistKeySet
    );
    webSocketServer.EnabledSslProtocols = System.Security.Authentication.SslProtocols.Tls12;
}//當為安全鏈接時，將證書信息寫入鏈接
//開始偵聽
webSocketServer.Start(socket =>
{
    var socketConnectionInfo = socket.ConnectionInfo;
    var clientId = socketConnectionInfo.ClientIpAddress + ":" + socketConnectionInfo.ClientPort;
    socket.OnOpen = () =>
    {
        if (!ip_scoket_Dic.ContainsKey(clientId))
        {
            ip_scoket_Dic.Add(clientId, socket);
        }
        Console.WriteLine(CustomSend("服務端", $"[{clientId}]加入"));
    };
    socket.OnClose = () =>
    {
        if (ip_scoket_Dic.ContainsKey(clientId))
        {
            ip_scoket_Dic.Remove(clientId);
        }
        Console.WriteLine(CustomSend("服務端", $"[{clientId}]離開"));
    };
    socket.OnMessage = message =>
    {
        //將發送過來的json字元串進行解析
        var msgModel = JsonConvert.DeserializeObject<MsgModel>(message);
        Console.WriteLine(CustomSend(clientId, msgModel.msg, clientId));
    };
});
//出錯後進行重啟
webSocketServer.RestartAfterListenError = true;
Console.WriteLine("【開始監聽】" + loaction);
//服務端發送消息給客戶端
do
{
    Console.WriteLine(CustomSend("服務端", Console.ReadLine()));
} while (true);

問題及解決方法

問題:WebSocket connection to 'wss://xxx.xxx.xxx.xxx:xxxx/' failed:
解決方法：要建立WSS安全通道，必須要先申請功能變數名稱SSL證書，同時在防火牆中開放指定埠，以及前端WSS請求功能變數名稱要跟SSL證書功能變數名稱相同。

博客園-本文作者(好先生FX http://www.cnblogs.com/hxsfx)

著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一位同學的Python大作業【分析噹噹網書籍價格、出版社、電子書版本占比數據】
    目錄 前言 本次案例實現目標 最基本思路流程: <通用> 一. 數據來源分析 二. 代碼實現步驟過程: 代碼實現基本四大步驟 代碼實現 獲取書籍詳情信息 發送請求 解析數據 保存數據 運行代碼得到結果 可視化圖表 書籍總體價格區間 各個出版社書籍數量柱狀圖 電子書版本占比 書籍評論數據 詞雲 對於本 ...
  • Python學習：配置日誌的幾種方式
    摘要：串列流比較簡單，對於parallelStream，站在它背後的是ForkJoin框架。 本文分享自華為雲社區《深入理解Stream之foreach源碼解析》，作者：李哥技術 。 前言 Stream中的操作可以分為兩大類：中間操作與結束操作。 今天要說的foreach是屬於結束操作。 Strea ...
  • 【APP 逆向百例】Frida 初體驗，root 檢測與加密字元串定位
    聲明 本文章中所有內容僅供學習交流使用，不用於其他任何目的，不提供完整代碼，抓包內容、敏感網址、數據介面等均已做脫敏處理，嚴禁用於商業用途和非法用途，否則由此產生的一切後果均與作者無關！ 本文章未經許可禁止轉載，禁止任何修改後二次傳播，擅自使用本文講解的技術而導致的任何意外，作者均不負責，若有侵權， ...
  • 【Java面試】這應該是面試官最想聽到的回答，Mysql如何解決幻讀問題？
    “Mysql如何解決幻讀問題” 一個工作了4年小伙伴，去一個美團面試，遇到了這樣一個問題。 大家好，我是Mic，一個工作了14年的Java程式員 關於這個問題，面試官想考察什麼？我們應該如何回答呢？ 問題解析 這個問題至少考察的是3年以上開發經驗的同學。 Mysql底層去解決併發事務問題，至少是要有 ...
  • Python中的super函數，你熟嗎？
    摘要：經常有朋友問，學 Python 面向對象時，翻閱別人代碼，會發現一個 super() 函數，那這個函數的作用到底是什麼？ 本文分享自華為雲社區《Python中的super函數怎麼學，怎麼解？》，作者： 夢想橡皮擦。 實戰場景 經常有朋友問，學 Python 面向對象時，翻閱別人代碼，會發現一個 ...
  • Linux安裝RabbitMQ教程(文件下載地址+安裝命令+ 埠開放 + 用戶創建 +配置文件模板+埠修改)
    前言 1.安裝RabbitMQ前需先安裝erlang, 且兩者需要版本對應, 否則無法正常啟動RabbitMQ (本教程使用22.0.7版本的erlang和3.8.6版本的Rabbitmq) 版本對應查看: https://www.rabbitmq.com/which-erlang.html#com ...
  • 關於多工序、多資源排程場景下的新成果
    在之前關於資源與工序的場景中寫了一篇不同資源與工序組合下，APS設計難度的文章. 並針對多工序、多工序場景下排程的初步設計。關於生產計劃排程的種類及其特性. ...
  • 【手把手】光說不練假把式，這篇全鏈路壓測實踐探索
    Hello，大家好呀，前兩篇文章，我們說了下關於全鏈路壓測的意義、整體架構，以及5種壓測的方案。 前面兩篇基本都屬於比較理論的內容，今天這篇咱們來點實踐的東西，手把手帶你搞出一個壓測來 如果不清楚之前兩篇的文章的小伙伴，可以先看下，在這裡 7 環境準備 7.1 環境服務列表 需要在虛擬機或者linu ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類