本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：WebSocket协议支持客户端和服务器间持久化连接及全双工通信，特别适合实时应用。.NET环境中的ASP.NET Core框架提供了实现WebSocket服务端的功能，包括创建控制器或中间件来管理连接、接收和发送消息。HTML前端使用JavaScript的WebSocket API与服务端交云。本实践展示了如何在.NET环境搭建WebSocket服务端，并通过HTML前端实现与服务端的双向通信。了解如何处理连接、数据传输、以及考虑安全性和异常处理等实际开发中的要点。 WebSocket服务端（.net）+html（前端）

1. WebSocket协议概述

1.1 协议的起源和重要性

WebSocket协议是一种在单个TCP连接上进行全双工通信的协议。其起源可以追溯到HTML5标准的制定，旨在解决HTTP协议在实时通信方面的局限性。WebSocket因其能够提供低延迟、双向的通信通道而变得至关重要，特别适用于需要实时数据交互的应用，如在线游戏、聊天应用和实时监控系统。

1.2 WebSocket与HTTP的对比

WebSocket与传统的HTTP通信方式在多个方面有明显不同。HTTP是一种无状态的请求-响应模型，通常以短连接的方式运行，而WebSocket则支持长连接，允许服务器和客户端之间持续的双向通信。在性能方面，WebSocket减少了重复的HTTP头部开销，并能以较低的延迟进行频繁的数据交换。这意味着WebSocket可以提供更高效和更快的实时通信体验。

2. .NET中WebSocket服务端实现

2.1 WebSocket协议基础

2.1.1 协议的起源和重要性

WebSocket是一种网络通信协议，它提供了一种在单个TCP连接上进行全双工通信的方式。这种协议的起源可以追溯到Web应用需要实时双向通信的需求，比如在线聊天、实时游戏和协作工具等。WebSocket的出现，解决了传统HTTP长轮询或iframe流等技术在实时性方面的不足，通过一个持久化的连接减少了资源消耗，并实现了更快的消息传输。

WebSocket的重要性在于它为Web应用提供了一种更为高效、低延迟的实时通信手段。与传统HTTP请求-响应模型不同，WebSocket允许服务器和客户端之间进行双向通信，不需要额外的HTTP请求。这种特性使得WebSocket特别适用于需要实时数据交换的场景。

2.1.2 WebSocket与HTTP的对比

在对比WebSocket与HTTP时，我们不难发现二者在设计目标、使用场景以及通信方式上的根本不同。HTTP是一种无状态的请求-响应协议，适用于处理短连接请求，比如网页的加载和表单提交。而WebSocket支持长时间的连接，并能在客户端和服务器之间进行全双工通信，这意味着任何一方都可以在任何时间主动发送消息。

在性能方面，WebSocket通常优于HTTP长轮询，因为它避免了HTTP轮询过程中必须建立和关闭连接的开销。尽管如此，HTTP协议在无状态和幂等性方面有着严格的保证，这在某些应用场景下可能是更加重要的。

2.2 .NET中的WebSocket支持

2.2.1 .NET环境准备

在.NET环境中使用WebSocket，需要确保我们操作的环境已经准备就绪。对于ASP.NET Core项目，WebSocket支持是在.NET Core 2.1版本中引入的。如果你正在使用.NET Framework，那么需要至少.NET Framework 4.5.2版本才能使用WebSocket API。开发者可以通过NuGet包管理器安装必要的包，如 Microsoft.AspNetCore.WebSockets ，来添加WebSocket支持。

为了在.NET Core环境中启用WebSocket支持，通常需要进行一系列配置，包括在服务启动配置中注册WebSocket服务，以及在中间件管道中加入WebSocket处理逻辑。

2.2.2 WebSocket类库和命名空间

.NET Core提供了丰富的WebSocket类库，这些类库位于 System.Net.WebSockets 命名空间下。主要的类包括 WebSocket ，它提供了用于处理WebSocket通信的核心功能，例如连接、发送和接收消息。另外还有 WebSocketReceiveResult ，它用于表示一次接收操作的结果。此外， WebSocketHandler 类和 WebSocketOptions 类则用于配置和处理WebSocket连接。

