博客 (106)

前面写过一篇文章介绍了不买高防 IP，照样抵挡 DDoS 攻击（IP 篇），如果攻击的是域名（CC），那么...

本文适用场景：攻击的是 web 网址而非 IP，来源有许多各地的 IP 地址，每个 IP 地址每小时只有若干请求，但整个网站每分钟有数万请求量。

《小白鼠A》（贵）

阿里云有一款产品叫“Web 应用防火墙”，开通并接入云产品，试用按量付费即可。

在防护配置-Web核心防护 中可配置各种规则，譬如：

“自定义规则”可添加网址/UA/IP/Cookie/等中包含某些关键词的请求；

“区域封禁”可按地区来限制请求；

另外还有“CC防护”等各种实用规则。

添加规则后记得关联实例。

配置完成后可在总览页面查看请求情况，如果攻击停止可关闭防火墙。

试用了12小时，平均每分钟请求2-5万次，消耗 15000SeCU，费用大概是750元。

《小白鼠B》（推荐）

阿里云有一款产品叫“边缘安全加速 ESA”，开通接入域名（注意填写域名时不要写 www）。

创建购买成功后会有一个 CNAME 域名，解析生效。配置 HTTPS 证书。

打开“我正在遭受攻击”，开启后站点进入严格防护模式，默认对所有 HTTP 请求做滑块挑战。这是非常能节省费用的操作，实测开启与不开启的数量相差20倍（具体视攻击强弱）。

另外，ESA 自带的“安全防护-WAF”中若想根据 URL 中包含某个关键词来拒绝请求，需要升级套餐。可以直接在“规则-重定向”设置 302 跳转也能达到类似的效果，但是节省流量的最好办法还是开启滑块。

费用的话，大部费用是由“客户端请求到边缘加速服务器的流量”和“边缘加速服务器响应给客户端的流量”组成的，而且滑块页面不计入流量。可免费试用。

在开启滑块的情况下，1分钟产生10M流量，基础版包含的50GB可以用3天。标准版（500GB）375元可以用一个月。（以我站实测为例，各站情况不同）。

具体费用在“计费管理-套餐管理-套餐总量 (月)-”查看。超过套餐的流量会使用CDN流量包抵扣。

ECS 获取客户端 IP 的问题有两种解决方案，1. 设置四层代理分析（企业版），2. 设置重定向规则，重定向到直接解析到该网站的另一个域名。

为了尽量减少滑块对用户体验的影响，建议加白名单：ESA-站点-安全防护-WAF-白名单规则，譬如添加省份规则，跳过全部规则（包括滑块）。

其它问题：滑块会拒绝蜘蛛？

其它相似产品：Cloudflare、腾讯云 EdgeOne。

----------------下面是停站维护时显示临时页面的做法----------------

被攻击期借用阿里云 OSS/CDN 显示“维护中”页面的方法。

1.

首先让 AI 快速生成一个维护中的页面，上传到 OSS。

虽然这个文件有一个对应的 CDN 链接，但是域名解析使用“显性 URL”模式并不能正常访问到这个页面。

2.

在阿里云 CDN 添加一个域名（也就是网站域名），会生成一个 CNAME 域名，网站域名 CNAME 到这个域名上。

配置这个 CDN 域名的 OSS 实例、HTTPS 等信息。

这样生效后，访问网站域名就能请求到这个 OSS 上了。

3.

但是它并不像网站一样有默认文档，需要添加重写规则。

打开 CDN-域名管理-缓存配置-重写访问URL，添加，添加重写规则。

例：如果目标页面路径是 https://域名/index.html，那么重写规则就是：

^/(?!.*index\.html$).*$

也就是把所有除 /index.html 以外的路径全部重写到 /index.html。

4.

下一步只要观察这个域名的实时流量和带宽，如果攻击停止了，将域名解析回 ECS。

CDN-统计分析-实时监控-访问数据-选择域名-查询。

如果用后端代码实现，必须替换 \r\n、\r、\n 这些换行符为 <br />。

这时，如果前端绑定时是自动编码的，那么 <br /> 会直接显示出来，起不到换行效果。

如果前端绑定时是原文输出的，那么当数据源不可信时会引发 XSS 漏洞。

推荐一个既简单又安全的方法，用前端的 CSS 就能轻松实现：

<div style="white-space: pre-line">内容</div>

