【ASP.NET Core 基础知识】--前端开发--使用ASP.NET Core和JavaScript进行通信

一、在ASP.NET Core中使用JavaScript

在现代的Web开发中，JavaScript是不可或缺的一部分，它为网页提供了交互性和动态性。而ASP.NET Core作为一个强大的服务器端框架，与JavaScript的结合可以为开发人员带来更加灵活和丰富的体验。本文将探讨如何在ASP.NET Core中使用JavaScript，并提供一些简单的示例来说明。

  1. 引入JavaScript文件
    在ASP.NET Core项目中，引入JavaScript文件是一个常见的做法。这可以通过将JavaScript文件放置在wwwroot目录下，并在HTML文件中引用该文件来实现。例如，我们可以创建一个名为myscript.js的JavaScript文件，并在HTML文件中通过以下方式引入：
<!DOCTYPE html>
<html>
<head><title>ASP.NET Core与JavaScript通信</title>
</head>
<body><h1>Hello, ASP.NET Core!</h1><script src="~/js/myscript.js"></script>
</body>
</html>

在这个例子中，~/js/myscript.js是JavaScript文件的路径，它位于wwwroot目录下的js文件夹内。

  1. 在ASP.NET Core中嵌入JavaScript代码
    除了引入外部的JavaScript文件，ASP.NET Core还允许在 Razor 视图或C#代码中嵌入JavaScript代码。例如，我们可以在Razor视图中通过<script>标签嵌入JavaScript代码：
<!DOCTYPE html>
<html>
<head><title>ASP.NET Core与JavaScript通信</title>
</head>
<body><h1>Hello, ASP.NET Core!</h1><script>function greet() {alert('Hello from JavaScript embedded in ASP.NET Core!');}greet();</script>
</body>
</html>

在这个例子中，我们定义了一个名为greet的JavaScript函数，并在页面加载时调用它。这种方式适用于简单的交互，但不太适合复杂的JavaScript代码。

  1. 示例：使用AJAX从后端获取数据并在前端显示
    AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下与服务器交换数据的技术。在ASP.NET Core中，我们可以使用AJAX从后端获取数据，并在前端显示。以下是一个简单的示例：
    首先，我们在后端创建一个处理AJAX请求的控制器方法：
[ApiController]
[Route("api/[controller]")]
public class DataController : ControllerBase
{[HttpGet]public IActionResult GetData(){var data = new { message = "Hello from ASP.NET Core!" };return Ok(data);}
}

然后，在前端通过JavaScript使用AJAX请求数据：

<!DOCTYPE html>
<html>
<head><title>ASP.NET Core与JavaScript通信</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body><h1>Hello, ASP.NET Core!</h1><div id="dataContainer"></div><script>$(document).ready(function () {$.ajax({url: '/api/data',method: 'GET',success: function (data) {$('#dataContainer').text(data.message);}});});</script>
</body>
</html>

在这个示例中，我们使用了jQuery库来简化AJAX请求的操作。当页面加载时，JavaScript代码会向后端发送一个GET请求，并将返回的数据显示在页面上。

二、通过AJAX进行通信

2.1 AJAX概述

AJAX（Asynchronous JavaScript and XML）是一种用于在不重新加载整个网页的情况下，与服务器交换数据并更新部分页面的技术。它将JavaScript、XMLHttpRequest对象（或最近的Fetch API）、HTML和CSS等技术组合在一起，使得在网页中实现异步数据传输成为可能。AJAX的出现改变了Web开发的方式，使得网页变得更加动态、交互性更强，用户体验得到了极大的提升。

  1. 核心原理
    传统的Web页面在与服务器交互时，通常是通过整个页面的刷新来实现。而AJAX技术允许在不刷新整个页面的情况下，通过JavaScript在后台发送HTTP请求，然后处理服务器返回的数据，并更新页面的一部分内容。这种异步的通信方式使得网页的响应更加迅速，用户体验更加流畅。
  2. 基本组件
    • XMLHttpRequest对象（XHR）或Fetch API：在JavaScript中，通过XMLHttpRequest对象（或Fetch API）来创建HTTP请求，并发送到服务器端。XHR对象允许异步地从服务器获取数据，而不必刷新整个页面。
    • 事件处理：AJAX通常通过事件处理来处理异步操作。例如，可以监听XHR对象的onreadystatechange事件，以便在请求状态发生变化时执行相应的操作。
    • 数据交换格式：虽然AJAX中的"X"代表XML（可扩展标记语言），但实际上，AJAX也可以使用其他数据交换格式，如JSON（JavaScript Object Notation）或纯文本等。
    • 回调函数：在AJAX操作完成后，通常会调用一个回调函数来处理从服务器返回的数据。这使得我们可以根据需要更新页面的内容，例如更新DOM元素或执行其他操作。
  3. 优点
    • 更快的响应时间：由于AJAX允许在后台异步地与服务器通信，因此页面不需要等待整个HTTP请求-响应周期完成，从而实现更快的响应时间。
    • 更好的用户体验：由于页面的部分内容可以在后台更新，因此用户可以更流畅地与网页进行交互，而无需等待整个页面的重新加载。
    • 减少带宽占用：由于只更新页面的一部分内容，而不是整个页面，因此AJAX可以减少与服务器之间的数据传输量，从而节省带宽。
    • 增强的交互性：AJAX使得网页可以实现更多样化和交互性更强的功能，如动态加载内容、实时更新数据等。
  4. 注意事项
    • 兼容性问题：虽然大多数现代浏览器都支持AJAX，但在处理老版本浏览器时可能会出现兼容性问题。因此，开发人员需要谨慎处理这些问题，考虑使用Polyfills或其他解决方案来解决。
    • 跨域请求：由于同源策略的限制，AJAX请求通常只能向与当前页面具有相同协议、主机和端口的服务器发出。如果需要向其他域发送AJAX请求，可能需要使用CORS（跨域资源共享）或JSONP等技术来解决跨域问题。
