博客 (30)

ASP.NET 10 网站在 VS 中运行正常,发布到 IIS 后,某个页面打开报 500 错误,在 Action 中整个套上 try-catch 捕获不到错误,怎么才能查看这个异常原因?

最直接的方法是:在 Windows 中打开“事件查看器”,导航到“Windows 日志” -> “应用程序”,查找来源为 IIS AspNetCore Module、.NET Runtime 或 IIS Express AspNetCore Module 的错误事件。

当然你也可以在 IIS 管理器中配置对应网站的错误页,或在 Program.cs 中启用了开发者异常页面,但是非常不建议在开发环境中开启这些。

xoyozo 3 个月前
407

以下是 Spectre.Console 的核心功能示例,涵盖最常用的输出和交互场景:


1. 基础富文本输出

image.png

using Spectre.Console;

// 使用 Markup 语法(类似 BBCode)
AnsiConsole.Markup("[bold green]成功![/] 文件已保存。\n");
AnsiConsole.Markup("[red]错误:[/] 无法连接到服务器。\n");

// 混合样式
AnsiConsole.Markup("[underline blue]https://example.com[/]\n");

// 自动换行写
AnsiConsole.Write(new Panel("[yellow]警告[/] 磁盘空间不足")
    .Header("系统通知")
    .Border(BoxBorder.Rounded));


2. 表格

image.png

var table = new Table();
table.AddColumn("[u]ID[/]");
table.AddColumn(new TableColumn("[u]名称[/]").Centered());
table.AddColumn("[u]状态[/]");

table.AddRow("1", "订单服务", "[green]运行中[/]");
table.AddRow("2", "支付网关", "[red]离线[/]");
table.AddRow("3", "消息队列", "[yellow]警告[/]");

AnsiConsole.Write(table);


3. 进度条 / 状态指示

image.pngimage.png

// 带进度条的循环任务
await AnsiConsole.Progress()
    .StartAsync(async ctx =>
    {
        var task1 = ctx.AddTask("[green]下载文件[/]", maxValue: 100);
        var task2 = ctx.AddTask("[green]处理数据[/]", maxValue: 100);

        while (!ctx.IsFinished)
        {
            task1.Increment(1.5);
            task2.Increment(0.8);
            await Task.Delay(50);
        }
    });

// 不确定时长的旋转状态
await AnsiConsole.Status()
    .StartAsync("正在连接...", async ctx =>
    {
        await Task.Delay(3000); // 模拟工作
        AnsiConsole.MarkupLine("[green]连接成功![/]");
    });


4. 交互式提示

image.png

// 确认
if (AnsiConsole.Confirm("是否继续安装?"))
{
    // 执行安装
}

// 文本输入(带验证)
var name = AnsiConsole.Prompt(
    new TextPrompt<string>("请输入用户名:")
        .ValidationErrorMessage("[red]用户名不能为空[/]")
        .Validate(input => !string.IsNullOrWhiteSpace(input)));

// 选择列表
var fruit = AnsiConsole.Prompt(
    new SelectionPrompt<string>()
        .Title("请选择最喜欢的水果")
        .AddChoices(new[] { "苹果", "香蕉", "橙子", "葡萄" }));

AnsiConsole.MarkupLine($"你选择了:[green]{fruit}[/]");

// 多选
var colors = AnsiConsole.Prompt(
    new MultiSelectionPrompt<string>()
        .Title("请选择颜色")
        .AddChoices(new[] { "红色", "绿色", "蓝色", "黄色" }));


5. 树形结构

image.png

var root = new Tree("[yellow]项目结构[/]");
var src = root.AddNode("src");
src.AddNode("Program.cs");
src.AddNode("Services");
src.AddNode("Models");

var tests = root.AddNode("tests");
tests.AddNode("UnitTests");

AnsiConsole.Write(root);


6. 布局 / 网格

image.png