原理：CSS 的 white-space: pre-line 属性会保留换行符（\r\n或\n），自动渲染为可视换行，无需修改数据源且无安全风险。

本文仅针对自己遇到的情况进行整理，并不完善，仅供参考。

首先点击这个封禁页面上的“客服指引”，在“微信访问网站被限制的相关问题”页面上找到反馈邮箱 moment@tencent.com，按规定格式给这个邮箱反馈情况，可以咨询具体被封禁的原因和网址等方便处理。几分钟后就能收到回信（即使是周末）。这次被告知是被手机管家拦截，并提供了另一个申述通道：http://gj.qq.com/online_server/complain_url.html。提交网址申述后等待3个工作日。

实际等了1个小时就收到回复了（即使是周末）。

附：在线网址检测：https://urlsec.qq.com/check.html

1. 使 lua 支持 resty.http

2. 在 access_by_lua_block 代码块中实现远程鉴权：

   #鉴权-START
   #resolver 223.5.5.5; # cat /etc/resolv.conf
   access_by_lua_block {
       local http = require("resty.http")
       local httpc = http.new()
       httpc:set_timeout(500)  -- 连接超时
       local res, err = httpc:request_uri("https://鉴权地址/", {
           method = "GET",
           headers = {
               ["X-Real-IP"] = ngx.var.remote_addr,
               ["User-Agent"] = ngx.var.http_user_agent,
               ["X-Forwarded-Host"] = ngx.var.host,
               ["X-Forwarded-Uri"] = ngx.var.request_uri,
           },
           ssl_verify = false, -- 禁用 SSL 验证
           timeout = 500,     -- 读取超时
       })
   
       if not res then
           ngx.log(ngx.ERR, "Failed to request: " .. err)
       end
           
       if res and res.status == 403 then
           ngx.exit(ngx.HTTP_FORBIDDEN)
           -- return ngx.redirect("https://一个显示403友好信息的页面.html")
       end
   }
   #鉴权-END

   注意更改接口地址和友情显示 403 页面地址。

   本示例仅捕获 403 状态码，500、408 等其它异常情况视为允许访问，请根据业务需求自行添加状态码的判断。

   若超时也会进入 if not res then 代码块。

   建议将此代码部署在 nginx 主配置文件的 http 代码块中（宝塔面板中的路径：/www/server/nginx/nginx/conf/nginx.conf），如果你只想为单个网站鉴权，也可以放在网站配置文件的 server 块中。
   

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

附

1. 直接输出字符串

   ngx.header.content_type = "text/plain";
   ngx.say("hello world!")

2. 输出到日志

   ngx.log(ngx.ERR, "Response status: " .. res.status)

   日志在网站的 站名.error.log 中查看。

   宝塔面板查看方式：日志 - 网站日志 - 异常

3. 若想获取服务器 CPU 使用率等信息并传递给远程鉴权接口，请参考此文。

4. 常见问题

   no resolver defined to resolve

   原因：没有定义 DNS 解析器

   解决方法：在 http 块或 server 块中添加 resolver 8.8.8.8 valid=30s;，推荐使用接入商自己的公共 DNS，如果走内网，推荐使用本机 DNS。

   unable to get local issuer certificate

   原因：没有配置 SSL 证书信息

   解决方法：添加 request_uri 参数：

   ssl_verify = true,  -- 启用 SSL 验证
   ssl_trusted_certificate = "证书路径",  -- 指定 CA 证书路径

   或

   ssl_verify = false,  -- 禁用 SSL 验证

5. 若您不想用 lua，可以用 nginx 原生自带的  auth_request 模块来实现。

鉴权方式有许多，譬如可以用 lua 的 access_by_lua 来实现，这里用 nginx 自带的 auth_request，虽然功能简单，但效率更高。

第一步，确保 nginx 已编译安装 auth_request 模块，见此文。

第二步，打开需要鉴权的网站的 nginx 配置文件，添加以下代码块：

    #鉴权-START
    location / {
        auth_request /auth;
        error_page 403 = @error403;
        
        #PHP-INFO-START  PHP引用配置，可以注释或修改
        include enable-php-**.conf;
        #PHP-INFO-END
    }
    location = /auth {
        internal;
        proxy_pass https://鉴权地址;
        proxy_pass_request_body off;
        proxy_set_header Content-Length "";
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header User-Agent $http_user_agent;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Uri $request_uri;
        proxy_intercept_errors on;
        #proxy_read_timeout 1s; # 超时会报 500
    }
    location @error403 {
        #default_type text/plain;
        #return 403 'forbidden';
        return 302 https://一个显示403友好信息的页面.html;
    }
    #鉴权-END

