WebSocket和Socket Client连共同Sever端并实现相互通信（C#、JS、C++）

一笑

已于 2022-09-20 09:15:12 修改

阅读量5.3k

点赞数 7

分类专栏： Socket 文章标签： websocket c# 网络协议

于 2022-09-15 18:07:13 首次发布

本文链接：https://blog.csdn.net/yixiao0307/article/details/126874649

版权

Socket 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求

PC端一般使用c++或c# socket收发信息，网页端只能使用websocket，手机端是java socket。需要将PC端、手机端和网页端，多端打通同时实现即时通讯，就是需要websocket和socket相互通信。

构思

实现websocket和socket相互通信，网上可搜到以下两种方式：
1、搭建websocket中转服务，以将websocket client发送过来的消息做转发给socket
2、socket server端也同时实现websocket协议，并可判断出何时是纯socket连接，何时是websocket连接

第一种实现方式逻辑比较复杂，感觉是在脱裤子放屁，第二种用socket实现websocket协议，比较有技术挑战性。说干就干，先需要搞懂以下几个问题：
1、websocket client能否连接socket server？
2、websocket HTTP握手协议如何实现？
3、如何判定是websocket client连的，还是socket client连的？
4、websocket发送的消息如何被socket解析？
5、socket发送的消息如何被websocket解析？
6、如何实现互发信息

问题1探究：用Html创建一个websocket client，然后用C#实现一个socket server

websocket client(javascript)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket</title>
    <script>
        var socket;

        function connect() {
            var host = "ws://127.0.0.1:8503/";
            socket = new WebSocket(host);

            try {
                socket.onopen = function(msg) {
					console.log("socket open");
                }
				
				socket.onmessage = function(msg){
					console.log(msg);
                }

                socket.onclose = function (msg) { 
					console.log("socket close");
                };

            } catch (ex) {
				console.log(ex);
            }
        }
    </script>
</head>
<body>
    <div>websocket Test</div>
    <div>
		<input type="button" value="连接" onclick="connect();">
	</div>
</body>
</html>

在没有搭建任何server的时候，websocket client连接127.0.0.1:8503时，很显然会直接报以下错误
在这里插入图片描述

接下来用C#搭建socket server看会有如何改变。

socket server(C#)
1、创建C#控制台应用(.NET Framework)
在这里插入图片描述

2、编写代码

Socket server = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);
            EndPoint endPoint = new IPEndPoint(IPAddress.Any, 8503);//端口8503
            server.Bind(endPoint);
            server.Listen(1000);

            Socket client = server.Accept();
            Console.WriteLine("有客户端连上来了");

在这里插入图片描述
3、开启C#实现的socket server，再用websocket连接下，server端检测到有客户端连上来了，客户端也没有报错，说明websocket已连到socket server。
但是，正常onopen时会console.log(“socket open”)，却没有显示出来，说明socket server还没有实现HTTP握手。

在这里插入图片描述

问题2探究：WebSocket HTTP握手如何实现

WebSocket为保证对客户端进行身份验证需要HTTP握手，借此服务器可以使用通用HTTP服务器可用的任何客户端身份验证机制，例如cookie，HTTP身份验证或TLS身份验证等，握手步骤如下：
1、client连接server ip:port
2、client发送握手header信息（websocket原机制，无需自行编写）
3、server接收握手信息

//接收客户端发来的消息
byte[] bytes = new byte[1024];
int len = client.Receive(bytes);
string strMessage = Encoding.UTF8.GetString(bytes, 0, len);
Console.WriteLine(strMessage);

4、获取客户端传过来的Sec-WebSocket-Key

GET / HTTP/1.1
Host: 127.0.0.1:8503
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Upgrade: websocket
Origin: null
Sec-WebSocket-Version: 13
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,zh-TW;q=0.7
Sec-WebSocket-Key: 66tW1x+Bl3kcAxt8qtJWbw==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits

//获取Sec-WebSocket-Key
string[] strings = strMessage1.Split('\n');
string strSecWebSocketKey = "";
foreach (var item in strings)
{
	string[] strings1 = item.Split(':');
	if (strings1[0] == "Sec-WebSocket-Key")
	{
		strSecWebSocketKey = strings1[1].Trim();
	}
}