开发者在编写WebSocket服务端代码时，通常会依赖这些类库提供的功能。例如，在接收消息时， WebSocketReceiveResult 会告诉开发者接收到的数据类型和字节长度，这对于编写正确的消息解析逻辑至关重要。

在接下来的章节中，我们将深入探讨.NET中的WebSocket类库的使用，并展示如何在ASP.NET Core中创建WebSocket服务端程序。我们将一步步地搭建一个服务端WebSocket应用，覆盖连接建立、消息处理以及连接管理等关键方面。

3. ASP.NET Core框架中的WebSocket类

3.1 WebSocket在ASP.NET Core中的角色

3.1.1 ASP.NET Core概述

ASP.NET Core是一个轻量级、跨平台的开源框架，用于构建现代的、云优化的、基于Internet的应用程序。它完全重构自.NET Framework中的ASP.NET，具有更高的模块化、更好的性能和更加灵活的部署选项。ASP.NET Core支持包括WebSocket在内的多种实时通信协议，这使得开发者能够为用户提供实时、双向的数据交换能力。

3.1.2 WebSocket的集成与配置

ASP.NET Core通过内置的 Microsoft.AspNetCore.WebSockets 包集成了WebSocket协议。开发者可以很容易地在应用程序中配置和使用WebSocket，以支持实时通信场景。配置WebSocket服务通常涉及以下几个步骤：

  1. 在 Startup.cs 的 Configure 方法中调用 app.UseWebSockets() ，以启用WebSocket支持。
  2. 创建一个中间件来处理WebSocket请求，包括接受WebSocket连接、发送/接收消息以及关闭连接。

下面是一个简单的示例代码，展示了如何在ASP.NET Core应用程序中集成WebSocket支持：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // 启用WebSocket支持
    app.UseWebSockets();

    // 注册WebSocket中间件
    app.Use(async (context, next) =>
    {
        if (context.WebSockets.IsWebSocketRequest)
        {
            WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
            await Echo(context, webSocket);
        }
        else
        {
            await next();
        }
    });
}

private static async Task Echo(HttpContext context, WebSocket webSocket)
{
    // 定义一个缓冲区来存储接收到的消息
    byte[] buffer = new byte[1024 * 4];
    // 接收消息的循环
    while (webSocket.State == WebSocketState.Open)
    {
        // 接收消息
        var result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        if (result.MessageType == WebSocketMessageType.Close)
        {
            await webSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, string.Empty, CancellationToken.None);
        }
        else
        {
            // 反射消息并发送回客户端
            await webSocket.SendAsync(new ArraySegment<byte>(buffer, 0, result.Count),
                                      result.MessageType,
                                      result.EndOfMessage,
                                      CancellationToken.None);
        }
    }
}

在上面的代码中，我们首先调用了 app.UseWebSockets() 来启用WebSocket支持。之后，我们通过 app.Use 注册了一个中间件，该中间件负责处理WebSocket连接的请求。在这个中间件中，我们检查了当前的HTTP请求是否为WebSocket请求，如果是，则接受该请求并进入一个接收循环。在循环中，我们读取消息，处理消息类型，并将接收到的任何消息回发给客户端。

此代码段展示了ASP.NET Core如何简化WebSocket服务端的实现。它不仅仅是一个简单的echo服务器，也提供了WebSocket集成和配置的一个基本理解。在实际的生产环境中，你可能需要对这个框架进行扩展，比如添加更多的错误处理、消息格式化或业务逻辑。

3.2 编写WebSocket服务端代码

3.2.1 创建WebSocket服务端程序

编写WebSocket服务端程序涉及几个主要步骤，包括设置项目、编写接收和处理WebSocket连接的代码以及管理连接状态。让我们进一步深入了解如何创建一个WebSocket服务端程序。