var layout = new Layout("Root")
    .SplitColumns(
        new Layout("Left").Size(30),
        new Layout("Right")
            .SplitRows(
                new Layout("Top"),
                new Layout("Bottom")));

layout["Left"].Update(new Panel("导航栏"));
layout["Top"].Update(new Panel("主内容区"));
layout["Bottom"].Update(new Panel("日志输出"));

AnsiConsole.Write(layout);


7. 实时更新

image.png

var table = new Table().AddColumn("Time").AddColumn("Message");
table.AddRow("10:00", "系统启动");

await AnsiConsole.Live(table)
    .StartAsync(async ctx =>
    {
        for (int i = 1; i <= 5; i++)
        {
            await Task.Delay(1000);
            table.AddRow($"10:0{i}", $"事件 {i}");
            ctx.Refresh(); // 刷新显示
        }
    });


8. 带样式的异常显示

image.png

try
{
    throw new InvalidOperationException("操作失败");
}
catch (Exception ex)
{
    AnsiConsole.WriteException(ex, ExceptionFormats.ShortenPaths);
}


9. 日历

image.png

var calendar = new Calendar(2026, 4);
calendar.AddCalendarEvent(2026, 4, 22); // 标记日期
calendar.HighlightStyle(Style.Parse("yellow bold"));
AnsiConsole.Write(calendar);


10. 条形图 / 柱状图

image.png

AnsiConsole.Write(new BarChart()
    .Width(60)
    .Label("[green bold]项目进度[/]")
    .CenterLabel()
    .AddItem("后端", 80, Color.Green)
    .AddItem("前端", 65, Color.Blue)
    .AddItem("测试", 40, Color.Red));


11. 分解图

image.png

AnsiConsole.Write(new BreakdownChart()
    .Width(60)
    .AddItem("CPU", 45, Color.Red)
    .AddItem("内存", 30, Color.Blue)
    .AddItem("磁盘", 25, Color.Green));


12. 规则线

image.png

AnsiConsole.Write(new Rule("[red]警告区域[/]").RuleStyle("red").LeftJustified());
AnsiConsole.WriteLine("内容");
AnsiConsole.Write(new Rule().RuleStyle("green"));


13. 文本样式

image.png

// 大字标题
AnsiConsole.Write(new FigletText("Hello").Color(Color.Green));
// Emoji
AnsiConsole.Markup(":check_mark_button: 成功 :cross_mark: 失败");


14. 网格

image.png

var grid = new Grid();
grid.AddColumn(new GridColumn().NoWrap().PadRight(4));
grid.AddColumn();

grid.AddRow("[b]名称[/]", "Spectre.Console");
grid.AddRow("[b]版本[/]", "0.49.1");
grid.AddRow("[b]许可[/]", "MIT");

AnsiConsole.Write(grid);






xoyozo 5 个月前
734

在 Linux 上运行 .NET 网站,通过

HttpContext.Connection.RemoteIpAddress

获取客户端的 IP 地址,结果是

::ffff:127.0.0.1

解决方法:

打开 Program.cs 文件,在 var app = builder.Build(); 之前(尽量往前)添加以下代码:

if (OperatingSystem.IsLinux())
{
    builder.Services.Configure<ForwardedHeadersOptions>(options =>
    {
        options.ForwardedHeaders = ForwardedHeaders.XForwardedFor
                                    | ForwardedHeaders.XForwardedProto
                                    | ForwardedHeaders.XForwardedHost;

        // 清除 KnownNetworks 和 KnownProxies,表示信任来自本机的代理(如 Nginx)
        options.KnownNetworks.Clear();
        options.KnownProxies.Clear();
    });

    Console.WriteLine("ForwardedHeaders enabled (Running on Linux)");
}

然后在 app.UseRouting(); 之前添加以下代码:

if (OperatingSystem.IsLinux())
{
    app.UseForwardedHeaders();
    Console.WriteLine("UseForwardedHeaders() applied.");
}