一般放在所有的 location 之前。

这里自定义请求头 X-Forwarded-Host 与 X-Forwarded-Uri 用来传递 host 与 uri。API 应从 Header 中相应取值。

宝塔面板中是通过 include enable-php-**.conf; 的方式调用 PHP ，那么可以将此行移入上面的 location / 代码块中，因为此代码块能匹配所有的请求路径。

最后，若鉴权接口在私网中，将鉴权接口域名和私网 IP 添加到 hosts 文件中。

本文记录于 2024 年 11 月。

版本选择原因：

• Discuz! X5 刚刚发布，生态尚未成熟，考虑到是老论坛升级，所以选择 X3.5。

• Discuz! X3.5 目前最高支持 PHP 8.2、MySQL 8.0。

完整升级步骤：

1. 购买新的 ECS、PolarDB，具体环境配置步骤参此文；

2. 安装宝塔面板并配置；

3. 安装 nginx 及 PHP；

4. 创建网站、配置 SSL、伪静态、防盗链、可写目录禁执行、仅允许部分入口文件执行等（.conf）；

5. 配置 hosts；

6. 如果是正式升级阶段，关闭论坛，防止产生新数据。

7. 备份原网站程序、PolarDB 数据库；

8. PolarDB 创建快照。

   测试阶段：从快照还原到新实例（MySQL 5.6 不能直接恢复到 MySQL 8.0），然后从 5.6 迁移到 8.0.x；

   正式阶段：全量模式直接从原实例迁移到 8.0.x，若增量模式且存在触发器，建议从快照还原；
   

9. 上传原网站程序到新的站点目录下；

10. 按 Discuz! X 升级文档升级 X3.4 至 X3.5；详情见下文 ↓；

11. 升级完成后切换到 PHP 8；
    

12. 配置 OSS、Redis、更新缓存等；

13. 测试论坛基本功能是否正常；检查附件是否能够正常上传；检查附件是否正常显示；全面检查控制台配置；

14. 逐个开启插件并检查兼容性（短信通、马甲引擎等）；

15. 按二开备忘录逐个按需进行二开；

16. 逐个修改调用论坛接口的项目及直接调用论坛数据库的项目；

17. 调试 MAGAPP 接口；

18. 尝试强制 https 访问；
    

19. 将以上所有修改后的程序保留备份；发布升级公告并关闭论坛；重复以上步骤；修改域名解析；开启论坛；
    

20. 配置 IP 封禁、定时器、日志、自动备份、配置其它 ECS 的 hosts 等；

21. 查看搜索引擎中收录的地址，是否有无法访问的情况；
    

22. 尝试将历史遗留的本地附件全部转移到 OSS；

23. 建议 在新服上创建 3 个网站：

1. 第 1 个用来尝试迁移、升级、二开，并测试所有功能；

2. 第 2 个用来再次重复这些步骤，最终保留程序代码及 UGC 文件，作为最终的网站程序，以正式域名作为网站根目录路径；

3. 第 3 个用来正式升级，主要功能是升级最新数据库。完成后修改第 2 个网站的数据库连接指向到最新的数据库，差异化同步新增的 UGC 文件到第 2 个网站。

Discuz! X 升级步骤及注意点：

• 因 PolarDB MySQL 不支持压缩，所以应移除 Discuz! 和 UCenter 代码中所有的 MYSQLI_CLIENT_COMPRESS，将 , MYSQLI_CLIENT_COMPRESS 替换为 /*, MYSQLI_CLIENT_COMPRESS*/。

• 升级前务必先修改 ./config/ 目录下的数据库/缓存连接信息，以防出现新站连接老库的情况；

• 按官方文档进行升级，升级前先修改一下：

• 【UC】先升级 UCenter 1.6 至 1.7。

  将 /uc_server/data 权限改为 777 并递归。

  打开 update_ucenter_adult.php 修改 $limit 值为 10000 以免执行超时。

  因通信失败的“发送通知失败”可以直接改 URL 参数跳过就完成了，原因可能是因数据量大，发送改名通知执行改名时超时。等DZ升级完成后UC会自动重试改名通知，或单独写个 php 文件将 UCenter 的用户名同步到应用的数据库。
  