首先，你需要创建一个新的ASP.NET Core Web项目。在Visual Studio中，选择“创建新项目”并搜索“ASP.NET Core Web”，然后选择“空”模板来创建项目。这样做的好处是你可以从零开始构建，避免了不必要的依赖和初始代码。

创建项目后，你可以在 Startup.cs 中添加之前提到的WebSocket支持代码。这段代码负责在HTTP请求上检测WebSocket握手请求，并处理接下来的WebSocket通信。 Echo 方法中的接收循环会不断读取客户端发送的消息，并将相同的消息发送回客户端。

3.2.2 实现WebSocket连接逻辑

实现WebSocket连接逻辑是构建WebSocket服务端程序的关键部分。在 Echo 方法中，我们使用 WebSocket.ReceiveAsync 方法来异步地接收消息。这个方法返回一个 WebSocketReceiveResult 对象，它包含了接收操作的结果信息，如消息类型和消息是否已完全接收。

一旦接收到消息，你需要确定如何处理它。在我们的echo服务器示例中，我们简单地将接收到的消息回发给客户端。然而，在真实世界的应用中，你可能会对消息进行解析和处理，然后执行相关的业务逻辑。

通过使用 WebSocket.SendAsync 方法，你可以将处理后的消息异步地发送回客户端。发送消息时，你需要指定消息类型和是否是消息的结尾部分。通常，我们将消息分为多个部分发送，每个部分可能都有自己的结束标志。

ASP.NET Core的WebSocket支持还包括处理连接关闭的逻辑。当客户端或服务器发送关闭消息时，可以通过 WebSocket.CloseAsync 方法关闭WebSocket连接。这允许你优雅地断开连接，确保所有数据都已发送，并且可以向客户端发送一个状态码和关闭描述。

通过遵循上面的步骤，你可以创建一个基本的WebSocket服务端程序，用于处理客户端发起的实时通信。随着应用复杂性的增加，你可能需要考虑引入更高级的特性，例如使用 WebSocketMiddleware 来封装WebSocket的处理逻辑，或者通过依赖注入来提高代码的可测试性和可维护性。

总结

这一章节详细介绍了WebSocket在ASP.NET Core框架中的角色和实现方式。我们从ASP.NET Core的基本概念讲起，逐步深入到了如何集成和配置WebSocket服务。通过具体的示例代码，我们展示了如何编写WebSocket服务端程序以及如何实现WebSocket连接逻辑。这些信息对于打算在.NET环境中开发实时Web应用的开发者来说，是非常有价值的学习材料。

4. 创建WebSocket控制器和中间件

4.1 WebSocket控制器的作用

WebSocket控制器作为处理WebSocket连接和消息交换的中心节点，在实时Web应用中扮演着至关重要的角色。它不仅处理客户端的连接请求，还负责将消息路由到正确的目标，并维护连接的上下文状态。

4.1.1 控制器设计原则

在设计WebSocket控制器时，开发者应该遵循一些核心原则：

  1. 单一职责原则 ：每个控制器应该只处理一类相关的消息和连接。这样做可以降低复杂性，并使代码易于维护。
  2. 状态管理 ：控制器需要管理客户端的状态信息，包括当前连接的客户端列表、客户端的特定信息以及连接的生命周期状态。
  3. 消息路由 ：控制器应实现消息路由逻辑，将接收到的消息转发到对应的处理程序或服务。

4.1.2 编写控制器逻辑

下面是一个ASP.NET Core中的WebSocket控制器示例：

public class ChatController : Controller
{
    private readonly WebSocketManager _webSocketManager;

    public ChatController(WebSocketManager webSocketManager)
    {
        _webSocketManager = webSocketManager;
    }

    public async Task Get()
    {
        if (HttpContext.WebSockets.IsWebSocketRequest)
        {
            WebSocket webSocket = await HttpContext.WebSockets.AcceptWebSocketAsync();
            await _webSocketManager.AddSocket(webSocket);
        }
        else
        {
            HttpContext.Response.StatusCode = (int)HttpStatusCode.BadRequest;
        }
    }
}