2.2 在ASP.NET Core中使用AJAX进行后端通信

在ASP.NET Core中使用AJAX进行后端通信是一种常见的做法，可以实现异步数据传输和动态页面更新。下面是一个简单的示例，演示了如何在ASP.NET Core中使用AJAX与后端进行通信。

  1. 设置后端API端点
    首先，您需要在ASP.NET Core应用程序中设置一个API端点，用于处理AJAX请求并返回数据。假设您的应用程序需要提供一个获取用户信息的API端点，您可以这样设置：
[ApiController]
[Route("api/[controller]")]
public class UserController : ControllerBase
{[HttpGet]public IActionResult GetUserInfo(){var userInfo = new { Name = "John Doe", Age = 30 };return Ok(userInfo);}
}

在这个示例中，我们创建了一个名为UserController的控制器，并添加了一个名为GetUserInfo的方法，该方法返回一个包含用户信息的JSON对象。

  1. 在前端页面中使用AJAX请求数据
    接下来，您可以在前端页面中使用JavaScript和AJAX发送请求来获取后端API返回的数据。假设您有一个HTML页面，您可以在其中使用AJAX请求用户信息：
<!DOCTYPE html>
<html>
<head><title>使用AJAX获取后端数据</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body><h1>User Information</h1><div id="userInfo"></div><script>$(document).ready(function () {$.ajax({url: '/api/user',method: 'GET',success: function (data) {$('#userInfo').html('<p>Name: ' + data.name + '</p><p>Age: ' + data.age + '</p>');},error: function () {$('#userInfo').html('<p>Error: Failed to fetch user information.</p>');}});});</script>
</body>
</html>

在这个示例中，我们使用了jQuery库来简化AJAX请求的操作。当页面加载完成时，JavaScript代码将向/api/user发送一个GET请求，获取用户信息。成功获取到数据后，我们将用户信息显示在页面上的userInfo div中。如果请求失败，则显示错误消息。

  1. 测试
    现在，您可以运行ASP.NET Core应用程序，并访问包含AJAX请求的HTML页面。页面加载后，它将通过AJAX请求从后端API端点获取用户信息，并将其显示在页面上。
    通过这个简单的示例，您可以了解如何在ASP.NET Core中使用AJAX与后端进行通信。您可以根据实际需求扩展这个示例，处理更复杂的数据和交互逻辑。

三、使用SignalR进行实时通信

3.1 SignalR概述

SignalR是一个开发人员可以使用的ASP.NET库，用于在服务器端和客户端之间建立实时双向通信。它允许服务器端代码推送内容到连接的客户端，同时也支持客户端向服务器端发送消息。SignalR的设计旨在处理不同网络连接的细微差异，例如WebSockets、Server-Sent Events（SSE）或长轮询（long polling），以提供最佳的实时通信体验。

  1. 核心原理
    SignalR利用了现代Web浏览器的一些特性和技术，以在不同的传输方式之间进行动态选择，以确保通信的最佳性能和稳定性。其核心原理包括：

    • 实时双向通信：SignalR允许服务器端代码主动推送消息到连接的客户端，同时也支持客户端向服务器端发送消息。这种双向通信使得开发人员可以构建实时性高的应用程序，例如聊天应用、实时游戏等。
    • 自适应传输：SignalR会自动检测客户端和服务器之间的连接状态，并根据连接的类型（如WebSockets、SSE、长轮询等）选择最佳的传输方式。这样可以确保在不同网络环境下的最佳性能和稳定性。
    • 持久连接：SignalR允许客户端和服务器之间建立持久的连接，从而避免了频繁地建立和断开连接，提高了通信的效率和性能。

  2. 主要组件
    SignalR主要由以下几个组件组成：

    • Hub：Hub是SignalR中的核心组件，负责处理客户端和服务器端之间的通信。开发人员可以创建一个或多个Hub来定义不同类型的通信逻辑。
    • Client Proxy：SignalR提供了客户端代理，使得客户端可以轻松地调用服务器端Hub上定义的方法，并处理从服务器端发送的消息。
    • Transport Layer：SignalR支持多种传输方式，如WebSockets、Server-Sent Events（SSE）、长轮询等。传输层负责处理客户端和服务器之间的实际数据传输。
    • Connection Management：SignalR负责管理客户端和服务器之间的连接，包括连接的建立、保持、断开等操作。

  3. 应用场景
    SignalR广泛应用于需要实时通信和实时更新的应用程序，包括但不限于：

    • 即时聊天应用程序
    • 实时协作应用程序
    • 实时游戏
    • 实时监控和通知系统
    • 在线投票和调查应用程序
    • 在线股票交易和金融数据更新