其中,OperatingSystem.IsLinux() 用于判断只在 Linux 环境中生效,你可以视自身情况作判断。

xoyozo 1 年前
4,659

AutoUpdater.NET 是一个开源库,专为 .NET 桌面应用程序设计,支持 Windows Forms 和 WPF 应用。它通过从服务器获取 XML 文件来检测新版本信息,当发现新版本时向用户显示更新对话框。

相对于 ClickOnce,AutoUpdater.NET 的配置更简单一些。

首先通过 NuGet 包管理器安装 Autoupdater.NET.Official,然后在应用程序入口点添加以下代码:

AutoUpdater.Start("http://yourserver.com/path/to/update.xml");

XML 文件结构如下:

<?xml version="1.0" encoding="UTF-8"?>
<item>
  <version>2.0.0.0</version> <!--必填:最新版本号-->
  <url>http://yourserver.com/path/to/updatefile.zip</url> <!--必填:更新文件下载地址-->
  <changelog>http://yourserver.com/path/to/changelog.txt</changelog> <!--可选:更新日志-->
  <mandatory>False</mandatory> <!--可选:是否强制更新-->
</item>

Windows Forms 在 Program.cs 文件的 Main() 方法中,WPF 在 App.xaml.cs 的 OnStartup() 中添加:

AutoUpdater.Start("http://yourserver.com/path/to/update.xml");
AutoUpdater.CheckForUpdateEvent += (e) =>
{
    if (e.Error != null)
    {
        MessageBox.Show($"检查版本更新失败:{e.Error.Message}");
    }
    if (e.IsUpdateAvailable)
    {
        if (e.Mandatory.Value)
        {
            // 强制更新
            AutoUpdater.DownloadUpdate(e);
        }
        else
        {
            // 可选更新
            if (MessageBox.Show("发现新版本,是否立即更新?", "更新提示", MessageBoxButtons.YesNo, MessageBoxIcon.Information) == DialogResult.Yes)
            {
                AutoUpdater.DownloadUpdate(e);
            }
        }
    }
};

这样就能简单实现打开应用时判断是否有更新。具体用法参:GitHub

对于控制台应用程序,AutoUpdater.NET 并不直接支持。可以使用 GeneralUpdate 等轻量级自动更新库。

其它:

  • 若希望通过标准安装流程(如添加到开始菜单),优先选择 ClickOnce,适合长期维护的内部工具。

  • 若追求快速集成和无感更新,AutoUpdater.NET 更灵活。

  • 无论哪种方案,务必对程序进行代码签名(如购买企业证书或生成测试证书),否则系统可能拦截安装。(你要允许来自未知发布者的此应用对你的设备进行更改吗)

  • 可以购买“OV 代码签名”证书或“EV 代码签名”证书,注意:“代码签名证书”与“域名证书”互不通用。

xoyozo 1 年前
7,823

安装 PyPI(包/库/组件):

pip install 包名

如果安装失败,尝试用国内镜像

pip install 包名 -i https://pypi.tuna.tsinghua.edu.cn/simple

如果不想每次都加 -i 参数,可以更改全局配置

pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple


查看所有配置

pip config list


查看 python 文件路径

# Windows 或 Linux 通用
python -c "import sys; print(sys.executable)"

默认路径为:C:\Users\<user name>\AppData\Local\Programs\Python\Python<version>\python.exe


常用组件介绍

包名介绍
Flask一款基于 Python 的轻量级 Web 开发框架
Django一款基于 Python 的重量级 Web 开发框架
Pandas一个数据分析包,提供 Series、Time-Series、DataFrame、Panel、Panel4D、PanelND 等数据结构


更多

xoyozo 1 年前
1,901