在上面的代码中， ChatController 是一个处理WebSocket连接的控制器。 Get 方法检查请求是否为WebSocket请求，并接受它，然后将WebSocket实例添加到 WebSocketManager 中进行管理。

4.2 WebSocket中间件的实现

WebSocket中间件位于ASP.NET Core处理请求的中间位置，可以在请求到达控制器之前进行拦截，并在响应返回客户端之前进行处理。

4.2.1 中间件的角色与功能

WebSocket中间件通常负责以下任务：

  1. 请求升级检查 ：确认请求是否为WebSocket升级请求。
  2. 握手处理 ：执行WebSocket握手协议，包括响应客户端的升级请求。
  3. 连接管理 ：管理WebSocket连接的生命周期，包括连接的建立、维护和断开。

4.2.2 中间件的集成与配置

下面是一个ASP.NET Core的WebSocket中间件示例：

public class WebSocketMiddleware
{
    private readonly RequestDelegate _next;
    private readonly WebSocketManager _webSocketManager;

    public WebSocketMiddleware(RequestDelegate next, WebSocketManager webSocketManager)
    {
        _next = next;
        _webSocketManager = webSocketManager;
    }

    public async Task Invoke(HttpContext context)
    {
        if (!context.WebSockets.IsWebSocketRequest)
        {
            await _next(context);
            return;
        }

        WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
        await _webSocketManager.AddSocket(webSocket);
        await Receive(context, webSocket);
    }

    private async Task Receive(HttpContext context, WebSocket webSocket)
    {
        var buffer = new byte[1024 * 4];
        WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);

        while (!result.CloseStatus.HasValue)
        {
            await _webSocketManager.RouteMessageAsync(webSocket, buffer);
            result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        }

        await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
    }
}

在上面的代码中， WebSocketMiddleware 类是处理WebSocket请求的中间件。 Invoke 方法执行实际的WebSocket升级和接收逻辑。 Receive 方法处理从客户端接收消息并路由这些消息。

WebSocket中间件应该在 Startup.cs 中配置：

public void Configure(IApplicationBuilder app)
{
    app.UseWebSockets();
    app.UseMiddleware<WebSocketMiddleware>();

    // ... 其他中间件和路由配置 ...
}

通过正确配置WebSocket中间件，应用能够处理实时通信的需求，为用户创建丰富的交互式体验。

5. 处理WebSocket连接和消息

在本章中，我们将深入探讨WebSocket连接和消息处理的技术细节。通过本章节的介绍，你将掌握WebSocket连接的生命周期管理，以及如何高效地接收和发送消息。此外，本章节也将提供一个详细的案例来展示如何在实际的网络通信中应用这些知识点。

5.1 WebSocket连接的生命周期

5.1.1 连接建立和关闭流程

WebSocket连接的建立是客户端与服务器之间建立持久连接的过程。它与传统的HTTP请求不同，因为它允许在单个TCP连接上进行全双工通信。在.NET环境中，使用ASP.NET Core可以简单地实现WebSocket服务端。以下是使用ASP.NET Core创建WebSocket服务端连接的生命周期管理的基本步骤：

  1. 客户端发起连接请求 ：客户端（通常是一个Web浏览器或移动设备上的应用程序）向服务器发送一个带有特定Upgrade头部的HTTP请求，表示它想要将连接升级到WebSocket协议。

  2. 服务器端处理Upgrade请求 ：服务端接收到Upgrade请求后，检查请求并验证是否满足WebSocket连接升级的条件。如果一切就绪，服务器将接受连接并发送响应，以完成连接的升级。

  3. 握手成功，连接建立 ：握手成功后，服务器与客户端之间的连接即为WebSocket连接，之后的数据传输将不再遵循HTTP协议，而是按照WebSocket协议的帧格式进行传输。

  4. 数据交换 ：连接建立之后，数据可以在客户端和服务端之间双向传输。服务器可以在任何时间向客户端推送消息，而无需等待客户端的请求。

  5. 关闭连接 ：当通信完成或出现异常时，任一方都可发送关闭帧来结束连接。关闭帧包含了状态码和原因字符串，帮助通信双方了解关闭的原因。

