使用JS和C#完成websocket双向通讯

写在前面：

微软官方对websocket的直接支持很差，教程也写得不用心。还要用户自己去转字节数组和字符串，太过分了！

毕竟主推SignalR。

本文是在官方教程的基础上，对其进行了一些简单的讲解，和方法提取、封装，以期降低学习难度。

…………

写完这篇文章之后，我挺诧异的：就没人在底层基础上进行封装吗？

翻了一会儿nuget官网，终于找到一个用着比较舒服的包，“jchristn/WatsonWebsocket”。还比较新，网站显示，2023年6月更新过。

至此，释怀了。耐心不好的读者看后面三分之一吧。

 …………

在MDN（Mozilla Developer Network）官网上，有一篇文档，讲了使用“TcpListener”接受websocket请求的写法。感觉这个包，是沿用了这个思路。有兴趣的读者也可以参考尝试。

---

步骤描述：

1、随便建了个普通的mvc项目（任意带控制器的.net项目道理相同，都应该可以）。在Program.cs中，添加websocket支持。见以下代码第24行。

 

namespace WebApplication2
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            // Add services to the container.
            builder.Services.AddControllersWithViews();

            var app = builder.Build();

            // Configure the HTTP request pipeline.
            if (!app.Environment.IsDevelopment())
            {
                app.UseExceptionHandler("/Home/Error");
            }
            app.UseStaticFiles();

            app.UseRouting();

            //启用websocket
            app.UseWebSockets();
            //app.UseAuthorization();

            app.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");

            app.Run();
        }
    }
}

只支持ws或wss请求。

2、控制器代码如下。14行注册路由（即要以类似 ws://xxxx/ws 的方式访问）

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.Net.WebSockets;
using System.Text;
using WebApplication2.Function;

namespace WebApplication2.Controllers
{
    //[Route("api/[controller]")]
    //[ApiController]
    public class WebSocketController : ControllerBase
    {
        //注册路由
        [Route("/ws")]
        public async Task Get()
        {
            //如果是websocket请求
            if (HttpContext.WebSockets.IsWebSocketRequest)
            {
                //获得连接
                using var webSocket = await HttpContext.WebSockets.AcceptWebSocketAsync();
                //处理程序
                await 处理程序(webSocket);
            }
            else
            {
                HttpContext.Response.StatusCode = StatusCodes.Status400BadRequest;
            }
        }

        async Task 处理程序(WebSocket w)
        {
            string s;
            bool f;
            //简单的处理，收消息，修改，发送。
            (f,s)=await WebSocket操作.收(w);
            while(f)
            {
                s = "server:" + s;
                await WebSocket操作.发(w, s);
                (f,s)= await WebSocket操作.收(w);
            }
            await WebSocket操作.关(w);
        }
    }
}

注释都比较清楚，不赘述。

31行开始的处理程序，从设计的角度，不应该出现在控制器里。介意的读者，请自行处理。

WebSocket操作类，见后面。

3、WebSocket操作类：

using System;
using System.Net.WebSockets;
using System.Text;

namespace WebApplication2.Function
{
    //对微软官方示例的简单封装，
    public class WebSocket操作
    {
        //接收消息，bool指示收到的是不是关闭消息，string是收到的内容。
        public static async Task<(bool,string)> 收(WebSocket ws)
        {
            //接收大小最多4k。
            var buffer = new byte[1024 * 4];
            string s;
            //把消息收到字节数组中
            var receiveResult = await ws.ReceiveAsync(
                new ArraySegment<byte>(buffer), CancellationToken.None);
            //如果不是关闭消息
            if (!receiveResult.CloseStatus.HasValue)
            {
                //转换为字符串返回
                s = Encoding.UTF8.GetString(buffer, 0, receiveResult.Count);
                return (true,s);
            }
            else
            {
                s = "无";
                return (false,s);
            }
        }

        //发送消息
        public static async Task 发(WebSocket ws, string s)
        {
            //消息转换成字节数组
            var buffer = Encoding.UTF8.GetBytes(s);
            //发送
            await ws.SendAsync(
                new ArraySegment<byte>(buffer, 0, buffer.Length),
                WebSocketMessageType.Text,
                true,
                CancellationToken.None);
        }
        public static async Task 关(WebSocket ws)
        {
            //官方例子里，status是接收到的关闭类型。这里偷懒，应该也不影响用。
            var status = ws.CloseStatus == null ? WebSocketCloseStatus.Empty :ws.CloseStatus.Value;
            //关闭
            await ws.CloseAsync(
                status,
                ws.CloseStatusDescription,
                CancellationToken.None);
        }
    }
}

 其中17-20，39-44，50-53行的代码，基本来自官方例程。我不求甚解，大家随意。

至此，服务端完成。

---

使用Nuget上的WatsonWebsocket包，构建服务器。

注意：

1、VS需要用管理员权限启动，不然无法启动服务。

2、这个包，是用guid标识用户的。发送消息的时候请注意。

3、构造函数中的false，表示不适用SSL协议。

以下代码，基本上涵盖了它的常用功能。

using System.Text;
using WatsonWebsocket;

namespace ConsoleApp1
{
    internal class Program
    {
        static void Main(string[] args)
        {
            WatsonWsServer server = new WatsonWsServer("192.168.1.104", 8080, false);
            server.ClientConnected += ClientConnected;
            server.ClientDisconnected += ClientDisconnected;
            server.MessageReceived += MessageReceived;
            server.Start();
            Console.WriteLine("server is running...");
            Console .ReadKey();
            server.Stop();

            void ClientConnected(object? sender, ConnectionEventArgs args)
            {
                Console.WriteLine("Client connected: " + args.Client.ToString());
            }

            void ClientDisconnected(object? sender, DisconnectionEventArgs args)
            {
                Console.WriteLine("Client disconnected: " + args.Client.ToString());
            }

            async void MessageReceived(object? sender, MessageReceivedEventArgs args)
            {
                string s = Encoding.UTF8.GetString(args.Data);
                Console.WriteLine("server's clients:" + server.ListClients().Count()+ ": " + s);
                await server.SendAsync(args.Client.Guid,"from server:"+s);
            }
        }
    }
}

 

 

---

 

两个服务端的客户端，都可以完全照搬 使用js和nodejs完成websocket双向通讯 里的web客户端。注意下服务器地址即可。

微软官网服务器运行结果：

 

 含WatsonWebsocket包的服务器运行结果：

  成功，调试通过。