以下列出本人所遇到的情况及处理方法,肯定不全,但都有用。

  1. 使用系统自带清理工具进行清理

    Windows 7 / 8 / 8.1 / 10:在 C 盘上点击右键属性 - 磁盘清理 - 清理系统文件 - 视情况勾选 - 确定

    Windows 11:在 C 盘上点击右键属性 - 详细信息 - 临时文件 - 视情况勾选 - 确定

  2. 关闭“传递优化”

    设置 - Windowx 更新 - 高级选项 - 传递优化,关闭“允许从其他设备下载”

    其实前面说到的清理临时文件中已经包含了“传递优化文件”,所以这里按个人喜好选择是否关闭。

  3. 更改虚拟内存路径

    可以将虚拟内存路径更改为非系统盘,但建议是固态硬盘。

  4. 关闭系统还原

    当遇到系统问题时,如果你喜欢重装系统,而不是系统还原,那么可以关闭它。

  5. 更改桌面、文档、下载等用户文件夹的位置

    将这些目录路径更改到非系统,但仍然建议是固态硬盘。以 Windows 11 的桌面目录为例:

    打开资源管理器 - 主文件夹,右键点击“桌面”属性,切换到“位置”,移动。

  6. 将软件安装到其它盘

    有些电脑管理软件有软件迁移功能,但我还是建议先卸载软件,再安装到其它盘符。

  7. 将软件文档路径更改到其它盘

    如果不想把软件安装到其它盘(譬如只有C盘是固态硬盘),那么可以将文档路径更改到其它盘,譬如:

    微信:☰ - 设置 - 文件管理 - 更改

    QQ:☰ - 设置 - 存储管理 - 更改存储路径(注意是聊天消息那个)

    企业微信:头像 - 设置 - 存储管理

    钉钉:头像 - 设置与隐私 - 通用 - 缓存目录

    千牛:设置 - 数据存储文件夹

  8. 清理浏览器缓存

    Chrome:┇ - 设置 - 隐私与安全 - 删除浏览数据

    Edge:… - 设置 - 隐私、搜索和服务 - 删除浏览记录 - 选择要清除的内容

    Firefox:☰ - 设置 - 隐私与安全 - 历史记录 - 清除历史记录

  9. VMware 虚拟机

    在已安装的镜像上点击右键 - 管理 - 清理磁盘

    把已安装的镜像复制到其它磁盘,再添加到 VMware 中,删除原镜像文件。

  10. 更改 Navicat 数据库备份目录

    如果你的 Navicat 启用了自动运行的备份任务,那么可以更改备份路径。

    在连接上点击右键编辑连接,切换到高级,更改设置位置。

  11. SQL Server 数据库文件瘦身

    若 SQL Server 数据目录(C:\Program Files\Microsoft SQL Server\MSSQL16.MSSQLSERVER\MSSQL\DATA)中有很多较大的数据库日志文件(.ldf),可以按需采取以下措施:

    使用 SSMS 连接到你的 SQL Server 实例;数据库恢复模式设置为“简单”;右键点击要压缩的数据库,选择“任务”->“收缩”->“文件”,选择“日志”,在“释放未使用的空间前重新组织页”一项中设置为 0MB,然后点击“确定”按钮。

最后推荐一款免费软件 TreeSize Free,可以查看磁盘中各目录和文件占用空间大小,小白不要乱删文件哦,删错了可就得重装系统了。

xoyozo 2 年前
2,565

前几天实现了在 nginx 中使用 lua 实现远程鉴权,今天想试试在 IIS 中能不能实现相同的功能。查询资料发现需要使用 URL 重写和 HTTP 请求模块,没有深究。干脆使用 ASP.NET 中间件来实现吧。

在 StratUp.cs 的 Configure 方法中,或 Program.cs 文件中添加以下代码:

