正文

从零开始：Asp.Net WebSocket传递字符串参数的详细教程

/0 浏览量
1013

在Web开发中，WebSocket提供了一种全双工通信通道，使得服务器和客户端可以实时进行数据交换。本文将详细讲解如何使用Asp.Net实现WebSocket，并通过WebSocket传递字符串参数。

一、环境准备

在开始之前，请确保你的开发环境满足以下要求：

  1. Visual Studio 2019 或更高版本
  2. .NET Core 3.1 或更高版本
  3. 已安装ASP.NET Core Web开发组件

二、创建项目

  1. 打开Visual Studio，选择“创建新项目”。
  2. 在“创建新项目”窗口中，选择“ASP.NET Core Web应用”，点击“下一步”。
  3. 在“配置你的新项目”窗口中，填写项目名称、保存位置等信息，然后点击“创建”。
  4. 在“新建ASP.NET Core Web应用”窗口中，选择“ASP.NET Core 5.0”版本，然后点击“创建”。

三、添加WebSocket服务

  1. 在项目中，找到Startup.cs文件。
  2. 在public void ConfigureServices(IServiceCollection services)方法中，添加以下代码：
services.AddWebSocketService();
  1. 在public void Configure(IApplicationBuilder app, IWebHostEnvironment env, WebSocketManager webSocketManager)方法中，添加以下代码：
app.UseWebSockets();
  1. 创建一个名为WebSocketManager.cs的类，用于管理WebSocket连接：
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;

public class WebSocketManager
{
    private readonly static Dictionary<string, List<WebSocket>> connectedWebSockets = new Dictionary<string, List<WebSocket>>();

    public static void RegisterWebSocket(string key, WebSocket webSocket)
    {
        if (!connectedWebSockets.ContainsKey(key))
        {
            connectedWebSockets[key] = new List<WebSocket>();
        }
        connectedWebSockets[key].Add(webSocket);
    }

    public static void UnregisterWebSocket(string key, WebSocket webSocket)
    {
        if (connectedWebSockets.ContainsKey(key))
        {
            connectedWebSockets[key].Remove(webSocket);
        }
    }

    public static IEnumerable<WebSocket> GetWebSockets(string key)
    {
        return connectedWebSockets.ContainsKey(key) ? connectedWebSockets[key] : null;
    }
}
  1. 在Startup.cs中注入WebSocketManager：
public void ConfigureServices(IServiceCollection services)
{
    services.AddWebSocketService();
    services.AddSingleton<WebSocketManager>();
}

四、创建WebSocket端点

  1. 在项目中，创建一个名为ChatHub.cs的类，继承自Hub：
using Microsoft.AspNetCore.SignalR;
using System;
using System.Threading.Tasks;

public class ChatHub : Hub
{
    public async Task Send(string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", message);
    }
}
  1. 在Startup.cs中，注册ChatHub：
public void ConfigureServices(IServiceCollection services)
{
    services.AddSignalR();
    services.AddSingleton<WebSocketManager>();
}
  1. 在Startup.cs中，配置路由：
public void Configure(IApplicationBuilder app, IWebHostEnvironment env, WebSocketManager webSocketManager)
{
    app.UseWebSockets();
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapHub<ChatHub>("/chat");
    });
}

五、创建客户端

  1. 在项目中，创建一个名为index.html的HTML文件：
<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Chat</title>
    <script src="https://cdn.jsdelivr.net/npm/@aspnet/signalr@4.0.2/dist/signalr.min.js"></script>
</head>
<body>
    <div id="chat-container">
        <ul id="messages"></ul>
        <input type="text" id="message" />
        <button id="send">Send</button>
    </div>

    <script>
        var connection = new signalR.HubConnectionBuilder().withUrl("/chat").build();

        connection.on("ReceiveMessage", function (message) {
            var messages = document.getElementById("messages");
            var messageElement = document.createElement("li");
            messageElement.textContent = message;
            messages.appendChild(messageElement);
        });

        connection.start().then(function () {
            document.getElementById("send").addEventListener("click", function () {
                var message = document.getElementById("message").value;
                connection.invoke("Send", message).catch(function (err) {
                    return console.error(err.toString());
                });
            });
        });
    </script>
</body>
</html>
  1. 在项目中，创建一个名为wwwroot的文件夹，并将index.html文件放入其中。

六、运行项目

  1. 打开Visual Studio，按F5运行项目。
  2. 在浏览器中打开http://localhost:5000，你应该能看到一个聊天界面。
  3. 输入一条消息，点击“Send”按钮，你将看到消息在客户端实时显示。

七、总结

本文详细介绍了如何使用Asp.Net实现WebSocket，并通过WebSocket传递字符串参数。希望本文能帮助你更好地理解WebSocket在Asp.Net中的应用。

-- 展开阅读全文 --