基于asp.netCoreWebApi的webSocket通信示例(net6)

背景：

    在阿里云服务器中搭建了常规的tcp server服务（基于.net framework 4.0）。用以实现远程控制家里的鱼缸灯，办公室的电脑开关机等功能。客户端采用PC桌面端和微信小程序端。

    服务端：tcp server(基于.net framework 4.0)

    客户端：PC桌面端软件(.net winform)、微信小程序

    问题：

   微信小程序端支持websocket通信而且必须是wss（wss表示在TLS之上的websocket，相当于https），无法与tcp server直接通信。

    为什么不重新开发服务端呢？

    一是我懒。

    二是服务端TCP Server必须时刻保持与家里的鱼缸灯控制器，办公室的开关机控制器等设备的网络连接。而且还设定了定时执行的策略，故不适宜更换其他技术实现。

   解决方法：

   微信小程序的后端采用了asp.net web api （net6）搭建的接口服务。如果可以在该web api 接口服务中搭建websocket服务，中转微信小程序和tcp server服务端，同时升级TCP Server，使之同时支持tcp client连接和websocket连接，问题可得到解决。

 

开干！

    一、新建ASP.NET Core Web API  项目（net6）

    基于net 6.0

    二、创建websocket中间件WebsocketHandler

    新建类，名为：WebsocketHandler

    在接收到websocket连接时，将触发Invoke函数。

    关键代码：    

 WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
                    _logger.LogInformation($"接收到websocket连接.");
                    try
                    {
                        WebSocketReceiveResult result;
                        do
                        {
                            var buffer = new byte[1024 * 1];
                            result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
                            if (result.MessageType == WebSocketMessageType.Text && !result.CloseStatus.HasValue)
                            {
                                var msgString = Encoding.UTF8.GetString(buffer);
                                _logger.LogInformation($"接收到数据：{msgString}.");

                                //发送接收到的信息
                                await webSocket.SendAsync(new ArraySegment<byte>(buffer, 0, buffer.Length), WebSocketMessageType.Text, true, CancellationToken.None);
                            }
                        }
                        while (!result.CloseStatus.HasValue);
                    }
                    catch (Exception ex)
                    {
                        
                    }

    AcceptWebSocketAsync函数接收websocket连接，并把连接保存于变量webSocket。

    定义变量WebSocketReceiveResult result用来接收客户端发送的数据，webSocket.ReceiveAsync函数接收数据。

    webSocket.SendAsync函数实现向客户端发送数据的功能。

    可以看到，为了测试发送和接收的功能，服务端将接收到的数据直接返回给客户端

    三、添加中间件

    在Program中添加此中间件：

app.UseWebSockets();
app.UseMiddleware<WebsocketHandler>();

    至此，服务端已建好。

    四、运行服务端

    Ctrl+F5,运行服务端，可看到，监听端口为：5276    

    五、创建客户端：测试.html

    创建静态页面：webSocketClient.html，作为客户端，该客户端将实现向服务端发送消息，并接收服务端的消息。

    使用原生javascript实现，不依赖其他js库。

    关键函数：

    创建websocket：new WebSocket(server + '/ws');

    websocket打开成功事件：WEB_SOCKET.onopen

    websocket接收消息事件：WEB_SOCKET.onmessage

    websocket关闭事件：WEB_SOCKET.onclose

    

<button type="button" onclick="javascript:connectWebSocket()">测试</button>

    界面上放置一个按钮，触发websocket。

    六、测试成功

    双击在浏览器中打开webSocketClient.html，同时按F12打开调试器。点击“测试”按钮，观察控制台面板，可看到websocket接收到来自服务器的消息“hello world”

    

    而服务端面板：显示接收到websocket连接并接收到消息“hello world"

    

    

我已将代码上传，下载码是：C67F979907

    下载码是啥？如何下载=》点击查看