// 远程鉴权
app.Use(async (context, next) =>
{
    var ip = context.Connection.RemoteIpAddress!.ToString();
    var ua = context.Request.Headers.UserAgent.ToString();
    var host = context.Request.Host.Host;
    var uri = new Uri(context.Request.GetDisplayUrl()).PathAndQuery;

    var client = new HttpClient();
    client.Timeout = TimeSpan.FromSeconds(1); // 设置超时时间

    try
    {
        var requestUrl = "https://鉴权地址/";

        var requestMessage = new HttpRequestMessage(HttpMethod.Get, requestUrl);
        requestMessage.Headers.Add("X-Real-IP", ip);
        requestMessage.Headers.Add("User-Agent", ua);
        requestMessage.Headers.Add("X-Forwarded-Host", host);
        requestMessage.Headers.Add("X-Forwarded-Uri", uri);

        // 发送请求
        var response = await client.SendAsync(requestMessage);

        // 检查响应状态码
        if (response.StatusCode == HttpStatusCode.Forbidden)
        {
            // 如果返回403,则拒绝访问
            context.Response.StatusCode = (int)HttpStatusCode.Forbidden;
            await context.Response.WriteAsync("Access Denied");
        }
        else
        {
            // 如果返回其他状态码,则继续执行管道中的下一个中间件
            await next();
        }
    }
    catch (TaskCanceledException ex) when (ex.CancellationToken.IsCancellationRequested)
    {
        // 如果请求超时(任务被取消),则继续执行管道中的下一个中间件
        await next();
    }
    catch
    {
        // 如果遇到错误,则继续执行管道中的下一个中间件
        await next();
    }
});

代码很简单,使用 HttpClient 发送请求,若返回 403 则拒绝访问,其它情况继续执行业务逻辑,超时或报错的情况按需修改即可。

若鉴权接口在私网中,建议将鉴权接口域名和私网 IP 添加到 hosts 文件中。

xoyozo 2 年前
1,496

SignalR 是一个开源的实时通信库,用于构建实时 Web 应用程序。它提供了一个简单的 API,可以在客户端和服务器之间建立持久连接,以便实时地推送数据。

与传统的 WebSocket 相比,SignalR 提供了更高级的功能和更简单的开发体验。下面是一些主要区别:

  • 支持多种传输方式:SignalR 可以使用多种传输方式,包括 WebSocket、Server-Sent Events(SSE)、长轮询和 Forever Frame。这使得 SignalR 在不同的环境中都能提供实时通信的能力,即使某些浏览器不支持 WebSocket,也可以使用其他传输方式。

  • 自动处理连接管理:SignalR 管理连接的生命周期,包括连接的建立、断开和重新连接。它会自动处理连接的失败和重新连接的逻辑,简化了开发人员的工作。

  • 服务器端推送:SignalR 允许服务器端主动推送消息给客户端,而不需要客户端发起请求。这使得实时通信变得更加高效和实时,适用于聊天应用、实时监控等场景。

  • 跨平台支持:SignalR 可以在多个平台上使用,包括 .NET、Java、JavaScript 等。这使得开发人员可以使用自己熟悉的语言和框架来构建实时应用程序。


微软官方提供了针对 ASP.NET Core Web 应用(Razor 页面)的详细教程,这里给出 MVC 版本入门教程。


最终将创建一个正常运行的聊天应用:

signalr-get-started-finished.png


创建 Web 应用项目

image.png

image.png


添加 SignalR 客户端库

在“解决方案资源管理器”>中,右键单击项目,然后选择“添加”“客户端库”。

在“添加客户端库”对话框中:

  • “提供程序”选择“unpkg”

  • “库”,请输入 @microsoft/signalr@latest。

  • 选择“选择特定文件”,展开“dist/browser”文件夹,然后选择 signalr.js 和 signalr.min.js。

  • 点击“安装” 。

image.png


创建 SignalR Hubs 类

using Microsoft.AspNetCore.SignalR;

