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
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類