3.2 在ASP.NET Core中配置和使用SignalR

在ASP.NET Core中配置和使用SignalR可以通过以下步骤完成：

  1. 安装SignalR包
    首先，您需要通过NuGet包管理器安装SignalR的相关包。在Visual Studio中，您可以通过NuGet包管理器控制台执行以下命令来安装SignalR：
Install-Package Microsoft.AspNetCore.SignalR
  1. 配置SignalR服务
    接下来，您需要在Startup.cs文件的ConfigureServices方法中配置SignalR服务。添加对SignalR服务的引用，并使用AddSignalR方法将其添加到服务集合中：
public void ConfigureServices(IServiceCollection services)
{services.AddSignalR();// 其他服务配置
}
  1. 添加SignalR端点
    然后，在Startup.cs文件的Configure方法中，您需要配置SignalR端点。您可以使用MapHub方法将SignalR端点映射到指定的Hub类：
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{// 其他配置app.UseEndpoints(endpoints =>{endpoints.MapHub<ChatHub>("/chatHub");// 其他端点配置});
}

在这个例子中，我们将一个名为ChatHub的Hub类映射到"/chatHub"端点。

  1. 创建SignalR Hub类
    接下来，您需要创建一个继承自Hub基类的Hub类。这个类将包含与客户端进行通信的方法。例如，您可以创建一个名为ChatHub的Hub类：
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;public class ChatHub : Hub
{public async Task SendMessage(string user, string message){await Clients.All.SendAsync("ReceiveMessage", user, message);}
}

在这个例子中，我们定义了一个名为SendMessage的方法，用于接收来自客户端的消息，并将其发送给所有连接的客户端。

  1. 使用SignalR客户端
    最后，您可以在前端页面中使用SignalR客户端来与服务器进行通信。例如，在JavaScript中，您可以通过创建HubConnection对象来连接到服务器端的Hub：
<!DOCTYPE html>
<html>
<head><title>SignalR Chat</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="/chatHub"></script>
</head>
<body><div id="messages"></div><input type="text" id="messageInput" /><button id="sendButton">Send</button><script>var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();connection.on("ReceiveMessage", function (user, message) {$('#messages').append('<p><strong>' + user + '</strong>: ' + message + '</p>');});$('#sendButton').click(function () {var user = "User";var message = $('#messageInput').val();connection.invoke("SendMessage", user, message);});connection.start().then(function () {console.log("Connection established.");}).catch(function (err) {return console.error(err.toString());});</script>
</body>
</html>

在这个例子中，我们创建了一个名为chatHub的Hub连接，并定义了一个接收消息的回调函数。当用户点击发送按钮时，我们使用invoke方法调用服务器端的SendMessage方法，并将用户输入的消息发送到服务器端。
通过以上步骤，您已经完成了在ASP.NET Core中配置和使用SignalR的过程。现在，您可以通过SignalR轻松实现实时通信功能，并为您的应用程序增添更多的交互性和动态性。

四、使用Web API进行RESTful通信

4.1 RESTful API概述

REST（Representational State Transfer）是一种设计风格，用于构建分布式系统和网络应用程序的通信。RESTful API则是基于REST原则构建的API，它使用HTTP协议进行通信，通过URL定义资源，并使用HTTP方法（GET、POST、PUT、DELETE等）对资源进行操作。以下是对RESTful API的概述：

  1. 资源
    在RESTful API中，所有的数据都被视为资源，并由URL来表示。每个资源都有一个唯一的URL地址，并且可以通过HTTP方法对其进行操作。例如，一个简单的用户资源可以被表示为/users。

  2. HTTP方法
    RESTful API使用HTTP方法来定义对资源的操作，常用的HTTP方法包括：

    • GET：用于获取资源的信息。
    • POST：用于在服务器上创建新资源。
    • PUT：用于更新服务器上的资源。
    • DELETE：用于删除服务器上的资源。