5.1.2 处理连接状态变化

在.NET环境中，WebSocket连接的生命周期中的各种事件，如连接建立、接收消息、发送消息、以及连接关闭等，都可以通过事件处理程序来进行管理。在ASP.NET Core中，WebSocket服务端的生命周期管理涉及到几个关键的事件处理方法：

  • OnConnectedAsync : 该方法在客户端成功连接到WebSocket服务端后被调用。
  • OnDisconnectedAsync : 该方法在客户端与WebSocket服务端断开连接时被调用。
  • OnReceiveAsync : 该方法在接收到客户端发送的任何消息时被调用。

下面是一个简单的代码示例，展示如何在ASP.NET Core中处理WebSocket连接状态变化：

public async Task OnConnectedAsync(WebSocket socket)
{
    // 连接建立时的逻辑代码
    while (socket.State == WebSocketState.Open)
    {
        // 处理消息接收逻辑
        var buffer = new byte[1024 * 4];
        var result = await socket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        if (result.MessageType == WebSocketMessageType.Close)
        {
            // 处理关闭请求
            await socket.CloseOutputAsync(WebSocketCloseStatus.NormalClosure, string.Empty, CancellationToken.None);
            break;
        }
    }
}

public async Task OnDisconnectedAsync(WebSocket socket, WebSocketCloseStatus closeStatus)
{
    // 连接断开时的逻辑代码
}

5.2 消息的接收与发送机制

5.2.1 消息格式和类型

WebSocket协议通过帧来封装消息，这些消息可以是文本、二进制或控制帧。客户端和服务端通过发送文本帧或二进制帧来交换消息。控制帧用于发送控制信息，例如连接关闭或ping/pong用于保持连接活跃。

  • 文本帧 : 包含的是UTF-8编码的文本数据。
  • 二进制帧 : 包含的是二进制数据。
  • 控制帧 : 用于管理WebSocket连接状态，例如关闭连接或ping/pong。

5.2.2 实现消息处理逻辑

实现消息处理逻辑时，首先需要考虑如何接收消息。在ASP.NET Core中，可以使用 ReceiveAsync 方法来异步接收消息。而发送消息时，则使用 SendAsync 方法。下面的代码展示了如何实现一个简单的消息接收与发送的逻辑：

public async Task ReceiveMessages(WebSocket webSocket)
{
    while (webSocket.State == WebSocketState.Open)
    {
        var buffer = new byte[1024 * 4];
        var result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);

        switch (result.MessageType)
        {
            case WebSocketMessageType.Binary:
                // 处理二进制消息
                break;
            case WebSocketMessageType.Text:
                // 处理文本消息
                var receivedText = Encoding.UTF8.GetString(buffer, 0, result.Count);
                await EchoTextMessage(webSocket, receivedText);
                break;
            case WebSocketMessageType.Close:
                // 处理关闭消息
                await webSocket.CloseOutputAsync(WebSocketCloseStatus.NormalClosure, string.Empty, CancellationToken.None);
                break;
        }
    }
}

public async Task EchoTextMessage(WebSocket webSocket, string message)
{
    // 将接收到的文本消息回发给客户端
    var messageBuffer = Encoding.UTF8.GetBytes(message);
    await webSocket.SendAsync(new ArraySegment<byte>(messageBuffer), WebSocketMessageType.Text, true, CancellationToken.None);
}

在这个示例中，我们首先接收消息，然后根据消息类型进行处理。如果接收到的是文本消息，我们将其回发给客户端。如果接收到关闭消息，我们则关闭WebSocket连接。

这个章节为理解WebSocket在ASP.NET Core中的生命周期管理和消息处理提供了深入的技术细节。在接下来的章节中，我们将探索如何将WebSocket集成到HTML前端，并实现客户端与服务器间的双向通信。

