.Net Core WebSocket 服务端与客户端完整示例

.Net Core WebSocket 服务端与客户端完整示例

websocket 由名知意，就是web端支持的socket通讯服务，其实，从本质来讲，也就是socket服务。

所以，如果让Web端支持了socket长连接，那效率必然是杠杠的，通讯延迟是最低的，才能支持那些通讯级，实时性的需求。

而且虽然，它是web端的通讯技术，但是，在实际业务应用中，却用到了各个方面，据我所知就有，web端，winform,wpf 客户端，手机app端，node.js 后端和前端，物联网终端与服务端，以及最出名的 谷歌游览器的 DevTools 协议服务端，都是基于 websocket来的。

可见，光websocket本身就已经应用到了足够广泛的范围了。

基于此，我针对我所接触的业务以及，对websocket的深度了解做一些案例。也让自己深入一下。

webSocket 服务端

为啥先说服务端，因为服务端，确实不容易搞，虽然已经有 SignalR 这样的技术，但是，你要学习某个知识点的时候，杂乱的信息会影响你的效率的，所以，可以单刀直入，就搞websocket。

websocket的服务端，除了我已知的

1. RRQMSocket.WebSocket
2. WebSocketSharp
3. SuperSocket.WebSocket

等等吧

但是，在使用过程中，我个人还是偏向于直接微软的一套就OK，别整那么多乌黑麻黑的，有bug，又得调半天。还得考虑支持https(wss)的问题。

当然，我自己也尝试实现websocketServer，但是，在用的过程中，也会发现一些问题，比如，不能直接作为生产环境的方案等等。

websocket 微软自带服务端

找了半天资料，我还是用微软自己带的，其实微软自己带的，很容易使用，就是吧，不是单独的，依靠于原有的http引擎服务上。

总得来说，也挺好用。

webSocket 服务端 控制器版

控制器版，其实就是mvc版，或者 webapi版

新建项目

即可
项目如下所示:

Startup -> Configure

新增

app.UseWebSockets(new WebSocketOptions
{
        KeepAliveInterval = TimeSpan.FromMinutes(2)
});
1
2
3
4

第一，是为了增加websocket服务的支持，第二，是为了增加通讯的超时设置，还是很实用的。

HomeController

在其默认 主控制器中，添加 如下