这些HTTP方法与CRUD操作（创建、读取、更新、删除）相对应。

  1. 状态无关性
    RESTful API是状态无关的，这意味着每个请求都包含了所有必要的信息，服务器不需要保留上下文信息。客户端的每个请求都应该包含足够的信息，以便服务器可以理解并处理该请求。

  2. 结构化数据
    RESTful API通常使用结构化数据格式来交换数据，如JSON（JavaScript Object Notation）或XML（eXtensible Markup Language）。这些数据格式简单且易于解析，可以被不同的客户端和服务端轻松地处理。

  3. 无状态通信
    RESTful API是无状态的，这意味着每个请求都应该包含足够的信息，以便服务器可以理解并处理该请求，而不依赖于之前的请求状态。这使得RESTful API更容易扩展和管理。

4.2 在ASP.NET Core中创建和使用RESTful API

在ASP.NET Core中创建和使用RESTful API可以通过以下步骤完成：

  1. 创建ASP.NET Core Web API 项目
    首先，您需要创建一个ASP.NET Core Web API项目。您可以使用Visual Studio或者.NET Core CLI来创建项目。在Visual Studio中，您可以选择"ASP.NET Core Web API"项目模板并创建一个新的项目。
dotnet new webapi -n MyRestfulApi
  1. 创建资源控制器
    接下来，您需要创建控制器来定义RESTful API的行为。在ASP.NET Core中，您可以通过添加控制器类并继承自Controller基类来实现。例如，如果您想创建一个处理用户资源的API，您可以创建一个名为UserController的控制器：
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;[ApiController]
[Route("api/[controller]")]
public class UserController : ControllerBase
{private static List<User> _users = new List<User>{new User { Id = 1, Name = "John" },new User { Id = 2, Name = "Alice" }};[HttpGet]public IActionResult GetAllUsers(){return Ok(_users);}[HttpGet("{id}")]public IActionResult GetUserById(int id){var user = _users.FirstOrDefault(u => u.Id == id);if (user == null){return NotFound();}return Ok(user);}[HttpPost]public IActionResult CreateUser([FromBody] User user){_users.Add(user);return CreatedAtAction(nameof(GetUserById), new { id = user.Id }, user);}[HttpPut("{id}")]public IActionResult UpdateUser(int id, [FromBody] User updatedUser){var user = _users.FirstOrDefault(u => u.Id == id);if (user == null){return NotFound();}user.Name = updatedUser.Name;return NoContent();}[HttpDelete("{id}")]public IActionResult DeleteUser(int id){var user = _users.FirstOrDefault(u => u.Id == id);if (user == null){return NotFound();}_users.Remove(user);return NoContent();}
}public class User
{public int Id { get; set; }public string Name { get; set; }
}

在这个示例中，我们定义了一组处理用户资源的HTTP方法：GET用于获取所有用户和根据ID获取特定用户，POST用于创建新用户，PUT用于更新现有用户，DELETE用于删除用户。

  1. 配置路由
    您还需要在Startup.cs文件的ConfigureServices方法中配置路由，以确保API的路由正确映射到相应的控制器：
public void ConfigureServices(IServiceCollection services)
{services.AddControllers();// 其他服务配置
}public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{// 其他配置app.UseRouting();app.UseEndpoints(endpoints =>{endpoints.MapControllers();});
}

通过以上步骤，您已经成功创建了一个基于ASP.NET Core的RESTful API，并可以在应用程序中使用它来处理资源的CRUD操作。

4.3 示例：使用ASP.NET Core创建一个简单的RESTful API，并在前端调用
  1. 创建ASP.NET Core Web API 项目
    首先，您需要创建一个ASP.NET Core Web API项目。您可以使用Visual Studio或者.NET Core CLI来创建项目。在Visual Studio中，您可以选择"ASP.NET Core Web API"项目模板并创建一个新的项目。
dotnet new webapi -n MyRestfulApi
  1. 创建资源控制器
    接下来，您需要创建一个控制器来定义RESTful API的行为。假设我们创建一个处理学生资源的API，您可以创建一个名为StudentController的控制器：
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;[ApiController]
[Route("api/[controller]")]
public class StudentController : ControllerBase
{private static List<Student> _students = new List<Student>{new Student { Id = 1, Name = "John" },new Student { Id = 2, Name = "Alice" }};[HttpGet]public IActionResult GetAllStudents(){return Ok(_students);}[HttpGet("{id}")]public IActionResult GetStudentById(int id){var student = _students.FirstOrDefault(s => s.Id == id);if (student == null){return NotFound();}return Ok(student);}[HttpPost]public IActionResult CreateStudent([FromBody] Student student){_students.Add(student);return CreatedAtAction(nameof(GetStudentById), new { id = student.Id }, student);}[HttpPut("{id}")]public IActionResult UpdateStudent(int id, [FromBody] Student updatedStudent){var student = _students.FirstOrDefault(s => s.Id == id);if (student == null){return NotFound();}student.Name = updatedStudent.Name;return NoContent();}[HttpDelete("{id}")]public IActionResult DeleteStudent(int id){var student = _students.FirstOrDefault(s => s.Id == id);if (student == null){return NotFound();}_students.Remove(student);return NoContent();}
}public class Student
{public int Id { get; set; }public string Name { get; set; }
}