6. HTML前端与WebSocket的连接和交互

6.1 HTML中WebSocket的集成

WebSocket提供了一种在客户端和服务器之间建立持久连接的方式，允许双向通信。在HTML前端，我们可以利用JavaScript中的 WebSocket API来集成WebSocket协议，实现与后端的实时交互。

6.1.1 JavaScript与WebSocket API

在JavaScript中， WebSocket 对象提供了对WebSocket协议的支持，允许我们打开一个到服务器的持久连接，并通过该连接发送和接收数据。

// 创建一个新的WebSocket实例
var socket = new WebSocket('wss://example.com/socket');

// 打开连接时触发
socket.onopen = function(event) {
    console.log('Connection established:', event);
};

// 接收到消息时触发
socket.onmessage = function(event) {
    console.log('Message received:', event.data);
};

// 连接关闭时触发
socket.onclose = function(event) {
    console.log('Connection closed:', event);
};

// 发生错误时触发
socket.onerror = function(event) {
    console.error('WebSocket error:', event);
};

6.1.2 前端代码实现连接逻辑

连接逻辑的实现相对简单，主要包含创建WebSocket实例，并为其绑定相应的事件处理器。

// 连接服务器WebSocket端点
const ws = new WebSocket('wss://example.com');

// 监听连接打开事件
ws.addEventListener('open', function (event) {
    console.log('Connection open', event);
    // 发送数据到服务器
    ws.send('Hello Server!');
});

// 监听接收消息事件
ws.addEventListener('message', function (event) {
    console.log('Received message: ' + event.data);
    // 可以根据实际需求处理接收到的消息
});

// 监听连接关闭事件
ws.addEventListener('close', function (event) {
    console.log('Connection closed', event);
});

// 监听连接错误事件
ws.addEventListener('error', function (event) {
    console.error('WebSocket error:', event);
});

6.2 实现前端与后端的双向通信

6.2.1 消息的发送和接收

前端通过 send 方法发送消息，后端通过WebSocket服务端代码接收消息，并可执行相应逻辑。

6.2.2 处理前端的事件和回调

前端的事件处理涉及到对消息发送、接收以及连接状态变化的反应，需要编写相应的回调函数来处理这些事件。

// 定义一个函数来发送消息并处理响应
function sendMessage(msg) {
    ws.send(msg);
}

// 定义一个函数来处理接收到的消息
function handleMessage(event) {
    const message = event.data;
    console.log('Message from server:', message);
    // 根据消息内容执行相关操作
}

// 绑定事件处理器
ws.addEventListener('message', handleMessage);

在实际应用中，HTML前端通过这些基础API与WebSocket服务器端进行有效通信，实现从服务器实时获取数据、发送指令等功能。页面上的UI变化可以基于这些数据流来动态更新，从而提升用户体验。

在本章中，我们了解了如何在前端集成WebSocket以实现实时双向通信，并通过具体的JavaScript示例代码了解了相关API的使用方式。下一章节我们将继续深入探讨WebSocket在实际开发中的错误处理和安全策略。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：WebSocket协议支持客户端和服务器间持久化连接及全双工通信，特别适合实时应用。.NET环境中的ASP.NET Core框架提供了实现WebSocket服务端的功能，包括创建控制器或中间件来管理连接、接收和发送消息。HTML前端使用JavaScript的WebSocket API与服务端交云。本实践展示了如何在.NET环境搭建WebSocket服务端，并通过HTML前端实现与服务端的双向通信。了解如何处理连接、数据传输、以及考虑安全性和异常处理等实际开发中的要点。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

（86页PPT）智慧小区智能化设计方案（附下载方式）

avatar 讯飞AI开发者社区
cover

【编程语言】主要的面向对象开发语言

avatar 讯飞AI开发者社区
cover

【编程语言】程序序设计语言中的OOP机制

avatar 讯飞AI开发者社区