• 【DZ】运行到 /install/update_adult.php?step=innodb&table=pre_common_member_grouppm 时报错：Duplicate key name 'gpmid' ALTER TABLE common_member_grouppm ADD INDEX gpmid(gpmid);

  解决方法：先删除索引，因保存时提示失败，应同时取消 gpmid 字段的自增，转换成功后再设置自增。
  

• 【DZ】运行到 /install/update_adult.php?step=file 一片空白而停止

  正在解决
  

• 【问题】common_menber 表用户名字段编码转换失败

  原因是部分用户名包含特殊字符（如全角空格），用以下语句查看两个表同一 uid 的不同用户：

  SELECT 
      u.uid, 
      u.username AS ucenter_username, 
      c.username AS common_username
  FROM 
      pre_ucenter_members u
  JOIN 
      pre_common_member c ON u.uid = c.uid
  WHERE 
      u.username <> c.username

  Discuz! 用户登录都是以 UCenter 中的用户名为主，所以可以写个小程序直接将 pre_ucenter_members 的用户名同步到 pre_common_member 中，另外 pre_ucenter_members 的用户数少于 pre_common_member 是正常的。若 pre_common_member_archive 表遇到错误同理。

• 如果用户登录慢，或打开 UCenter 慢，是因为 UC 正在通知 DZ 改用户名，每次打开一个页面会更改一个用户名，具体可以查看 pre_ucenter_notelist 中 closed 为 0 的队列，或进入 UC 后台-数据列表-通知列表 查看。

• 【问题】发布主题遇到错误：(1062) Duplicate entry '*' for key 'pid'

  【原因】forum_post 中的 pid 不是自动增长的，而是由表 forum_post_tableid 中自动增长的 pid 生成的。如果生成的 pid 值已在 forum_post 表中存在，则会出现此错误。

• 【解决】迁移数据库时应关闭论坛，以防止 forum_post 表有新数据插入。

• 【问题】打开帖子页面 ./thread-***-1-1.html 显示 404 Not Found，而 ./forum.php?mod=viewthread&tid=*** 可以正常打开

  【原因】未配置伪静态（可在宝塔面板中选择）

• 【问题】打开 UCenter 时报错：UCenter info: MySQL Query Error SQL:SELECT value FROM [Table]vars WHERE name='noteexists'

  【解决】打开文件 ./uc_server/data/config.inc.php 配置数据库连接

• 【问题】打开登录 UCenter 后一片空白

  【解决】将目录 ./uc_server/data/ 设为可写

• 需要将原来安装的插件文件移回 ./source/plugin/ 目录，并设置可写；

• 界面-表情管理，界面-编辑器设置-Discuz!代码

后续 Discuz! X3.5 小版本升级注意事项：

1. 确认插件是否支持新版本（如短信通）

2. 先创建一个新网站测试二开代码

3. 保留 /config/、/data/、/uc_client/data/、/uc_server/data/、/source/plugin/，其它移入 old

4. 上传文件

5. 移回其它需要的文件，如：

6. -- 勋章/loading/logo/nv 等：/static/image/common/

7. -- 表情：/static/image/smiley/

8. -- 水印：/static/image/common/watermark.*

9. -- 风格：/template/default/style/t2/nv.png 等

10. -- 默认头像：/uc_server/images/noavatar_***.gif

11. -- 根目录 favicon.ico 等
    

12. -- 及其它非 DZ 文件

13. 再次检查可写目录的写入权限和禁止运行 PHP 效果。

添加勾子 eventContent：

var myCalendar = new FullCalendar.Calendar(document.getElementById('myCalendar'), {
    eventContent: function (arg) {
        return {
            html: arg.event.title,
        };
    },
});

因 MySQL 8 默认使用 utf8mb4 字符集，如果是从 MySQL 5-7 等低版本迁移的，那么仍然是 utf8（相当于 utf8mb3）。

这在保存字符串时有可能会报错：

An error occurred while saving the entity changes. See the inner exception for details.

Incorrect string value: '\xF0\xA1\x90\x93\xE6\x9D...' for column 'Html' at row 1