在这个示例中，我们定义了一组处理学生资源的HTTP方法：GET用于获取所有学生和根据ID获取特定学生，POST用于创建新学生，PUT用于更新现有学生，DELETE用于删除学生。

  1. 启动应用程序
    现在，您可以启动应用程序，并使用任何HTTP客户端（如Postman或curl）来测试API。您可以发送HTTP请求来测试GET、POST、PUT和DELETE操作，并验证API的行为。

  2. 在前端调用API
    以下是一个简单的HTML页面，演示了如何在前端调用我们创建的RESTful API：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Student API Test</title>
</head>
<body><h1>Student API Test</h1><div id="students"></div><script>fetch('/api/student').then(response => response.json()).then(data => {const studentsDiv = document.getElementById('students');data.forEach(student => {studentsDiv.innerHTML += `<p>${student.name}</p>`;});}).catch(error => {console.error('Error fetching students:', error);});</script>
</body>
</html>

在这个示例中，我们使用fetch API发送GET请求来获取所有学生，并在页面上显示他们的名字。
通过以上步骤，您已经成功创建了一个基于ASP.NET Core的RESTful API，并在前端调用它来获取资源信息。

五、使用WebSocket进行双向通信

5.1 WebSocket概述

WebSocket是一种在Web应用程序中实现实时双向通信的协议。它提供了一种持久连接，允许客户端和服务器之间进行全双工通信，而不需要使用传统的HTTP轮询或长轮询技术。以下是WebSocket的概述：

  1. 双向通信
    WebSocket协议支持双向通信，允许客户端和服务器之间在单个TCP连接上进行实时的全双工通信。这意味着客户端可以向服务器发送消息，服务器也可以主动向客户端推送消息。

  2. 持久连接
    与传统的HTTP请求-响应模型不同，WebSocket建立了一种持久的连接，可以在客户端和服务器之间进行长时间的通信，而不需要在每次通信中重新建立连接。这样可以减少网络延迟和资源消耗，并提高通信的效率。

  3. 低延迟
    由于WebSocket建立了持久连接，并且不需要在每次通信中发送HTTP头信息，因此它具有较低的延迟和更快的响应时间。这使得WebSocket非常适合实时性要求较高的应用程序，如在线聊天、实时游戏等。

  4. 简单易用
    WebSocket协议是一种非常简单和易于实现的协议，它只需要通过简单的握手过程建立连接，并定义了一些基本的消息传输格式。这使得开发人员可以轻松地构建和部署WebSocket应用程序。

  5. 安全性
    WebSocket协议支持加密通信，可以通过TLS/SSL协议进行安全传输。这样可以确保通信的安全性，并防止数据被窃取或篡改。

  6. 应用场景
    WebSocket协议适用于许多不同的应用场景，包括但不限于：

    • 实时聊天应用程序
    • 在线游戏和多人游戏
    • 实时数据传输和监控系统
    • 在线投票和调查应用程序
    • 实时股票交易和金融数据更新

  7. 注意事项
    尽管WebSocket协议提供了许多优点，但在设计和部署WebSocket应用程序时，还需要考虑一些注意事项，如安全性、性能优化、可靠性等。此外，一些网络环境可能会对WebSocket连接进行限制，因此需要在实际部署中进行适当的配置和测试。

WebSocket是一种强大且灵活的协议，可以帮助开发人员构建实时性高、交互性强的Web应用程序，为用户提供更加丰富和流畅的体验。

5.2 在ASP.NET Core中配置和使用WebSocket

在ASP.NET Core中配置和使用WebSocket需要以下步骤：

  1. 添加WebSocket中间件
    首先，您需要在ASP.NET Core应用程序中添加WebSocket中间件。您可以在Startup.cs文件的ConfigureServices方法中将WebSocket中间件添加到应用程序的请求处理管道中。
public void ConfigureServices(IServiceCollection services)
{// 其他服务配置
}public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{// 其他配置app.UseWebSockets();app.UseWebSocketHandler();
}
  1. 创建WebSocket处理程序
    接下来，您需要创建一个WebSocket处理程序来处理WebSocket连接和消息。您可以通过实现ASP.NET Core的IWebSocketHandler接口来定义自己的WebSocket处理程序。以下是一个简单的示例：
