當(dāng)前位置：首頁 > 编程语言 > C# >内容正文

C#

利用html 5 websocket做个山寨版web聊天室(手写C#服务器)

發(fā)布時間：2025/3/15 C# 47 豆豆

生活随笔收集整理的這篇文章主要介紹了利用html 5 websocket做个山寨版web聊天室(手写C#服务器) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

在之前的博客中提到過看到html5 的websocket后很感興趣，終于可以擺脫長輪詢（websocket之前的實(shí)現(xiàn)方式可以看看Developer Works上的一篇文章，有簡單提到，同時也說了websocket基本概念）等方式做一個山寨版的web聊天室。

什么是websocket

?WebSocket 協(xié)議是html5引入的一種新的協(xié)議，其目的在于實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信。看了上面鏈接的同學(xué)肯定對過去怎么低效率高消耗（輪詢或comet）的做此事已經(jīng)有所了解了，而在websocket API，瀏覽器和服務(wù)器只需要要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。同時這么做有兩個好處

1.通信傳輸字節(jié)減少：比起以前使用http傳輸數(shù)據(jù)，websocket傳輸?shù)念~外信息很少，據(jù)百度說只有2k

2.服務(wù)器可以主動向客戶端推送消息，而不用客戶端去查詢

關(guān)于概念和好處，網(wǎng)上到處都是，不再贅述，簡單看看其原理，然后動手寫一個web版聊天室吧

握手

?除了TCP連接的三次握手，websocket協(xié)議中客戶端與服務(wù)器想建立連接需要一次額外的握手動作，在最新版的協(xié)議中是這個樣子的

客戶端向服務(wù)器發(fā)送請求

GET / HTTP/1.1 Upgrade: websocket Connection: Upgrade Host: 127.0.0.1:8080 Origin: http://test.com Pragma: no-cache Cache-Control: no-cache Sec-WebSocket-Key: OtZtd55qBhJF2XLNDRgUMg== Sec-WebSocket-Version: 13 Sec-WebSocket-Extensions: x-webkit-deflate-frame User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36

服務(wù)器給出響應(yīng)

HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=

?在請求中的“Sec-WebSocket-Key”是隨機(jī)的，服務(wù)器端會用這些數(shù)據(jù)來構(gòu)造出一個SHA-1的信息摘要。把“Sec-WebSocket-Key”加上一個魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用 SHA-1 加密，之后進(jìn)行 BASE-64編碼，將結(jié)果做為 “Sec-WebSocket-Accept” 頭的值，返回給客戶端（來自維基百科）。

websocket API

經(jīng)過握手之后瀏覽器與服務(wù)器建立連接，兩者就可以互相通信了。websocket的API真心很簡單，看看W3C的定義

enum BinaryType { "blob", "arraybuffer" }; [Constructor(DOMString url, optional (DOMString or DOMString[]) protocols)] interface WebSocket : EventTarget {readonly attribute DOMString url;// ready stateconst unsigned short CONNECTING = 0;const unsigned short OPEN = 1;const unsigned short CLOSING = 2;const unsigned short CLOSED = 3;readonly attribute unsigned short readyState;readonly attribute unsigned long bufferedAmount;// networking attribute EventHandler onopen;attribute EventHandler onerror;attribute EventHandler onclose;readonly attribute DOMString extensions;readonly attribute DOMString protocol;void close([Clamp] optional unsigned short code, optional DOMString reason);// messaging attribute EventHandler onmessage;attribute BinaryType binaryType;void send(DOMString data);void send(Blob data);void send(ArrayBuffer data);void send(ArrayBufferView data); };

創(chuàng)建websocket

ws=new WebSocket(address); //ws://127.0.0.1:8080

調(diào)用其構(gòu)造函數(shù)，傳入地址，就可以創(chuàng)建一個websocket了，值得注意的是地址協(xié)議得是ws/wss

關(guān)閉socket

ws.close();

調(diào)用webservice實(shí)例的close()方法就可以關(guān)閉webservice，當(dāng)然也可以傳入一個code和string說明為什么關(guān)了

幾個回調(diào)函數(shù)句柄

由于其異步執(zhí)行，回調(diào)函數(shù)自然少不了，有四個重要的

onopen：連接創(chuàng)建后調(diào)用
onmessage：接收到服務(wù)器消息后調(diào)用
onerror：出錯時調(diào)用
onclose：關(guān)閉連接的時候調(diào)用

看名字就知道是干什么的了，每個回調(diào)函數(shù)都會傳入一個Event對象，可以通過event.data訪問消息

使用API

我們可以在創(chuàng)建socket成功后為其回調(diào)函數(shù)賦值

ws=new WebSocket(address);ws.onopen=function(e){var msg=document.createElement('div');msg.style.color='#0f0';msg.innerHTML="Server > connection open.";msgContainer.appendChild(msg);ws.send('{<'+document.getElementById('name').value+'>}');};

?也可以通過事件綁定的方式

ws=new WebSocket(address);ws.addEventListener('open',function(e){var msg=document.createElement('div');msg.style.color='#0f0';msg.innerHTML="Server > connection open.";msgContainer.appendChild(msg);ws.send('{<'+document.getElementById('name').value+'>}');});

?客戶端實(shí)現(xiàn)

其實(shí)客戶端的實(shí)現(xiàn)比較簡單，除了websocket相關(guān)的幾句就是一些自動focus、回車鍵事件處理、消息框自動定位到底部等簡單功能，不一一說明了

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Web Socket Client</title> 5 </head> 6 <body style="padding:10px;"> 7 <h1>Web Socket Chating Room</h1> 8 <div style="margin:5px 0px;"> 9 Address: 10 <div><input id="address" type="text" value="ws://127.0.0.1:8080" style="width:400px;"/></div> 11 </div> 12 <div style="margin:5px 0px;"> 13 Name: 14 <div><input id="name" type="text" value="Byron" style="width:400px;"/></div> 15 </div> 16 <div> 17 <button id="connect" onclick="connect();">connect server</button>    18 <button id="disconnect" onclick="quit();">disconnect</button>   19 <button id="clear" onclick="clearMsg();">clear</button> 20 </div> 21 <h5 style="margin:4px 0px;">Message:</h5> 22 <div id="message" style="border:solid 1px #333; padding:4px; width:400px; overflow:auto; 23 background-color:#404040; height:300px; margin-bottom:8px; font-size:14px;"> 24 </div> 25 <input id="text" type="text" onkeypress="enter(event);" style="width:340px"/>    26 <button id="send" onclick="send();">send</button> 27 28 <script type="text/javascript"> 29 var name=document.getElementById('name').value; 30 var msgContainer=document.getElementById('message'); 31 var text=document.getElementById('text'); 32 33 function connect () { 34 var address=document.getElementById('address').value; 35 36 ws=new WebSocket(address); 37 ws.onopen=function(e){ 38 var msg=document.createElement('div'); 39 msg.style.color='#0f0'; 40 msg.innerHTML="Server > connection open."; 41 msgContainer.appendChild(msg); 42 ws.send('{<'+document.getElementById('name').value+'>}'); 43 }; 44 ws.onmessage=function(e){ 45 var msg=document.createElement('div'); 46 msg.style.color='#fff'; 47 msg.innerHTML=e.data; 48 msgContainer.appendChild(msg); 49 }; 50 ws.onerror=function(e){ 51 var msg=document.createElement('div'); 52 msg.style.color='#0f0'; 53 msg.innerHTML='Server > '+e.data; 54 msgContainer.appendChild(msg); 55 }; 56 ws.onclose=function(e){ 57 var msg=document.createElement('div'); 58 msg.style.color='#0f0'; 59 msg.innerHTML="Server > connection closed by server."; 60 msgContainer.appendChild(msg); 61 }; 62 text.focus(); 63 } 64 65 function quit(){ 66 if(ws){ 67 ws.close(); 68 var msg=document.createElement('div'); 69 msg.style.color='#0f0'; 70 msg.innerHTML='Server > connection closed.'; 71 msgContainer.appendChild(msg); 72 ws=null; 73 } 74 } 75 76 function send(){ 77 ws.send(text.value); 78 setTimeout(function(){ 79 msgContainer.scrollTop=msgContainer.getBoundingClientRect().height; 80 },100); 81 text.value=''; 82 text.focus(); 83 } 84 85 function clearMsg(){ 86 msgContainer.innerHTML=""; 87 } 88 89 function enter(event){ 90 if(event.keyCode==13){ 91 send(); 92 } 93 } 94 </script> 95 </body> 96 </html> View Code

服務(wù)器支持

?其實(shí)websocket的服務(wù)器實(shí)現(xiàn)網(wǎng)上可以找到很多了，向維基百科中列出的

php -?http://code.google.com/p/phpwebsocket/
jetty -?http://jetty.codehaus.org/jetty/?(版本7開始支持websocket)
netty -?http://www.jboss.org/netty
ruby -?http://github.com/gimite/web-socket-ruby
Kaazing -?http://www.kaazing.org/confluence/display/KAAZING/Home
Tomcat -?http://tomcat.apache.org/?(7.0.26支持websocket)
WebLogic -?http://www.oracle.com/us/products/middleware/cloud-app-foundation/weblogic/overview/index.html?(12.1.2 開始支持)
node.js -?https://github.com/Worlize/WebSocket-Node
node.js -?http://socket.io
nginx -?http://nginx.com/
mojolicious -?http://mojolicio.us/

?但是我希望加入一些自己特定的處理，比如用戶名識別啊、廣播啊什么的，所以自己實(shí)現(xiàn)了一個簡單的C#版本

websocket 聊天室C#服務(wù)器實(shí)現(xiàn)

我上篇博客C# socket編程實(shí)踐——支持廣播的簡單socket服務(wù)器中介紹了怎么實(shí)現(xiàn)一個簡單的C#廣播服務(wù)器，在這上面擴(kuò)展兩個部分就能作為websocket服務(wù)器了

1.wecsocket握手處理

?當(dāng)服務(wù)器收到瀏覽器握手請求后，首先需要識別握手信息，我簡單粗暴的使用了包含字符串處理，當(dāng)然加入了是否握過手的判斷

client.BeginReceive (buffer, 0, buffer.Length, SocketFlags.None, new AsyncCallback (Recieve), client);string msg = Encoding.UTF8.GetString (buffer, 0, length);if (!clientPool [client].IsHandShaked && msg.Contains ("Sec-WebSocket-Key")) {client.Send (PackageHandShakeData (buffer, length));clientPool [client].IsHandShaked = true;return;}

識別成功后就可以生成服務(wù)器響應(yīng)發(fā)送給客戶端了

/// <summary>/// 打包服務(wù)器握手?jǐn)?shù)據(jù)/// </summary>/// <returns>The hand shake data.</returns>/// <param name="handShakeBytes">Hand shake bytes.</param>/// <param name="length">Length.</param>private byte[] PackageHandShakeData (byte[] handShakeBytes, int length){string handShakeText = Encoding.UTF8.GetString (handShakeBytes, 0, length);string key = string.Empty;Regex reg = new Regex (@"Sec\-WebSocket\-Key:(.*?)\r\n");Match m = reg.Match (handShakeText);if (m.Value != "") {key = Regex.Replace (m.Value, @"Sec\-WebSocket\-Key:(.*?)\r\n", "$1").Trim ();}byte[] secKeyBytes = SHA1.Create ().ComputeHash (Encoding.ASCII.GetBytes (key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"));string secKey = Convert.ToBase64String (secKeyBytes);var responseBuilder = new StringBuilder ();responseBuilder.Append ("HTTP/1.1 101 Switching Protocols" + "\r\n");responseBuilder.Append ("Upgrade: websocket" + "\r\n");responseBuilder.Append ("Connection: Upgrade" + "\r\n");responseBuilder.Append ("Sec-WebSocket-Accept: " + secKey + "\r\n\r\n");return Encoding.UTF8.GetBytes (responseBuilder.ToString ());}

?2.解析瀏覽器消息和處理發(fā)送給瀏覽器的消息

?websocket中數(shù)據(jù)并不完全是消息本身，我們需要做一些處理

/// <summary>/// 解析客戶端發(fā)送來的數(shù)據(jù)/// </summary>/// <returns>The data.</returns>/// <param name="recBytes">Rec bytes.</param>/// <param name="length">Length.</param>private string AnalyzeClientData (byte[] recBytes, int length){if (length < 2) {return string.Empty;}bool fin = (recBytes [0] & 0x80) == 0x80; // 1bit，1表示最后一幀 if (!fin) {return string.Empty;// 超過一幀暫不處理 }bool mask_flag = (recBytes [1] & 0x80) == 0x80; // 是否包含掩碼 if (!mask_flag) {return string.Empty;// 不包含掩碼的暫不處理 }int payload_len = recBytes [1] & 0x7F; // 數(shù)據(jù)長度 byte[] masks = new byte[4];byte[] payload_data;if (payload_len == 126) {Array.Copy (recBytes, 4, masks, 0, 4);payload_len = (UInt16)(recBytes [2] << 8 | recBytes [3]);payload_data = new byte[payload_len];Array.Copy (recBytes, 8, payload_data, 0, payload_len);} else if (payload_len == 127) {Array.Copy (recBytes, 10, masks, 0, 4);byte[] uInt64Bytes = new byte[8];for (int i = 0; i < 8; i++) {uInt64Bytes [i] = recBytes [9 - i];}UInt64 len = BitConverter.ToUInt64 (uInt64Bytes, 0);payload_data = new byte[len];for (UInt64 i = 0; i < len; i++) {payload_data [i] = recBytes [i + 14];}} else {Array.Copy (recBytes, 2, masks, 0, 4);payload_data = new byte[payload_len];Array.Copy (recBytes, 6, payload_data, 0, payload_len);}for (var i = 0; i < payload_len; i++) {payload_data [i] = (byte)(payload_data [i] ^ masks [i % 4]);}return Encoding.UTF8.GetString (payload_data);} 解析客戶端發(fā)送來的數(shù)據(jù)

/// <summary>/// 把客戶端消息打包處理（拼接上誰什么時候發(fā)的什么消息）/// </summary>/// <returns>The data.</returns>/// <param name="message">Message.</param>private byte[] PackageServerData (SocketMessage sm){StringBuilder msg = new StringBuilder ();if (!sm.isLoginMessage) { //消息是login信息msg.AppendFormat ("{0} @ {1}:\r\n ", sm.Client.Name, sm.Time.ToShortTimeString ());msg.Append (sm.Message);} else { //處理普通消息msg.AppendFormat ("{0} login @ {1}", sm.Client.Name, sm.Time.ToShortTimeString ());}byte[] content = null;byte[] temp = Encoding.UTF8.GetBytes (msg.ToString ());if (temp.Length < 126) {content = new byte[temp.Length + 2];content [0] = 0x81;content [1] = (byte)temp.Length;Array.Copy (temp, 0, content, 2, temp.Length);} else if (temp.Length < 0xFFFF) {content = new byte[temp.Length + 4];content [0] = 0x81;content [1] = 126;content [2] = (byte)(temp.Length & 0xFF);content [3] = (byte)(temp.Length >> 8 & 0xFF);Array.Copy (temp, 0, content, 4, temp.Length);} else {// 暫不處理超長內(nèi)容 }return content;} 把發(fā)送給客戶端消息打包處理

如果看不懂我在寫什么，并且對C#版websocket感興趣的同學(xué)需要看一下我上一篇博客了

有圖有真相

看看我們寫的聊天室運(yùn)行效果吧

?服務(wù)器

?客戶端——Byron

客戶端——Casper

源代碼

?源代碼我已經(jīng)上傳到了我的github上，對github不感冒的同學(xué)可以直接點(diǎn)擊這里下載，有興趣的同學(xué)可以下載看看，因為我在Mac+mono+Xamarin Studio上開發(fā)的(忽然感覺自己好極品在Mac上用C#。。。)，所以代碼編碼和Windows可能會有些差距，改成Windows兼容的應(yīng)該就可以直接運(yùn)行了，不過沒在Window下跑過，如果有錯誤還請大家多多指正。

轉(zhuǎn)載于:https://www.cnblogs.com/dolphinX/p/3462898.html

總結(jié)

以上是生活随笔為你收集整理的利用html 5 websocket做个山寨版web聊天室(手写C#服务器)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： speedtest-cli命令行下测试服
下一篇： Id vs Instancetype