/// <summary>
/// Hub 类管理连接、组和消息
/// </summary>
public class ChatHub : Hub
{
        /// <summary>
        /// 可通过已连接客户端调用 SendMessage,以向所有客户端发送消息
        /// </summary>
    public async Task SendMessage(string user, string message)
    {
        // Clients.All 向所有的客户端发送消息
        // ReceiveMessage 是客户端监听的方法
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

其父类 Hub 可管理连接、组和消息。这里演示的是向所有客户端发送消息。


配置 SignalR

打开 Program.cs,添加注入:

builder.Services.AddSignalR();

添加路由:

app.MapHub<ChatHub>("/chatHub");


添加 SignalR 客户端代码

视图页面:

<div class="container">
    <div class="row p-1">
        <div class="col-1">用户</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">消息</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="发送消息" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>
<script src="~/js/chat.js"></script>

chat.js 文件:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

// 在连接建立之前禁用发送按钮
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // 修改此处时应注意脚本注入问题
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});


完成。在线示例:https://xoyozo.net/Demo/SignalRDemo






xoyozo 3 年前
3,573

推荐使用 SignalR 来平替 WebSocket,参考教程。


【服务端(.NET)】

一、创建 WebSocketHandler 类,用于处理客户端发送过来的消息,并分发到其它客户端

public class WebSocketHandler
{
    private static List<WebSocket> connectedClients = [];

    public static async Task Handle(WebSocket webSocket)
    {
        connectedClients.Add(webSocket);

        byte[] buffer = new byte[1024];
        WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        while (!result.CloseStatus.HasValue)
        {
            string message = Encoding.UTF8.GetString(buffer, 0, result.Count);
            Console.WriteLine($"Received message: {message}");

            // 处理接收到的消息,例如广播给其他客户端
            await BroadcastMessage(message, webSocket);

            result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
        }

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

    private static async Task BroadcastMessage(string message, WebSocket sender)
    {
        foreach (var client in connectedClients)
        {
            if (client != sender && client.State == WebSocketState.Open)
            {
                await client.SendAsync(Encoding.UTF8.GetBytes(message), WebSocketMessageType.Text, true, CancellationToken.None);
            }
        }
    }
}

二、在 Program.cs 或 Startup.cs 中插入:

// 添加 WebSocket 路由
app.UseWebSockets();
app.Use(async (context, next) =>
{
    if (context.Request.Path == "/chat")
    {
        if (context.WebSockets.IsWebSocketRequest)
        {
            WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
            await WebSocketHandler.Handle(webSocket);
        }
        else
        {
            context.Response.StatusCode = 400;
        }
    }
    else
    {
        await next();
    }
});

这里的路由路径可以更改,此处将会创建一个 WebSocket 连接,并将其传递给 WebSocketHandler.Handle 方法进行处理。

也可以用控制器来接收 WebSocket 消息。


【客户端(JS)】

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>WebSocket 示例(JS + ASP.NET)</title>
    <style>
        #list { width: 100%; max-width: 500px; }
        .tip { color: red; }
    </style>
</head>
<body>
    <h2>WebSocket 示例(JS + ASP.NET)</h2>
    <textarea id="list" readonly rows="20"></textarea>
    <div>
        <input type="text" id="msg" />
        <button onclick="fn_send()">发送</button>
        <button onclick="fn_disconnect()">断开</button>
    </div>
    <p id="tip_required">请输入要发送的内容</p>
    <p id="tip_closed">WebSocket 连接未建立</p>

    <script>
        var wsUrl = "wss://" + window.location.hostname + ":" + window.location.port + "/chat";
        var webSocket;
        var domList = document.getElementById('list');