using Microsoft.AspNetCore.Http;
using System;
using System.Net.WebSockets;
using System.Threading;
using System.Threading.Tasks;public class WebSocketHandler
{private readonly RequestDelegate _next;public WebSocketHandler(RequestDelegate next){_next = next;}public async Task Invoke(HttpContext context){if (context.WebSockets.IsWebSocketRequest){WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();await HandleWebSocket(webSocket);}else{await _next(context);}}private async Task HandleWebSocket(WebSocket webSocket){try{var buffer = new byte[1024 * 4];WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);while (!result.CloseStatus.HasValue){// 处理接收到的消息// ...result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);}await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);}catch (Exception ex){// 处理异常}finally{webSocket.Dispose();}}
}
  1. 注册WebSocket处理程序
    接下来，您需要将WebSocket处理程序注册到ASP.NET Core的请求处理管道中。您可以通过自定义的中间件来实现这一点。
public static class WebSocketMiddlewareExtensions
{public static IApplicationBuilder UseWebSocketHandler(this IApplicationBuilder builder){return builder.UseMiddleware<WebSocketHandler>();}
}
  1. 测试WebSocket连接
    现在，您可以启动应用程序并测试WebSocket连接。您可以使用WebSocket客户端来测试连接，也可以编写JavaScript代码来创建WebSocket连接，并发送和接收消息。
var socket = new WebSocket("ws://localhost:5000"); // 根据您的实际地址和端口号进行修改socket.onopen = function(event) {console.log("WebSocket连接已建立。");
};socket.onmessage = function(event) {console.log("接收到消息：" + event.data);
};socket.onclose = function(event) {console.log("WebSocket连接已关闭。");
};socket.onerror = function(error) {console.error("WebSocket连接发生错误：" + error);
};

通过以上步骤，您已经成功配置了WebSocket，并可以在ASP.NET Core应用程序中使用WebSocket进行实时双向通信。您可以根据实际需求扩展和定制WebSocket处理程序来实现更多功能。

5.3 示例：创建一个基于WebSocket的简单即时通讯应用程序

下面是一个基于WebSocket的简单即时通讯应用程序的示例，使用ASP.NET Core作为后端和纯HTML/JavaScript作为前端。

  1. 后端 - ASP.NET Core WebSocket处理程序
    创建一个名为WebSocketHandler.cs的文件，定义WebSocket处理程序：
using Microsoft.AspNetCore.Http;
using System;
using System.Net.WebSockets;
using System.Text;
using System.Threading;
using System.Threading.Tasks;public class WebSocketHandler
{private readonly RequestDelegate _next;public WebSocketHandler(RequestDelegate next){_next = next;}public async Task Invoke(HttpContext context){if (context.WebSockets.IsWebSocketRequest){WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();await HandleWebSocket(webSocket);}else{await _next(context);}}private async Task HandleWebSocket(WebSocket webSocket){try{var buffer = new byte[1024 * 4];WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);while (!result.CloseStatus.HasValue){string message = Encoding.UTF8.GetString(buffer, 0, result.Count);message = $"Server: Received '{message}'.";await SendMessageAsync(webSocket, message);result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);}await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);}catch (Exception ex){Console.WriteLine($"WebSocket error: {ex.Message}");}finally{if (webSocket != null)webSocket.Dispose();}}private async Task SendMessageAsync(WebSocket webSocket, string message){var buffer = Encoding.UTF8.GetBytes(message);await webSocket.SendAsync(new ArraySegment<byte>(buffer, 0, buffer.Length), WebSocketMessageType.Text, true, CancellationToken.None);}
}
  1. 注册WebSocket中间件
    创建一个名为WebSocketMiddlewareExtensions.cs的文件，用于注册WebSocket中间件：
using Microsoft.AspNetCore.Builder;public static class WebSocketMiddlewareExtensions
{public static IApplicationBuilder UseWebSocketHandler(this IApplicationBuilder builder){return builder.UseMiddleware<WebSocketHandler>();}
}
  1. 配置Startup.cs
    在Startup.cs的Configure方法中使用WebSocket中间件：
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{// 其他配置app.UseWebSockets();app.UseWebSocketHandler();
}
  1. 前端 - HTML/JavaScript
    创建一个HTML文件（如index.html），用于显示WebSocket连接并发送消息：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebSocket Chat</title>
</head>
<body><div id="chatBox"></div><input type="text" id="messageInput" placeholder="Enter message..."><button onclick="sendMessage()">Send</button><script>var webSocket = new WebSocket("ws://localhost:5000"); // 根据您的实际地址和端口号进行修改webSocket.onmessage = function(event) {var message = event.data;var chatBox = document.getElementById("chatBox");chatBox.innerHTML += "<p>" + message + "</p>";};function sendMessage() {var messageInput = document.getElementById("messageInput");var message = messageInput.value;webSocket.send(message);messageInput.value = "";}</script>
</body>
</html>
  1. 运行应用程序
    运行ASP.NET Core应用程序，然后在浏览器中打开index.html文件。您将能够在WebSocket连接上发送和接收消息，实现一个简单的即时通讯应用程序。

这个示例演示了如何使用ASP.NET Core和WebSocket创建一个简单的即时通讯应用程序。您可以根据需要扩展它，例如添加用户身份验证、保存聊天记录等功能。

六、总结

本文讲解了关于ASP.NET Core、WebSocket、RESTful API等主题的内容。ASP.NET Core提供了强大的框架用于构建Web应用程序，而WebSocket和RESTful API则是实现实时通信和构建API的重要技术。通过这些技术，开发人员可以构建高效、可扩展的Web应用程序，为用户提供更好的体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/672325.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot集成Swagger2的增强版Knife4j

