html5 的 webScoket 和 C# 建立Socket连接
2024-06-11 12:48:40
最近使用的web项目中，需要服务器直接触发前端显示效果。
所以研究了一下websocket:
名词解释：
WebSocket
WebSocket协议是一种双向通信协议，它建立在TCP之上，同http一样通过TCP来传输数据，但是它和http最大的不同有两点：
1.WebSocket是一种双向通信协议，在建立连接后，WebSocket服务器和Browser/UA都能主动的向对方发送或接收数据，就像Socket一样，不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议；
2.WebSocket需要通过握手连接，类似于TCP它也需要客户端和服务器端进行握手连接，连接成功后才能相互通信。
当Web应用程序调用new WebSocket(url)接口时，Browser就开始了与地址为url的WebServer建立握手连接的过程。
客户端向服务器发送请求：
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key:dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat,superchat
Sec-WebSocket-Version: 13
服务器端返回内容:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=
请求中的【Sec-WebSocket-Key】是随机发送的。而服务器返回的【Sec-WebSocket-Accept】是将【Sec-WebSocket-Key】加上一个固定字符串【258EAFA5-E914-47DA-95CA-C5AB0DC85B11】，并使用SHA-1加密后，再进行BASE-64编码生成的。
一个简单的DEMO:
前端页面:
<!DOCTYPE html>
<html>
<head><title>Web Socket Client</title>
</head>
<body style="padding:10px;"><h1>聊天室</h1><div style="margin:5px 0px;">Address:<div><input id="address" type="text" value="ws://127.0.0.1:1818" style="width:400px;" /></div></div><div style="margin:5px 0px;">Name:<div><input id="name" type="text" value="Byron" style="width:400px;" /></div></div><div><button id="connect" οnclick="connect();">connect server</button> <button id="disconnect" οnclick="quit();">disconnect</button> <button id="clear" οnclick="clearMsg();">clear</button></div><h5 style="margin:4px 0px;">Message:</h5><div id="message" style="border:solid 1px #333; padding:4px; width:400px; overflow:auto;background-color:#404040; height:300px; margin-bottom:8px; font-size:14px;"></div><input id="text" type="text" οnkeypress="enter(event);" style="width:340px" /> <button id="send" οnclick="send();">send</button><script type="text/javascript">var name=document.getElementById('name').value;var msgContainer=document.getElementById('message');var text=document.getElementById('text');function connect () {var address=document.getElementById('address').value;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.onmessage=function(e){var msg=document.createElement('div');msg.style.color='#fff';msg.innerHTML=e.data;msgContainer.appendChild(msg);};ws.οnerrοr=function(e){var msg=document.createElement('div');msg.style.color='#0f0';msg.innerHTML='Server > '+e.data;msgContainer.appendChild(msg);};ws.onclose=function(e){var msg=document.createElement('div');msg.style.color='#0f0';msg.innerHTML="Server > connection closed by server.";msgContainer.appendChild(msg);};text.focus();}function quit(){if(ws){ws.close();var msg=document.createElement('div');msg.style.color='#0f0';msg.innerHTML='Server > connection closed.';msgContainer.appendChild(msg);ws=null;}}function send(){ws.send(text.value);setTimeout(function(){msgContainer.scrollTop=msgContainer.getBoundingClientRect().height;},100);text.value='';text.focus();}function clearMsg(){msgContainer.innerHTML="";}function enter(event){if(event.keyCode==13){send();}}</script>
</body>
</html>后台代码（C#):
class Program{private static Socket listener;private static Hashtable ht;static void Main(string[] args){int port = 1818;//监听端口为1818端口ht = new Hashtable();//用于存放客户端的连接socketbyte[] buffer = new byte[1024];var localEP = new IPEndPoint(IPAddress.Any, port);listener = new Socket(localEP.Address.AddressFamily, SocketType.Stream, ProtocolType.Tcp);try{listener.Bind(localEP);listener.Listen(10);Console.WriteLine("等待客户端连接....");while (true){Socket clientSocket = listener.Accept(); //接收到客户端的连接 var th = new Thread(new ParameterizedThreadStart(Receive));th.Start(clientSocket);}}catch (Exception e){Console.WriteLine(e.ToString());}}/// <summary>/// 线程调用/// </summary>private static void Receive(object o)//Socket clientSocket){Socket clientSocket = (Socket)o;clientSocket.Blocking = true;IPEndPoint clientipe = (IPEndPoint)clientSocket.RemoteEndPoint;// Console.WriteLine("[" + clientipe.Address.ToString() + "] Connected");var key = string.Format("{0}-X-Q-X-{1}", clientipe.Address.ToString(), clientipe.Port);if (!ht.ContainsKey(key)){//将ip地址设置为hashTable的key值 若hashTable中存在该ip地址则不再ht中添加socket以免发送重复数据ht.Add(key, clientSocket);}Console.WriteLine("接收到了客户端：ip" + clientSocket.RemoteEndPoint.ToString() + "的连接");byte[] buffer = new byte[1024];int length = clientSocket.Receive(buffer);clientSocket.Send(PackHandShakeData(GetSecKeyAccetp(buffer, length)));Console.WriteLine("已经发送握手协议了....");//接收用户姓名信息length = clientSocket.Receive(buffer);string xm = AnalyticData(buffer, length);clientSocket.Send(PackData("连接时间：" + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")));try{while (true){var errLs = new List<object>();//接受客户端数据Console.WriteLine("等待客户端数据....");try{length = clientSocket.Receive(buffer);//接受客户端信息}catch (SocketException e){//去除字典Console.WriteLine(e.Message);try{foreach (DictionaryEntry de in ht){if (de.Value == clientSocket){ht.Remove(de.Key);}}}catch (Exception ex){Console.WriteLine(ex.Message);}}string clientMsg = AnalyticData(buffer, length);Console.WriteLine("接受到客户端数据：" + clientMsg);//发送数据string sendMsg = "" + clientMsg;Console.WriteLine("发送数据：“" + sendMsg + "” 至客户端....");//遍历hashTable中的数据获取Socket发送数据foreach (DictionaryEntry de in ht){try{var sc = (Socket)de.Value;sc.Send(PackData(clientSocket.RemoteEndPoint.ToString() + xm + "说：" + sendMsg));}catch (Exception e){Console.WriteLine("Num:{0} err:{1}", ht.Count, e);errLs.Add(de.Key);}}if (errLs != null && errLs.Any()){foreach (var item in errLs){ht.Remove(item);}}Thread.Sleep(1000);}}catch (SocketException e){//去除字典Console.WriteLine(e.Message);}catch (System.ObjectDisposedException e){//去除字典Console.WriteLine(e.Message);}catch (Exception e){Console.WriteLine(e.Message);}}/// <summary>/// 打包握手信息/// </summary>/// <param name="secKeyAccept">Sec-WebSocket-Accept</param>/// <returns>数据包</returns>private static byte[] PackHandShakeData(string secKeyAccept){var responseBuilder = new StringBuilder();responseBuilder.Append("HTTP/1.1 101 Switching Protocols" + Environment.NewLine);responseBuilder.Append("Upgrade: websocket" + Environment.NewLine);responseBuilder.Append("Connection: Upgrade" + Environment.NewLine);responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine + Environment.NewLine);//如果把上一行换成下面两行，才是thewebsocketprotocol-17协议，但居然握手不成功，目前仍没弄明白！//responseBuilder.Append("Sec-WebSocket-Accept: " + secKeyAccept + Environment.NewLine);//responseBuilder.Append("Sec-WebSocket-Protocol: chat" + Environment.NewLine);return Encoding.UTF8.GetBytes(responseBuilder.ToString());}/// <summary>/// 生成Sec-WebSocket-Accept/// </summary>/// <param name="handShakeText">客户端握手信息</param>/// <returns>Sec-WebSocket-Accept</returns>private static string GetSecKeyAccetp(byte[] handShakeBytes, int bytesLength){string handShakeText = Encoding.UTF8.GetString(handShakeBytes, 0, bytesLength);string key = string.Empty;Regex r = new Regex(@"Sec\-WebSocket\-Key:(.*?)\r\n");Match m = r.Match(handShakeText);if (m.Groups.Count != 0){key = Regex.Replace(m.Value, @"Sec\-WebSocket\-Key:(.*?)\r\n", "$1").Trim();}byte[] encryptionString = SHA1.Create().ComputeHash(Encoding.ASCII.GetBytes(key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"));return Convert.ToBase64String(encryptionString);}/// <summary>/// 解析客户端数据包/// </summary>/// <param name="recBytes">服务器接收的数据包</param>/// <param name="recByteLength">有效数据长度</param>/// <returns></returns>private static string AnalyticData(byte[] recBytes, int recByteLength){if (recByteLength < 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; // 数据长度 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);}/// <summary>/// 打包服务器数据/// </summary>/// <param name="message">数据</param>/// <returns>数据包</returns>private static byte[] PackData(string message){byte[] contentBytes = null;byte[] temp = Encoding.UTF8.GetBytes(message);if (temp.Length < 126){contentBytes = new byte[temp.Length + 2];contentBytes[0] = 0x81;contentBytes[1] = (byte)temp.Length;Array.Copy(temp, 0, contentBytes, 2, temp.Length);}else if (temp.Length < 0xFFFF){contentBytes = new byte[temp.Length + 4];contentBytes[0] = 0x81;contentBytes[1] = 126;contentBytes[2] = (byte)(temp.Length & 0xFF);contentBytes[3] = (byte)(temp.Length >> 8 & 0xFF);Array.Copy(temp, 0, contentBytes, 4, temp.Length);}else{// 暂不处理超长内容 }return contentBytes;}}运行效果：
本文引用：http://xqblog.top/Article.aspx?id=ART2018080900001
转载于:https://www.cnblogs.com/xqaizx/p/9446863.html
html5 的 webScoket 和 C# 建立Socket连接相关推荐
- android studio socket 失败,Android应用开发Android Studio建立Socket连接失败解决方法
本文将带你了解Android应用开发Android Studio建立Socket连接失败解决方法,希望本文对大家学Android有所帮助. < Android Studio建立Socket连接失 ...
- corefx 源码学习：SqlClient 是如何同步建立 Socket 连接的
在昨天的技术周会上发现 EnyimMemcached 中建立 Socket 连接的代码有问题,今天坐车的时候在手机上阅读 .net core 2.2 的 SqlClient 中同步建立 Socket ...
- C# 建立Socket连接 持续发送屏幕截图
写的一个demo,建立Socket连接之后,循环发送电脑屏幕截图 服务器端开启之后监听端口号2000,为新建连接创建新的Socket.之后从客户端接收截图,判断一张图片接收结束之后.将图片显示于pic ...
- socket.io-client源码分析——建立socket连接
介绍 socket.io是一种用于服务端和客户端的双向通信的js库,提供了长轮询和websocket这两种实现方式socket.io-client是其在客户端的实现.socket.io-client通 ...
- MTK: mtk 10A 建立socket连接问题
//============================================================================ 1.srv_dtcnt_get_acc_i ...
- Android客户端 和 pc服务器 建立socket连接并发送数据
服务器使用java代码 1.服务端需要创建一个ServerSocket(port) 2.port(端口) 地址范围在0~65535请使用1024以上的端口,尽量偏大使用,否则可能和你主机上的其他应用程 ...
- Android 通过局域网udp广播自动建立socket连接
Android开发中经常会用到socket通讯.由于项目需要,最近研究了一下这方面的知识. 需求是想通过wifi实现android移动设备和android平台的电视之间的文件传输与控制. 毫无疑问这中 ...
- html5 长链接,Vue通过WebSocket建立长连接，连接
Vue通过WebSocket建立长连接,连接 使用场景: 在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理 ...
- Http和Socket连接区别(ZT)
1.TCP连接 要想明白Socket连接,先要明白TCP连接.手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上 ...
- iOS端Socket连接、发送数据（一）
一.Socket的应用 IM即时通讯是通过Socket的方式实现长连接,可运用于 (1)直播聊天室.礼物 (2)微信.QQ等即时聊天 (3)游戏对话.技能等 二.SOCKET原理 套接字(socket ...
最新文章
- websphere变成英文了
- AngularJS学习笔记二:AngularJS指令
- mysql distinct、group_concat
- TensorFlow2-神经网络训练
- SAP Fiori UI上关于时区Timezone的一些问题和解决方案
- 倒计时小工具_送你3个倒数计日的小程序，让你不再遗忘重要事
- APP、智能设备、平台账号等信息系统，实现无密码登录的可行性方案。
- Spring : SpringBoot的ApplicationRunner和CommandLineRunner
- python 计算数字位数_Python 统计位数为偶数的数字的代码
- Activity与Fragment生命周期
- nginx linux 部署web项目名,Linux部署web项目配置Nginx
- 使用 PyQT5 来做一个简易版库存管理系统（二）
- web网页播放音频文件
- TOGAF认证考试总结
- 杜绝焦虑，如何提高执行力改变生活？
- 网络应用自建利器-Google AppEngine
- python之WeChat撩妹神奇
- BlenderGIS 使用总结
- Vista上StarForce驱动的卸载
- Android 优化之 纹理