5、生成服务端Sec-WebSocket-Accept

//生成服务端Sec-WebSocket-Accept
byte[] secKeyBytes = SHA1.Create().ComputeHash(Encoding.ASCII.GetBytes(strSecWebSocketKey + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"));
string secKey = Convert.ToBase64String(secKeyBytes);

6、生成server header信息并发送

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

string strHeader = "";
strHeader += "HTTP/1.1 101 Switching Protocols" + Environment.NewLine;
strHeader += "Upgrade: websocket" + Environment.NewLine;
strHeader += "Connection: Upgrade" + Environment.NewLine;
strHeader += "Sec-WebSocket-Accept: " + secKey + Environment.NewLine + Environment.NewLine;
client.Send(Encoding.UTF8.GetBytes(strHeader));

补充以上代码后，再次执行连接，已经显示可正常连接
在这里插入图片描述
至此，已使用c# socket实现了可接受websocket连接的server。

问题3探究：如何判定是websocket client连的，还是socket client连的？

分析websocket client传过来的http header中包含“Upgrade: websocket”，只需要在socket server端，检测到客户端连上来之后，马上接收一次信息，并判断本次接收到的信息是否包含websocket就可以了。
在这里插入图片描述
但是注意，未来正常的socket client，也需要发送一次自制握手信息（信息随意即可，但记得不要包含websocket，主要是配合websocket，将第一次接收消息的动作作为客户端/服务端交互的标准），如：

SOCKET
User-Code: Liupeng
Pass-Word: 123456
Other: test

写段代码判断下

//判断是否websocket client在访问
if(strMessage1.IndexOf("websocket") >= 0)
{
	//获取Sec-WebSocket-Key
	//生成服务端Sec-WebSocket-Accept
	//发送握手信息给客户端
}
else
{
	//实现点自己想干的~
	//发送握手信息给客户端
}

问题4、5探究：websocket发送的消息如何被socket解析？/ socket发送的消息如何被websocket解析？

1、web页面增加发送消息代码

//...
function send(){
	var msg = "hello world!";
	if(!window.WebSocket)
		return;
					
	if(socket.readyState == WebSocket.OPEN){
		socket.send(msg);
		console.log(msg);
	}
}
//...
<input type="button" value="发消息" onclick="send();">

2、C# socket server端补充代码

//...
while (true)
{
	//接收客户端发来的消息
	byte[] bytes2 = new byte[1024];
	int len2 = client.Receive(bytes2);
	string strMessage2 = Encoding.UTF8.GetString(bytes2, 0, len2);
	Console.WriteLine("客户端发来消息：{0}", strMessage2);
}
//...

在这里插入图片描述
3、消息可以正常被接收，但会是乱码

需做个转换

/// <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;
        }

问题6探究：如何实现互发信息

思路：
1、websocket和socket都连接到c# socket server
2、c# socket server记录每个客户端到list中，并区分websocket和socket
3、无论websocket或socket发送的消息，都自动转发给所有客户端
4、因为服务端检测客户端连接和每客户端接收消息，必须互不影响，所以需要多线程

this.thread = new Thread(Listen);
this.thread.Start();

实现效果如下
在这里插入图片描述

实现代码

下载地址：https://download.csdn.net/download/yixiao0307/86560807

1、VC++ 2019 MFC socket实现简单单线程消息发送
https://blog.csdn.net/yixiao0307/article/details/119837355?spm=1001.2014.3001.5501

2、C#写个websocket服务端，分别供c++做的websocket客户端和JS做的客户端调用，一同实现简单实时聊天
https://blog.csdn.net/yixiao0307/article/details/121415523?spm=1001.2014.3001.5501

一笑

关注

7
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
3
评论
WebSocket和Socket Client连共同Sever端并实现相互通信（C#、JS、C++）

分析websocket client传过来的http header中包含“Upgrade: websocket”，只需要在socket server端，检测到客户端连上来之后，马上接收一次信息，并判断本次接收到的信息是否包含websocket就可以了。3、开启C#实现的socket server，再用websocket连接下，server端检测到有客户端连上来了，客户端也没有报错，说明websocket已连到socket server。
复制链接

扫一扫