SpringBoot集成Swagger2的增强版Knife4j

1. 背景 作为SpringBoot集成中间件其中的一篇文章吧&#xff0c;既然打算出这么一个系列了&#xff0c;争取做到虽小却全&#xff0c;又精又美的一个系列吧。 Swagger应该都有接触吧&#xff0c;knife4j是Swagger2的增强版&#xff0c;更加友好的操作页面&#xff0c;更多强大…
阅读更多...
【Java程序设计】【C00187】基于SSM的旅游资源网站管理系统（论文+PPT）

【Java程序设计】【C00187】基于SSM的旅游资源网站管理系统（论文+PPT）

基于SSM的旅游资源网站管理系统&#xff08;论文PPT&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于ssm的旅游资源网站 本系统分为前台系统、用户和管理员3个功能模块。 前台系统&#xff1a;当游客打开系统的网址后&#xff0c;首先看到的就是…
阅读更多...
使用UC++是遇到的一个令人郁闷的错误

使用UC++是遇到的一个令人郁闷的错误

本来是照着一个视频教程学习&#xff0c;结果这个视频讲解的大哥特别喜欢调整方法顺序&#xff0c;而且手速特快&#xff0c;看的我花了眼&#xff0c;就这样调来调去&#xff0c;等到运行时发现一个问题&#xff0c;Tick方法里面的代码总是不执行&#xff0c;这个烂问题困扰了…
阅读更多...
体悟PyTorch的优雅

体悟PyTorch的优雅

——PyTorch 是所有的框架中面向对象设计的最优雅的一个。 —— PyTorch的设计最符合人们的思维。 编程是一门艺术&#xff0c;编程可以很优雅。研究可以很优雅&#xff0c;研发也可以很优雅。我们的人生可以很优雅&#xff01; 1. PyTorch 的优雅 PyTorch 的面向对象设计确实…
阅读更多...
介绍 MSTest Runner – CLI、Visual Studio 等

介绍 MSTest Runner – CLI、Visual Studio 等

作者&#xff1a;Amaury Lev Marco Rossignoli Jakub Jareš 排版&#xff1a;Alan Wang 我们很高兴推出 MSTest 运行器&#xff0c;这是一款全新的轻量级 MSTest 测试运行器。这个新的运行器使测试更加便携和可靠&#xff0c;运行速度更快&#xff0c;并且具有可扩展性&#x…
阅读更多...
Python学习之路-接口测试:工具使用

Python学习之路-接口测试:工具使用

Python学习之路-接口测试:工具使用 Jmeter 概念 Jmeter&#xff1a;是Apche公司使用Java平台开发的一款测试工具。 作用 接口测试性能测试压力测试Web自动化测试数据库测试JAVA程序测试 优点&#xff1a; 开源、免费支持多协议小巧功能强大 缺点 不支持IP欺骗使用JMet…
阅读更多...
React+Antd+tree实现树多选功能（选中项受控+支持模糊检索）

React+Antd+tree实现树多选功能（选中项受控+支持模糊检索）

1、先上效果 树型控件&#xff0c;选中项形成一棵新的树&#xff0c;若父选中&#xff0c;子自动选中&#xff0c;子取消&#xff0c;父不取消&#xff0c;子选中&#xff0c;所有的父节点自动取消。同时支持模糊检索&#xff0c;会检索出所有包含该内容的关联节点。 2、环境准…
阅读更多...
centos 7.6 安装cas 对接ldap 单点登录实战

centos 7.6 安装cas 对接ldap 单点登录实战

centos 7.6 安装cas 对ldap 单点登录实战 1、安装前准备工作1.1、centos 7.6 安装JDK 1.81.2、centos 7 安装tomcat 9.0.841.3、windows10 安装JDK 1.81.4、windows10 安装打包工具 maven 3.9.6 2、下载cas 5.3 并打包成war包3、部署cas到tomcat4、cas对接ldap 1、安装前准备工…
阅读更多...
LCP 30. 魔塔游戏

LCP 30. 魔塔游戏

LCP 30. 魔塔游戏 难度: 中等 题目: 小扣当前位于魔塔游戏第一层&#xff0c;共有 N 个房间&#xff0c;编号为 0 ~ N-1。每个房间的补血道具/怪物对于血量影响记于数组 nums&#xff0c;其中正数表示道具补血数值&#xff0c;即血量增加对应数值&#xff1b;负数表示怪物造…
阅读更多...
回归预测 | Matlab实现POA-BP鹈鹕算法优化BP神经网络多变量回归预测

回归预测 | Matlab实现POA-BP鹈鹕算法优化BP神经网络多变量回归预测

