C#通过fleck实现wss协议的WebSocket多人Web实时聊天(附源码)

  • C#通过fleck实现wss协议的WebSocket多人Web实时聊天(附源码)已关闭评论
  • 11 次浏览
  • A+
所属分类:.NET技术
摘要

最近想做一个Web版的即时聊天为后面开发的各项功能做辅助,就需要浏览器与服务器能够实时通讯。而WebSocket这种双向通信协议,就很合适用来实现这种需求。
本篇文章主要解决C#如何实现WebSocket服务端和Javascript客户端基于wss协议的安全通信问题。
本文代码已开源至Github:https://github.com/hxsfx/WebSocketServerTest


前言

最近想做一个Web版的即时聊天为后面开发的各项功能做辅助,就需要浏览器与服务器能够实时通讯。而WebSocket这种双向通信协议,就很合适用来实现这种需求。
本篇文章主要解决C#如何实现WebSocket服务端和Javascript客户端基于wss协议的安全通信问题。
本文代码已开源至Github:https://github.com/hxsfx/WebSocketServerTest

环境

  • 编程语言:C#
  • Websocket开源库:fleck
  • SSL域名证书:腾讯云IIS版本域名证书

最终效果

C#通过fleck实现wss协议的WebSocket多人Web实时聊天(附源码)

代码实现

前端

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证书域名相同。