[HttpGet("/ws")]
public async Task WebSocketServer()
{
    if (HttpContext.WebSockets.IsWebSocketRequest)
    {
        try
        {
            var socket = await HttpContext.WebSockets.AcceptWebSocketAsync();
            await new WebSocketHelper().WebSocketReceive(socket);
        }
        catch (Exception)
        {
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

就实现了websocket 服务。

具体逻辑，下边有。

框架是这样的框架。

webSocket 服务端 中间件版

中间件版呢，相当于与跟mvc和webapi一样，都是同级的中间件处理逻辑了。

所以，可以不选择mvc和webapi，单独只有websocket。

具体，有兴趣的可以试试。

默认新建一个跟上边一样的项目

大概如下:

Startup -> Configure

新增 跟上边那个一样

app.UseWebSockets(new WebSocketOptions
{
        KeepAliveInterval = TimeSpan.FromMinutes(2)
});
1
2
3
4

另外就是新增了一个中间件服务，

app.UseMiddleware<WebSocketMiddleware>();
1

这个服务是自己写的中间件，代码下边的逻辑会说明

webSocket 服务端 服务通讯逻辑

第一个逻辑就是服务端与客户端的通讯逻辑，我放在了WebSocketHelper里

WebSocketHelper:

    public class WebSocketHelper
    {
        public async Task WebSocketReceive(WebSocket webSocket)
        {
            var id = Guid.NewGuid().ToString("N");
            var buffer = ArrayPool<byte>.Shared.Rent(1024);
            try
            {
                while (webSocket.State == WebSocketState.Open)
                {
                    var result = await webSocket.ReceiveAsync(buffer, CancellationToken.None);
                    if (result.MessageType == WebSocketMessageType.Close)
                    {
                        throw new WebSocketException(WebSocketError.ConnectionClosedPrematurely, result.CloseStatusDescription);
                    }
                    var text = Encoding.UTF8.GetString(buffer.AsSpan(0, result.Count));
                    var sendStr = Encoding.UTF8.GetBytes($"服务端 {id} : {text}  -{DateTime.Now}");
                    await webSocket.SendAsync(sendStr, WebSocketMessageType.Text, true, CancellationToken.None);
                }
            }
            finally
            {
                ArrayPool<byte>.Shared.Return(buffer);
            }
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

另外一个就是中间件服务逻辑

    /// <summary>
    /// webSocket
    /// </summary>
    public class WebSocketMiddleware
    {
        private readonly RequestDelegate _next;
        /// <summary>
        /// 构造
        /// </summary>
        /// <param name="next"></param>
        /// <param name="actionPathName">目标路径</param>
        public WebSocketMiddleware(RequestDelegate next)
        {
            _next = next;
        }
        /// <summary>
        /// 中间件调用
        /// </summary>
        /// <param name="httpContext"></param>
        /// <returns></returns>
        public async Task Invoke(HttpContext httpContext)
        {
            try
            {
                var socket = await httpContext.WebSockets.AcceptWebSocketAsync();
                await new WebSocketHelper().WebSocketReceive(socket);
            }
            catch (Exception)
            {
            }
            await _next(httpContext);
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

webSocket web客户端

最简单的示例就是 web客户端。

web客户端代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    蓝创精英团队 webSocket Server demo
    <div id="message" style="border: solid 1px #333; padding: 4px; width: 550px; overflow: auto; background-color: #404040; height: 300px; margin-bottom: 8px; font-size: 14px;">
    </div>
    <input id="text" type="text" onkeypress="enter(event);" style="width: 340px" />
    &nbsp;&nbsp;
    <button id="send" onclick="send();">发送</button>
    <button onclick="quit();">停止</button>
</body>
</html>
<script type="text/javascript">
    var ws;
    var msgContainer = document.getElementById('message');
    var text = document.getElementById('text');
    window.onload = function () {
        ws = new WebSocket("ws://localhost:5000/ws");
        ws.onopen = function (e) {
            var msg = document.createElement('div');
            msg.style.color = '#0f0';
            msg.innerHTML = "Server > connection open.";
            msgContainer.appendChild(msg);
        };
        ws.onmessage = function (e) {
            var msg = document.createElement('div');
            msg.style.color = '#0f0';
            msg.innerHTML = e.data;
            msgContainer.appendChild(msg);
            msgContainer.scrollTop = msgContainer.scrollHeight;
        };
        ws.onerror = 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.';
            msgContainer.appendChild(msg);
            ws = null;
        };
    }
    function quit() {
        if (ws) {
            ws.close();
            var msg = document.createElement('div');
            msg.style.color = '#0f0';
            msg.innerHTML = 'Server >start closed.';
            msgContainer.appendChild(msg);
            ws = null;
        }
    }
    function send() {
        ws.send(text.value);
        var htmlValue = "客户端: " + text.value + "  " + getNowTime();
        var msg = document.createElement('div');
        msg.style.color = '#ffff00';
        msg.innerHTML = htmlValue;
        msgContainer.appendChild(msg);
        text.value = "";
        msgContainer.scrollTop = msgContainer.scrollHeight;
    }
    function enter(event) {
        if (event.keyCode == 13) {
            send();
        }
    }
    //获取当前时间
    function getNowTime() {
        var date = new Date();
        //年 getFullYear()：四位数字返回年份
        var year = date.getFullYear(); //getFullYear()代替getYear()
        //月 getMonth()：0 ~ 11
        var month = date.getMonth() + 1;
        //日 getDate()：(1 ~ 31)
        var day = date.getDate();
        //时 getHours()：(0 ~ 23)
        var hour = date.getHours();
        //分 getMinutes()： (0 ~ 59)
        var minute = date.getMinutes();
        //秒 getSeconds()：(0 ~ 59)
        var second = date.getSeconds();
        var time = year + '/' + addZero(month) + '/' + addZero(day) + ' ' + addZero(hour) + ':' + addZero(minute) + ':' + addZero(second);
        return time;
    }
    //小于10的拼接上0字符串
    function addZero(s) {
        return s < 10 ? ('0' + s) : s;
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

这代码里也有一些小细节，注意到的朋友就是学到呦！

控制器方式示例

因为是控制器，所以，地址应该是: ws://localhost:5000/ws，得到最后的ws控制器上才能被指定的action处理。

可以看到，通讯自己有自己的会话ID，说明效果还是很明显的。

中间件方式示例

中间件方式的话，可以通过httpcontext来判断它自己的地址，但是，我这个案例，其实地址只要访问的是websocket协议，就都会被拦截进来进行处理。
所以，默认地址可以是： ws://localhost:5000

处理方式结果如下:

也是同样的逻辑，自然，同样的结果。

webSocket 控制台客户端

客户端的话，其实可选择的库就很多了。我这边默认选择微软的 ClientWebSocket 类库。
属于asp.net core 自带。

Program:

    class Program
    {
        static async Task Main(string[] args)
        {
            Console.Title = "WebSocket Client Demo 蓝总创精英团队!";
            var webSocket = await CreateAsync("ws://localhost:5000/ws");
            if (webSocket != null)
            {
                Console.WriteLine("服务开始执行!");
                _ = Task.Run(async () =>
                {
                    var buffer = ArrayPool<byte>.Shared.Rent(1024);
                    try
                    {
                        while (webSocket.State == WebSocketState.Open)
                        {
                            var result = await webSocket.ReceiveAsync(buffer, CancellationToken.None);
                            if (result.MessageType == WebSocketMessageType.Close)
                            {
                                throw new WebSocketException(WebSocketError.ConnectionClosedPrematurely, result.CloseStatusDescription);
                            }
                            var text = Encoding.UTF8.GetString(buffer.AsSpan(0, result.Count));
                            Console.WriteLine(text);
                        }
                    }
                    finally
                    {
                        ArrayPool<byte>.Shared.Return(buffer);
                    }
                });
                Console.WriteLine("开始输入：");
                var text = string.Empty;
                while (text != "exit")
                {;
                    text = Console.ReadLine();
                    var sendStr = Encoding.UTF8.GetBytes(text);
                    await webSocket.SendAsync(sendStr, WebSocketMessageType.Text, true, CancellationToken.None);
                }
            }
            else
            {
                Console.WriteLine("服务连接失败!");
            }
            Console.WriteLine("服务执行完毕!");
            Console.ReadLine();
        }
        /// <summary>
        /// 创建客户端实例
        /// </summary>
        /// <param name="cancellationToken"></param>
        /// <returns></returns>
        public static async Task<ClientWebSocket> CreateAsync(string ServerUri)
        {
            var webSocket = new ClientWebSocket();
            webSocket.Options.RemoteCertificateValidationCallback = delegate { return true; };

            await webSocket.ConnectAsync(new Uri(ServerUri), CancellationToken.None);
            if (webSocket.State == WebSocketState.Open)
            {
                return webSocket;
            }
            return null;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

示例

它运行的前提下，是前面的任意一个服务端运行。

最简单的方式，可以像我这样，直接到服务的bin目录下找exe服务，直接双击，也是可以的。

高级点的，就启动服务，然后，在 客户端项目上右键，启动新实例即可。

这个时候，我们任意输入信息，并回车，可以发现，跟html客户端显示的是一样的。

结束

至此，一整套 websocket的服务端，以及相应的客户端案例，都展现了一遍，立马就能入手啊。
走过，路过不能错过。

代码地址

https://github.com/kesshei/WebSocketServerDemo.git

https://gitee.com/kesshei/WebSocketServerDemo.git