回归预测 | Matlab实现POA-BP鹈鹕算法优化BP神经网络多变量回归预测 目录 回归预测 | Matlab实现POA-BP鹈鹕算法优化BP神经网络多变量回归预测预测效果基本描述程序设计参考资料 预测效果 基本描述 1.Matlab实现POA-BP鹈鹕算法优化BP神经网络多变量回归预测&#xff08;完整源码…
阅读更多...
【UE】游戏运行流程的简单理解

【UE】游戏运行流程的简单理解

流程图 官方的游戏流程图&#xff1a; 一般顺序为初始化引擎、创建并初始化 GameInstance、加载关卡&#xff0c;最后开始游戏。 总的来说就是&#xff1a; 开始游戏-》游戏实例-》关卡-》游戏模式-》玩家控制器-》Pawn、玩家状态、HUD、UMG&#xff08;可有可无&#xff09; …
阅读更多...
Linux 服务管理两种方式service和systemctl

Linux 服务管理两种方式service和systemctl

配置文件位置不同&#xff1a; service命令使用/etc/init.d/目录下的脚本文件&#xff0c; 而systemctl命令使用/lib/systemd/system/目录下的unit文件。 状态信息不同&#xff1a;service命令通过执行脚本来获取服务状态信息&#xff0c;而systemctl命令通过systemd的状态管理…
阅读更多...
RabiitMQ延迟队列（死信交换机）

RabiitMQ延迟队列（死信交换机）

Dead Letter Exchange&#xff08;死信交换机&#xff09; 在MQ中&#xff0c;当消息成为死信&#xff08;Dead message 死掉的信息&#xff09;后&#xff0c;消息中间件可以将其从当前队列发送到另一个队列中&#xff0c;这个队列就是死信队列。而 在RabbitMQ中&#xff0c;由…
阅读更多...
二、SSM 整合配置实战

二、SSM 整合配置实战

本章概要 依赖整合和添加控制层配置编写(SpringMVC 整合)业务配置编写(AOP/TX 整合)持久层配置编写(MyBatis 整合)容器初始化配置类整合测试 2.1 依赖整合和添加 数据库准备 数据库脚本 CREATE DATABASE mybatis-example;USE mybatis-example;CREATE TABLE t_emp(emp_id INT…
阅读更多...
【C#】MVVM架构

【C#】MVVM架构

示例结果展示 前提了解 MVVM是Model-View-ViewModel的缩写形式，它通常被用于WPF或Silverlight开发。 Model——可以理解为带有字段，属性的类。例如学校类，教师类，学生类等 View——可以理解为我们所看到的UI。前端界面。 View Model在View和Model之间，起到连接的作用，…
阅读更多...
Linux：Cache之 Cache Invalidate和Cache Flush

Linux：Cache之 Cache Invalidate和Cache Flush

1. Cache Invalidate 该操作主要为解除内存与Cache的绑定关系。 例如&#xff0c;操作DMA进行数据搬移时&#xff0c;如果目标内存配置为可Cache&#xff0c;那么后续通过CPU读取该内存数据时候&#xff0c;若Cache命中&#xff0c;则可能读取到的数据不是DMA搬移后的数据&…
阅读更多...
2024-02-06（Sqoop）

2024-02-06（Sqoop）

1.Sqoop Apache Sqoop是Hadoop生态体系和RDBMS&#xff08;关系型数据库&#xff09;体系之间传递数据的一种工具。 Sqoop工作机制是将导入或者导出命令翻译成MapReduce程序来实现。在翻译出的MapReduce中主要是对inputformat和outputformat进行定制。 Hadoop生态包括&#…
阅读更多...
Swift Combine 从入门到精通一

Swift Combine 从入门到精通一

1. Combine 简介 用 Apple 官方的话来说&#xff0c;Combine 是: a declarative Swift API for processing values over time. Combine 是 Apple 用来实现函数响应式编程的库&#xff0c; 类似于 RxSwift。 RxSwift 是 ReactiveX 对 Swift 语言的实现。 Combine 使用了许多可以…
阅读更多...
8868助力意甲尤文图斯足球俱乐部 寻求冬窗阵容补强

8868助力意甲尤文图斯足球俱乐部 寻求冬窗阵容补强

意甲的尤文图斯足球俱乐部是8868合作体育球队之一&#xff0c;根据意大利天空体育的消息&#xff0c;尤文图斯希望在冬季转会窗口通过引援来加强球队的实力&#xff0c;特别是在中场位置。但尤文必须卖掉一部分人来筹集资金&#xff0c;而伊林就在名单的最前面。 尤文想要提高自…
阅读更多...
openssl3.2 - update debian12‘s default openssl to openssl3.2

openssl3.2 - update debian12‘s default openssl to openssl3.2

文章目录 openssl3.2 - update debian12s default openssl to openssl3.2概述笔记回到debian12自带的openssl版本从源码编译安装最新版的openssl配置ssl访问END openssl3.2 - update debian12’s default openssl to openssl3.2 概述 在debian12虚拟机中编译了openssl3.2(ope…
阅读更多...
最新文章

Copyright @ 2022~2023