即使连接字符串上加上 CharSet=utf8 或 CharSet=utf8mb3 或 CharSet=utf8mb4 也没用。

那么只能把数据库的字符集改为 utf8mb4。

更改字符集和排序方式前必须先备份数据库！

1. 更改现有数据库的字符集和排序规则

   ALTER DATABASE mydatabase 
   CHARACTER SET utf8mb4 
   COLLATE utf8mb4_unicode_ci;

2. 更改现有表的字符集和排序规则

   ALTER TABLE mytable 
   CONVERT TO CHARACTER SET utf8mb4 
   COLLATE utf8mb4_unicode_ci;

3. 更改现有列的字符集和排序规则

   当列单独设置了字符集时执行，未设置的不需要执行，会继承表的字符集

   ALTER TABLE mytable 
   MODIFY mycolumn VARCHAR(255) 
   CHARACTER SET utf8mb4 
   COLLATE utf8mb4_unicode_ci

数据库中可能存在许多表，数据表中可能存在许多列，使用下面的命令可以生成批量执行的命令：

1. 更改所有表的默认字符集和排序规则

   USE database_name; -- 替换为你的数据库名
   
   SELECT CONCAT('ALTER TABLE `', TABLE_SCHEMA, '`.`', TABLE_NAME, '` CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;') 
   FROM information_schema.TABLES 
   WHERE TABLE_SCHEMA = 'database_name'; -- 再次替换为你的数据库名

2. 更改所有列的字符集和排序规则

   USE database_name; -- 使用你的数据库名
   
   SELECT CONCAT('ALTER TABLE `', TABLE_SCHEMA, '`.`', TABLE_NAME, '` MODIFY `', COLUMN_NAME, '` ', COLUMN_TYPE, ' CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;') 
   FROM information_schema.COLUMNS 
   WHERE TABLE_SCHEMA = 'database_name'; -- 使用你的数据库名

另外给出几条查询语句：

1. 查看特定数据库的字符集和排序规则

   SELECT DEFAULT_CHARACTER_SET_NAME, DEFAULT_COLLATION_NAME
   FROM information_schema.SCHEMATA
   WHERE SCHEMA_NAME = 'your_database_name';

2. 查看特定表的字符集和排序规则

   SELECT TABLE_SCHEMA, TABLE_NAME, TABLE_COLLATION
   FROM information_schema.TABLES
   WHERE TABLE_SCHEMA = 'your_database_name';

3. 查看特定列的字符集和排序规则

   SELECT COLUMN_NAME, CHARACTER_SET_NAME, COLLATION_NAME 
   FROM information_schema.COLUMNS 
   WHERE TABLE_SCHEMA = 'your_database_name' AND TABLE_NAME = 'your_table_name';

推荐使用 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

如果手机开启了自动横屏，那么网页就会跟着旋转，导致网页宽度变大，高度变小，页面布局不友好，我们可以通过判断屏幕方向 api，用 css 设置旋转。

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>保持竖屏示例</title>
</head>
<body>
    <div id="app">
        <div class="page">
            <div>把手机横过来试试</div>
            <div>页面永远保持竖屏方向</div>
        </div>
    </div>
</body>
</html>

CSS：

body { margin: 0; }
.page { text-align: center; padding-top: 100px; }

@media screen and (orientation: landscape) {
    body { width: 100vh; height: 100vw; overflow: hidden; }
    .page.landscape-primary { transform: rotate(-90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 100%; left: 0; }
    .page.landscape-secondary { transform: rotate(90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 0; left: 100%; }
}

JS:

function fn_set_orientation() {
    var orientation = window.screen.orientation || window.screen.mozOrientation || window.screen.msOrientation;
    const div = document.querySelector('.page');
    console.log(orientation.type)
    switch (orientation.type) {
        case 'landscape-primary': {
            div.classList.remove('landscape-secondary');
            div.classList.add('landscape-primary');
            break;
        }
        case 'landscape-secondary': {
            div.classList.remove('landscape-primary');
            div.classList.add('landscape-secondary');
            break;
        }
        default: {
            div.classList.remove('landscape-primary');
            div.classList.remove('landscape-secondary');
            break;
        }
    }
}
window.addEventListener("orientationchange", function () {
    fn_set_orientation();
});
fn_set_orientation();

示例：

https://xoyozo.net/Demo/Orientation