        // 初始化 WebSocket 并连接
        function fn_ConnectWebSocket() {
            webSocket = new WebSocket(wsUrl);

            // 向服务端发送连接请求
            webSocket.onopen = function (event) {
                var content = domList.value;
                content += "[ WebSocket 连接已建立 ]" + '\r\n';
                domList.innerHTML = content;

                document.getElementById('tip_closed').style.display = 'none';

                webSocket.send(JSON.stringify({
                    msg: 'Hello'
                }));
            };

            // 接收服务端发送的消息
            webSocket.onmessage = function (event) {
                if (event.data) {
                    var content = domList.value;
                    content += event.data + '\r\n';
                    domList.innerHTML = content;
                    domList.scrollTop = domList.scrollHeight;
                }
            };

            // 各种情况导致的连接关闭或失败
            webSocket.onclose = function (event) {
                var content = domList.value;
                content += "[ WebSocket 连接已关闭,3 秒后自动重连 ]" + '\r\n';
                domList.innerHTML = content;

                document.getElementById('tip_closed').style.display = 'block';

                setTimeout(function () {
                    var content = domList.value;
                    content += "[ 正在重连... ]" + '\r\n';
                    domList.innerHTML = content;
                    fn_ConnectWebSocket();
                }, 3000); // 3 秒后重连
            };
        }

        // 检查连接状态
        function fn_IsWebSocketConnected() {
            if (webSocket.readyState === WebSocket.OPEN) {
                document.getElementById('tip_closed').style.display = 'none';
                return true;
            } else {
                document.getElementById('tip_closed').style.display = 'block';
                return false;
            }
        }

        // 发送内容
        function fn_send() {
            if (fn_IsWebSocketConnected()) {
                var message = document.getElementById('msg').value;
                document.getElementById('tip_required').style.display = message ? 'none' : 'block';
                if (message) {
                    webSocket.send(JSON.stringify({
                        msg: message
                    }));
                }
            }
        }

        // 断开连接
        function fn_disconnect() {
            if (fn_IsWebSocketConnected()) {
                // 部分浏览器调用 close() 方法关闭 WebSocket 时不支持传参
                // webSocket.close(001, "Reason");
                webSocket.close();
            }
        }

        // 执行连接
        fn_ConnectWebSocket();
    </script>
</body>
</html>


【在线示例】

https://xoyozo.net/Demo/JsNetWebSocket


【其它】

  • 服务端以 IIS 作为 Web 服务器,那么需要安装 WebSocket 协议

  • 一个连接对应一个客户端(即 JS 中的 WebSocket 对象),注意与会话 Session 的区别

  • 在实际项目中使用应考虑兼容性问题

  • 程序设计应避免 XSS、CSRF 等安全隐患

  • 参考文档:https://learn.microsoft.com/zh-cn/aspnet/core/fundamentals/websockets

xoyozo 3 年前
2,187

本文图片基于网络图片更新,如有侵权,请通过网站底部联系站长删除。

本文内容来源于网络,如有错误欢迎批评指正。


USB 接口类型

USB 接口有 Mini、Micro、Type 三种外观。

  • 通常说的 USB-C 一般指 USB Type-C,因为没有 Mini-C 和 Micro-C。而 USB-A / USB-B 一般也特指 Type-A / Type-B。


数据传输能力

USB 标准(附 Thunderbolt)

规格别名接口类型理论带宽电力规格
备注
USB 1.0Low-Speed

Mini A / B

Micro A / B 2.0

Type A / B 2.0

1.5 Mbps5V/0.5A
USB 1.1Full-Speed12 Mbps5V/0.5A
USB 2.0

Hi-Speed

High Speed

Mini A / B

Micro A / B 2.0

Type A 2.0 / B 2.0 / C

480 Mbps5V/0.5A

USB 3.0

USB 3.1 Gen 1

USB 3.2 Gen 1

SuperSpeed

Micro B 3.0

Type A 3.x / B 3.x / C

5 Gbps

5V/0.9A

PD2.0 100W


USB 3.1

USB 3.1 Gen 2

USB 3.2 Gen 2

SuperSpeed+

Micro B 3.0

Type A 3.x / B 3.x / C

10 Gbps

5V/0.9A

PD2.0 100W


USB 3.2

USB 3.2 Gen 2×2

SuperSpeed 20GbpsType-C20 GbpsPD2.0 100W

USB4 Gen 2×2

USB4 20Gbps

Type-C20 Gbps

PD3.0 100W

PD3.1 240W

兼容 Thunderbolt 3
USB4 Gen 3×2USB4 40GbpsType-C40 Gbps
USB4 2.0USB4 80GbpsType-C80 Gbps

Thunderbolt 1雷雳1、雷电1Mini DisplayPort10 Gbps

Thunderbolt 2雷雳2、雷电2Mini DisplayPort20 Gbps

Thunderbolt 3雷雳3、雷电3Type-C40 Gbps

配件供电 15W

PD 100W

兼容 USB4
Thunderbolt 4雷雳4、雷电4Type-C40 Gbps

配件供电 15W

PD 100W

兼容 Thunderbolt 3
Thunderbolt 5
雷雳5、雷电5Type-C

80Gpb

(带宽增强 120Gpbs)

240WUSB4 V2、DisplayPort 2.1 和 PCI Express Gen 4

数据参考


电力传输能力

常见快充协议

协议版本发布年份区别接口形态

BC

(Battery Charging Specification)

1.22010 年7.5W(5V/1.5A)

高通 QC

(Qualcomm Quick Charge)

1.02013 年
10W(5V/2A)Micro-USB
2.02014 年

Class A:5V、9V、12V 电压可选,最大输出功率为 18W?

Class B:5V、9V、12V、20V  电压可选,最大输出功率为 60W

Micro-USB / Type-A
3.02015 年Class A:3.6-12V,Class B:3.6-20V,支持动态调整电压和电流,最大输出功率为 18W?Micro-USB / Type-A / Type-C
4.02017 年5V/5.6A 或 9V/3A,最大输出功率为 28W?,兼容了 USB PD 2.0 / PD 3.0 PPS?Type-C
4+2019 年最大输出功率为 100W?,支持 PPS 协议?兼容 QC2.0~QC3.0Type-C
5.02020 年最大输出功率 > 100W,兼容 QC2.0~QC4+Type-C

USB-PD

(USB Power Delivery)

1.02012 年5V、12V、20V 电压可选,最大输出功率为 10WMicro-USB / Type-A / Type-B
2.0
2014 年5V3A、9V3A、15V3A、20V3A、20V5A(E-Marked),最大输出功率为 100WType-C
3.02015 年5V3A、9V3A、15V3A、20V3A、20V5A(E-Marked),最大输出功率为 100WType-C
3.0 PPS2017 年支持 PPS 协议,3.3V-21V 3A-5AType-C
3.12021 年

SPR 最高支持 20V 电压,最大输出功率为 100W

EPR 最高支持 48V 电压,最大输出功率为 240W

Type-C
3.22023年强制 AVS,优化 EPRType-C
  • 华为 SuperCharge(FCP / SCP)、小米 Mi Turbo Charge、OPPO VOOC、vivo FlashCharge、三星 AFC 等私有协议不在此列出。

  • Magsafe 电源适配器 是磁吸式有线充电接口,最大输出功率为 85W(截止2023年),用于 Macbook;

  • Magsafe 充电器 是磁吸式无线充电接口,最大输出功率为 15W(截止2023年),用于 iPhone,不属于快充。

  • Qi 是无线充电协议,Qi1 最大输出功率为 7.5W,Qi2 最大输出功率为 15W。

  • 功率决定充电速度,功率与电压电流的关系:P=U*I,如 5V1A=5W

  • 一条 USB 线由插座/母口(Receptacle)、插头/公口(Plug)和线缆(Cable)三部分组成,要实现某个协议,需要插座和插头都支持该协议。

  • PPS:Programmable Power Supply 可编程电源

  • SPR:Standard Power Range 标准功率范围

  • EPR:Extended Power Range 扩展功率范围

  • FCP:Fast Charge Protocol 华为早期快充协议,支持 18W

  • SCP:Super Charge Protocol 华为超级快充协议,支持 22.5W、40W


xoyozo 3 年前
21,034