## 简介

现在很多UI框架都有好看且美观的消息气泡。但有时简单写个东西，只需要一个气泡，不想引入框架中太多的东西，所以就需要手写一个消息气泡。

本文将展示使用原生`JavaScript`实现一个简单的自定义消息气泡，没有太多文字，主要看代码及注释即可。

> 前排提示：老狗前端技术有限，气泡不够美观，会前端的大佬可以自行优化！



## 代码

**提示：可以自己新建个html文件，将下方代码复制填写到该文件中，浏览器打开该文件即可查看代码效果。**

```html
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>message-babo</title>

    <style type="text/css">
      #msg-container {
        position: fixed;
        top: 5%;
        left: 46%;
        text-align: center;
        display: none;
      }
      /* 成功气泡css */
      .success-msg {
        margin: 5px;
        padding: 5px 10px;
        border-radius: 3px;
        border: 1px solid #2e7b20;
        background-color: #80d970;
        color: #2e7b20;
        font-size: 16px;
      }
      
      /* 失败气泡css */
      .error-msg {
        margin: 5px;
        padding: 5px 10px;
        border-radius: 3px;
        border: 1px solid #e51717;
        background-color: #ffb9b9;
        color: #e51717;
        font-size: 16px;
      }
      
      .buttons{
        padding: 1rem;
      }
    </style>
    
    <script>
      // 显示成功气泡的方法
      function alertSuccess(msg, duration) {
        alertCust(msg, "success-msg", duration);
      }
      
      // 显示失败气泡的方法
      function alertError(msg, duration) {
        alertCust(msg, "error-msg", duration);
      }
      
      /**
       * 显示气泡的方法
       * 
       * @param msg        气泡显示内容
       * @param className  自定义元素的类名
       * @param duration   气泡消失时间-毫秒
       */
      function alertCust(msg, className, duration) {
        // console.log(msg, className);
        // 获取气泡容器
        const msgContainer = document.getElementById("msg-container");
        // 创建一个div
        let msgDiv = document.createElement("div");
        // 给新建div赋予气泡属性及信息
        msgDiv.innerText = msg;
        msgDiv.className = className;
        // 将气泡添加到气泡容器
        msgContainer.appendChild(msgDiv);
        msgContainer.style.display = "block";
        
        // 设置一个定时任务，用于让气泡消失
        window.setTimeout(function () {
          // 删除上面新建的气泡
          msgContainer.removeChild(msgDiv);
          // 如果气泡容器内部没有内容了，则将气泡容器隐藏
          if (msgContainer.innerHTML == null || msgContainer.innerHTML.length === 0){
            msgContainer.style.display = "none";
          }
        }, duration)
      }
    </script>
  </head>

  <body>
    <div style="text-align: center">
      
      <button onclick="alertSuccess('成功', 3000)" class="buttons">show-success</button>
      
      <button onclick="alertError('失败', 10000)" class="buttons">show-error</button>
    <div>
    
    <div id="msg-container"></div>
  </body>

</html>
```

## 赞助

如果你觉得本文对你有用，想要给作者一些赞助，可以动动小手点击下方广告给予支持，万分感谢~

您的每次点击都能给予作者更多分享的动力！**请无情点击吧：**


<div class="article-ads"></div>

原生HTML+JS实现自定义消息气泡

## 简介

现在很多WEB项目都有右键自定义菜单，覆盖浏览器右键功能，用以实现一部分自定义功能。

本文将展示使用原生`JavaScript`实现一个简单的自定义右键菜单，没有太多文字，主要看代码及注释即可，最后有个简单的总结。



## 代码

**提示：可以自己新建个html文件，将下方代码复制填写到该文件中，浏览器打开该文件即可查看代码效果。**

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Right-click menu example</title>
    <style type="text/css">
      /* css */
      #manager-menu {
        display: none;
        position: absolute;
        background-color: #393737;
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 5px;
        z-index: 9999; /* make sure it appears on top of other elements */
      }
      .menu {
        text-align: center;
        padding: 0.5rem 1.5rem 0.5rem 1rem;
        cursor: pointer;
        margin: 0.1rem;
        color: #FFF;
        border-radius: 5px;
      }
      .menu:hover{
        background: #939393;
      }

      .click-me {
        text-align: center;
        background-color: #96d296;
        padding: 1rem;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    
    <div class="click-me" id="click-me">右键点我</div>

    
    <div id="manager-menu">
      <div class="menu" id="menu1">菜单1</div>
      <div class="menu" id="menu2">菜单2</div>
    </div>

    <script type="text/javascript">
      // 获取需要实现右键菜单的元素
      var clickDiv = document.getElementById("click-me");
      // 获取右键菜单元素
      var rightClickMenu = document.getElementById("manager-menu");

      // 给clickDiv设置右键(contextmenu)监听
      clickDiv.addEventListener('contextmenu', function(e) {
        // 禁用默认的右键行为
        e.preventDefault();
        // 保存当前右键点击的元素的id属性，以便后续业务使用
        window.localStorage.setItem("clickId", e.target.id);
        // 使用定位跟随鼠标显示右键菜单元素
        rightClickMenu.style.display = "block";
        rightClickMenu.style.left = e.pageX + "px";
        rightClickMenu.style.top = e.pageY + "px";
      });

      // 给整个dom页面设置点击(左键)事件
      document.addEventListener('click', function() {
        // 隐藏(关闭)右键菜单
        rightClickMenu.style.display = "none";
        // 移除右键时保存的元素id
        window.localStorage.removeItem("clickId");
      });
    
      // 获取右键菜单中的"菜单1"元素
      var menu1 = document.getElementById("menu1");
        // 给菜单1设置点击事件，弹出相关信息
        menu1.addEventListener('click', function() {
        alert('You clicked ：' + window.localStorage.getItem("clickId") + ' and menu1');
      });
    </script>
  </body>
</html>
```

## 总结

要想实现一个优秀的 `Web` 网站自定义右键菜单，有几个关键点：
1. 禁止浏览器默认的右键行为；
2. 控制好自定义菜单的出现和隐藏！
3. 自定义菜单的定位要注意。

根据这几个关键点，可以总结出右键自定义菜单的几个主要部分：
1. 被右键时，会出现自定义菜单的元素（`show`），如示例代码中的 `class="click-me"` div。
2. 被左键时，会隐藏自定义菜单的元素（`hidden`），一般是整个dom元素，如示例中的一样。
3. 自定义菜单的元素（默认隐藏），如示例中的 `id="manager-menu"` div。
4. `show` 元素监听右键，编写菜单出现时的逻辑，尤其注意定位问题、参数传递问题，如示例中的 `// 给clickDiv设置右键(contextmenu)监听` 部分代码。
5. `hidden` 元素监听左键，编写菜单隐藏的逻辑，如示例中的 `// 给整个dom页面设置点击(左键)事件` 部分代码。
6. 自定义菜单的监听事件，一般是左键（点击自定义菜单后会发生什么），如示例中的 `// 获取右键菜单中的"菜单1"元素` 部分代码。

特别注意：要注意这些代码的执行顺序，本文示例中的部分顺序可以打乱，但如果你是通过 `js` 动态添加（`append`）的菜单元素DIV，要特别注意！

## 赞助

如果你觉得本文对你有用，想要给作者一些赞助，可以动动小手点击下方广告给予支持，万分感谢~

您的每次点击都能给予作者更多分享的动力！**请无情点击吧：**


<div class="article-ads"></div>

原生HTML+JS实现右键自定义菜单

## 简介

在Vue2时代，Element是一个国内市占率很高的UI库，其中尤其是`vue-elemnet-admin`开源项目的使用。

**Element Plus** 是基于 Vue 3，面向设计师和开发者的组件库。

- 官网：https://element-plus.org/

本文用于记录Vue3空项目集成**Element Plus**的基本配置。



## 基本步骤

> 参考官网：https://element-plus.org/zh-CN/guide/installation.html

### 1. 安装依赖

```bash
npm install element-plus
```

运行成功后可以在项目的`package.json`的`dependences`标签下看到相关依赖及版本，如下：

```json
  "dependencies": {
    "element-plus": "^2.3.14"
  }
```

### 2. 全局引入依赖

在`main.ts`或`main.js`中引入`ElementPlus`和相应的`css`，如下：

```typescript
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// 引入ElementPlus
import ElementPlus from 'element-plus';
// 引入中文支持
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
// 引入ElementPlus-css
import 'element-plus/dist/index.css';
// 如果只想导入css变量
import 'element-plus/theme-chalk/dark/css-vars.css';

const app = createApp(App)

app.use(createPinia())
app.use(router)
// 全局使用ElementPlus
app.use(ElementPlus, { locale: zhCn })

app.mount('#app')
```

以上引入中文支持的代码，在typescript环境下可能会报红，可以在`main.ts`同级创建`declaration.d.ts`文件，填入以下内容：
```typescript
// 忽略vue中文支持文件的ts检查
declare module 'element-plus/dist/locale/zh-cn.mjs';
```

### 3. 使用测试

经过以上两步，已经成功将Element-plus引入到项目中，下面来测试一下引入是否成功：

将一下代码拷贝到你的`App.vue`文件中：

```html
<el-button type="success">Element-plus Success</el-button>
```

运行项目查看相应的页面，可以看到一个按钮如下，则说明引入成功：

![success](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1696683124704.png)


## 拓展：引入Element-plus图标

> 参考官网：https://element-plus.org/zh-CN/component/icon.html

Element-plus的图标资源需要单独引入到项目中，可以运行以下命令安装依赖：

```bash
npm install @element-plus/icons-vue
```

安装成功后，可以在任何需要使用的地方引入所需图标，基本使用如下：
```html
<template>
  
  <el-button :icon="Search" />
</template>

<script setup lang="ts">
  // 引入查询、删除、编辑图标
  import { Search, Delete, Edit } from '@element-plus/icons-vue';
</script>
```

Vue3空项目集成ElementPlus

# Hysteria2代理：服务端及客户端搭建

## 简介

**Hysteria** 是一个新兴的强大、快速、安全的网络代理工具。且完全开源！

Hysteria2的首个版本：`Hysteria 2.0.0`在2023年9月2日首次发布。*这是 Hysteria 2 的第一个稳定版本。几乎完全重写了 Hysteria 原有的代码，包括新的协议、新的功能和各种改进。*

- Github仓库地址：https://github.com/apernet/hysteria
- 中文官网：https://v2.hysteria.network/zh/

本文用于记录服务器搭建和使用方式：
1. 使用官方发布的应用运行服务端和客户端。
2. 参照官方文档中的配置文件示例配置服务端和客户端。

**提示：私人搭建服务端需要一个拥有公网IP的服务器、一个映射到该IP的域名！建议有相关经验的人员选择自建。**

> 截止本文编写时，官方最新版本是【[app/v2.0.3](https://github.com/apernet/hysteria/releases/tag/app%2Fv2.0.3)】



## 准备工作

### 1. 应用下载

本文使用的应用如下：
- 服务端：服务器系统是Linux，系统架构是`x86_64`，所以选择应用包`hysteria-linux-amd64`，将其下载到本地备用。
- 客户端：客户端是Windows10，系统架构是`x86_64`，所以选择应用包`hysteria-windows-amd64.exe`，将其下载到本地备用。

> **提示：官方发布的每个应用都是服务端和客户端通用的，如`hysteria-linux-amd64`既可以进行服务端部署，也可以作为客户端连接服务端。**

关于发布版选择的更多信息，请阅读官网文档或本站搬运的内容：[Hysteria2官方服务版本选择 | 对照表](https://oldmoon.top/post/193)

### 2. 域名DNS配置

简介中提到 **`私人搭建服务端需要一个拥有公网IP的服务器、一个映射到该IP的域名！`** 。所以你应该在服务端搭建前准备好服务器、域名，并将域名正确解析到服务器对应的IP上。这里就不多说了，如果要独立搭建服务器，需要自行去学习这部分，包含`购买服务器`、`购买域名`、`DNS解析`等相关知识。

> PS：购买海外服务器，本站整理了一些常见大厂商信息可供参考：[海外常见云服务器VPS](https://oldmoon.top/post/vps)

## 服务端搭建

### 一键安装


官方提供了一个 `bash` 脚本，可以在常见的 `Linux` 发行版上自动下载最新版本的 `Hysteria` 并配置 `systemd` 服务，请选择使用以下脚本：

- 安装或升级到最新版本：

```sh
bash <(curl -fsSL https://get.hy2.sh/)
```

- 安装或升级为指定版本（跳过版本检查）：
```sh
bash <(curl -fsSL https://get.hy2.sh/) --version v2.2.3
```

安装成功后，会出现配置文件地址及下一步的相关提示，按照提示执行操作即可。

- 卸载 Hysteria：
```sh
bash <(curl -fsSL https://get.hy2.sh/) --remove
```

### 手动安装

本文服务端使用的是`Centos`系统的Linux服务器，服务端搭建可以分为以下几步：
1. 创建hysteria文件夹，用于存储相关应用及文件，如`/root/hysteria`；
2. 进入`/root/hysteria`文件夹，将上面提到的`hysteria-linux-amd64`上传到`/root/hysteria`文件夹中；
3. 创建并编辑`config.yaml`文件，用于填写hysteria服务端相关配置信息；
4. 将基础配置信息填入`config.yaml`文件并保存，本文的配置信息可查看下方的 [服务端配置](#服务端配置)；
5. 将`hysteria-linux-amd64`设置为可执行文件，**Centos** 赋予可执行权限的命令是`chmod -R 777 hysteria-linux-amd64`，其他系统请自行设置；
6. 运行程序启动服务端，我使用的运行命令（`Centos系统`）如下：
    ```bash
    # 服务端模式后台运行程序，并将输出信息（日志）保存到logs.log文件中
    nohup ./hysteria-linux-amd64 server > logs.log 2>&1 &
    ```
7. 查看`logs.log`文件内容，若有`server up and running`，说明服务运行成功

### 服务端配置

- 提示：hysteria服务端需要HTTPS证书支持，官方应用有自动申请证书功能，但由于我测试的次数过多，好像超过了自动申请证书的限制，所以我的配置中有`域名证书手动配置`相关配置信息，如果你不会手动申请证书，请将手动配置删除，并放开自动配置的注释

```yaml
listen: :24443 # 你的服务端口，默认是443，可以自行修改，本文修改为24443

#acme: # 域名证书自动配置
  #domains:
  #  - www.baidu.com # 你的域名
  #email: www@qq.com # 你的邮箱

tls: # 域名证书手动配置
  cert: /root/hysteria/www.baidu.com_bundle.crt # 你的域名证书
  key: /root/hysteria/www.baidu.com.key # 你的域名证书

auth:
  type: password
  password: 123456 # 将123456改为你的密码 

masquerade: 
  type: proxy
  proxy:
    url: https://www.baidu.com/ # 伪装网址，自行修改
    rewriteHost: true
```

> 更多配置信息可参考本站文章：[Hysteria2 服务器配置整理](https://oldmoon.top/post/143)

## 客户端搭建

> **如果觉得原生客户端用起来不舒服，可以选择第三方客户端，移至本文最下方查看三方客户端相关文章。**

本文客户端使用的是Windows10系统，客户端配置步骤如下：
1. 创建文件夹用于存放hysteria相关文件，如`D:/hysteria`；
2. 进入`D:/hysteria`文件夹，将`hysteria-windows-amd64.exe`拷贝到当前文件夹；
3. 创建`config.yaml`文件，并编辑；
4. 将客户端配置信息填入`config.yaml`文件并保存，配置信息可参考 [客户端配置](#客户端配置)；
5. 在本文件夹中打开cmd窗口，运行`hysteria-windows-amd64.exe`，如果输出如下信息，说明服务端连接成功：
```
    client mode
    connected to server     {"count": 1}
    use this URI to share your server       {"uri": "hysteria2://123456@www.baidu.com:24443/"}
    HTTP proxy server listening     {"addr": "127.0.0.1:8080"}
    SOCKS5 server listening {"addr": "127.0.0.1:1080"}
```

### 客户端配置

```yaml
server: www.baidu.com:24443 # 你的服务端域名和端口

auth: 123456 # 你的服务端密码

bandwidth: # 带宽限制，本文未修改，更多信息请查看官方文档
  up: 20 mbps
  down: 100 mbps

socks5: # socks5代理，本文未修改，更多信息请查看官方文档
  listen: 127.0.0.1:1080 

http: # http代理，本文未修改，更多信息请查看官方文档
  listen: 127.0.0.1:8080 
```

### Windows10代理配置

经过以上操作，你已经将客户端及服务端全部运行完毕，但可能你会发现网络代理并未生效。

这是因为Windows10网络代理还需要在系统设置中进行相关设置，本文使用的设置信息如下图：

![proxy](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1696601502859.jpg)

通过上图的配置后，我已经可以正常访问Google、YouTube等网站了。

## 总结

通过以上信息，你已经可以独自搭建Hysteria2的网络代理了，希望大家科学上网，汲取有用的信息！

## 拓展

### docker

可能对于习惯使用Docker的朋友，上面服务端搭建方式有点不适应，没问题，官方也提供了相应的Docker镜像，官方给出的`docker-compose.yml`示例如下：

```yaml
version: "3.9"
services:
  hysteria:
    image: tobyxdd/hysteria
    container_name: hysteria
    restart: always
    network_mode: "host"
    volumes:
      - acme:/acme
      - ./hysteria.yaml:/etc/hysteria.yaml
    command: ["server", "-c", "/etc/hysteria.yaml"]
volumes:
  acme:
```

其中`hysteria.yaml`内容就是本文中服务端搭建时用到的 [服务端配置](#服务端配置)，即服务端的`config.yaml`。

当然域名相关的需求和配置还是一样需要的。

### 故障排除


在本人搭建hysteria2服务时，遇到一个问题：服务端运行成功，客户端一直连接不上服务端。

遇到这种情况可以从以下几个方面排查：
1. 域名是否正确映射到服务器；
2. 服务器端口是否正常开放？如本文中的`24443`；
3. 服务器的公网IP是否是其独立的IP？

本人的问题就是第三个原因导致的。当时使用的服务器是通过Google云赠送的`$100`购买的一个实例，通过命令行查看服务器IP发现并没有其提供的公网IP，换了一个其他厂商的服务器（命令行查看IP可以看到其公网IP的服务器）部署服务端，然后发现客户端可以正常连接了。

> PS：看来Google白嫖的东西还是不太行啊！

更多官方故障排除请查看：https://v2.hysteria.network/zh/docs/advanced/Troubleshooting/

## 第三方客户端

### 本站教程

- 【[Furious客户端连接Hysteria2](https://oldmoon.top/post/152)】
- 【[v2rayN客户端连接hysteria2](https://oldmoon.top/post/169)】

截止2023年11月9日，Hysteria官网贴出的支持的三方客户端有以下几个：

| 名称                | 描述                                                         | 平台                                | 模式           |
| ------------------- | ------------------------------------------------------------ | ----------------------------------- | -------------- |
| Clash.Meta          | A rule-based tunnel in Go (v1.16.0 后支持 Hysteria 2)        | Windows, Linux, macOS, Android, iOS | 客户端         |
| Furious             | A PySide6-based cross platform GUI client that launches your beloved GFW to outer space. (0.2.6 后支持 Hysteria 2) | Windows, Linux, macOS               | 客户端         |
| NekoBox for Android | Universal proxy toolchain for Android (1.2.4 后支持 Hysteria 2) | Android                             | 客户端         |
| Pharos Pro          | MultiProtocol Proxy Client for iPhone/iPad (v1.8.3 后支持 Hysteria 2) | iOS                                 | 客户端         |
| Shadowrocket        | Rule based proxy utility client for iPhone/iPad (2.2.35 后支持 Hysteria 2) | iOS                                 | 客户端         |
| sing-box            | A universal proxy platform (1.5.0-beta.2 后支持 Hysteria 2)  | Windows, Linux, macOS, Android, iOS | 客户端，服务端 |


## 赞助请求

 **建站不易，以下是一个广告，还请动动您的小拇指，点击一次以示鼓励，谢谢！**


<div class="article-ads"></div>

> 就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本，`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。祝你生活愉快~~`

Hysteria2代理：原生服务端及客户端搭建

# Hysteria2代理：服务端配置整理

## 简介

本文将`Hysteria2`官方全部服务器配置说明使用yaml格式整理为一个整体(All in one)。

官方文档地址：https://v2.hysteria.network/zh/docs/advanced/Full-Server-Config/

注意：本文将截止至`2023-9-30`官方所有说明示例全部整理了，所以会有不同情况的重复配置示例，需要自行阅读进行修改后才可使用！

<div class="article-ads"></div>



## 配置整理

```yaml
# Hysteria2 配置文件

#-------------------------------------------------------------------------
# 监听地址
#
# listen 是服务器的监听地址。
# 如果省略，服务器将默认监听 :443 端口，这是 HTTP/3 的默认端口。
#-------------------------------------------------------------------------

listen: :443 # 当只有端口没有 IP 地址时，服务器将监听所有可用的 IP 地址。


#-------------------------------------------------------------------------
# TLS 自定义域名证书
# 
# 可以选择使用 tls 或 acme，但不能同时包含两者。
#-------------------------------------------------------------------------
tls:
  cert: some.crt
  key: some.key

#-------------------------------------------------------------------------
# acme 自动申请域名证书
# 
# 如何申请失败，会导致服务不可用
#-------------------------------------------------------------------------
acme:
  domains:
    - your.domain.net
  email: your@email.com

#-------------------------------------------------------------------------
# 混淆
# 
# 默认 Hysteria 协议伪装为 HTTP/3。如果你的网络针对性屏蔽了 QUIC 或 HTTP/3 流量（但允许其他 UDP 流量），
# 可以使用混淆来解决此问题。目前有一个名为 "Salamander" 的混淆实现，将数据包混淆成没有特征的 UDP 包。
# 此功能需要一个混淆密码，密码在客户端和服务端必须相同。
# 
# 注意: 启用混淆将使服务器与标准的 QUIC 连接不兼容，失去 HTTP/3 伪装的能力。
#-------------------------------------------------------------------------
obfs:
  type: salamander
  salamander:
    password: cry_me_a_r1ver # 替换为你的混淆密码。

#-------------------------------------------------------------------------
# QUIC 参数
#
# 默认的流和连接接收窗口大小分别为 8MB 和 20MB。
# 除非你完全明白自己在做什么，否则不建议修改这些值。
# 如果要改，建议保持流接收窗口与连接接收窗口的比例为 2:5。
#-------------------------------------------------------------------------
quic:
  initStreamReceiveWindow: 8388608 # 初始的 QUIC 流接收窗口大小。
  maxStreamReceiveWindow: 8388608 # 最大的 QUIC 流接收窗口大小。
  initConnReceiveWindow: 20971520 # 初始的 QUIC 连接接收窗口大小。
  maxConnReceiveWindow: 20971520 # 最大的 QUIC 连接接收窗口大小。
  maxIdleTimeout: 30s # 最长空闲超时时间。服务器会在多长时间没有收到任何客户端数据后关闭连接。
  maxIncomingStreams: 1024 # 最大并发传入流的数量。
  disablePathMTUDiscovery: false # 禁用 MTU 探测。



#-------------------------------------------------------------------------
# 带宽
#
# 服务器端带宽值的作用是最高速度限制，限制服务器对每个客户端发送和接收的最大速率。
# 注意，服务器上传速度对应的是客户端下载速度，反之亦然。
# 可以选择不写这个字段，或者在一边或两边设为零，零代表没有限制。
#
# 支持的单位有：
# - bps 或 b（每秒比特数）
# - kbps 或 kb 或 k（每秒千比特）
# - mbps 或 mb 或 m（每秒兆比特）
# - gbps 或 gb 或 g（每秒吉比特）
# - tbps 或 tb 或 t（每秒太比特）
#-------------------------------------------------------------------------
bandwidth:
  up: 1 gbps
  down: 1 gbps

#-------------------------------------------------------------------------
# 忽略客户端带宽设置

# ignoreClientBandwidth 启用后，服务器将忽略客户端设置的任何带宽，永远使用传统的拥塞控制算法（目前为 BBR）。
#
# 这个功能主要为不希望让用户自己设置带宽的服务器提供。
#-------------------------------------------------------------------------
ignoreClientBandwidth: false

#-------------------------------------------------------------------------
# 带宽行为详解
# (本节中的信息是 Hysteria 的内部实现细节，可能会在不同版本之间发生变化)
#
# 目前，Hysteria 有两种拥塞控制算法：
#
# BBR：    由 Google 为 TCP 开发，我们对其进行了修改以移植到 QUIC。
#          BBR 是标准的拥塞控制算法，包括慢启动和基于 RTT 变化的带宽估算。
#          BBR 能独立运行，不需要用户手动设置带宽。
#
# Brutal： 这是 Hysteria 自有的拥塞控制算法。
#          与 BBR 不同，Brutal 采用固定速率模型，丢包或 RTT 变化不会降低速度。
#          相反，如果无法达到预定的目标速率，反而会根据计算的丢包率提高发送速率来进行补偿。
#          Brutal 只在你知道（并正确设置了）当前网络的理论最大速度时才能正常运行。
#          其擅长在拥塞的网络中抢占带宽，因此得名。
#
# Brutal 如果带宽设置低于实际最大值也能正常运行；相当于限速。
# 重要的是不要将其设置得高于实际最大值，否则会因为补偿机制导致连接速度更慢且不稳定。
#
# 拥塞控制控制的是连接的发送部分。
#   从客户端的视角，如果没有设置 down 带宽值（但提供了 up），Hysteria 服务器会使用 BBR 向客户端发送数据，
#   但客户端会使用 Brutal 向服务器上传数据，反之亦然。
#   客户端可以提供两者，这样两个方向都会使用 Brutal，或者都不提供，这样两个方向都会使用 BBR。
#
# 如上所述，一个特殊情况是当服务器启用了 ignoreClientBandwidth 选项，无论客户端的带宽值如何，双方始终都会使用 BBR。
#
# 目前，服务端的带宽限制限制的只是 Brutal 最大速率。因此在使用 BBR 的情况下并不会生效。
#-------------------------------------------------------------------------


#-------------------------------------------------------------------------
# UDP
#
# disableUDP 启用后服务端禁用 UDP 转发，只支持 TCP。
#
# udpIdleTimeout 用于指定服务器对于每个 UDP 会话，在没有流量时保持本地 UDP 端口的时间长度。
# 概念上与 NAT 的 UDP 会话超时时间相似。
#-------------------------------------------------------------------------
disableUDP: false
udpIdleTimeout: 60s


#-------------------------------------------------------------------------
# 验证
#-------------------------------------------------------------------------
auth:
  type: password
  password: your_password # 用自己选的强密码进行替换。
  userpass: # 用户名-密码映射表。
    user1: pass1
    user2: pass2
    user3: pass3
  http:
    url: http://your.backend.com/auth # 处理验证的后端 URL。
    insecure: false # 禁用后端服务器的 TLS 验证（仅适用于 HTTPS）。
  command: /etc/some_command # 处理验证的命令路径。

#-------------------------------------------------------------------------
# 验证示例
#
# HTTP 验证
#     当使用 HTTP 验证，客户端尝试连接时，服务器会向后端服务器发送一个带有以下 JSON 的 POST 请求：
#     {
#       "addr": "123.123.123.123:44556", 
#       "auth": "something_something", 
#       "tx": 123456 
#     }
#     后端服务器必须返回以下 JSON：
#     {
#       "ok": true, 
#       "id": "john_doe" 
#     }
#     注意： HTTP 状态码必须为 200，才认为验证成功。其他状态码会被认为是验证失败。
#
# 命令验证
#     当使用命令验证，客户端尝试连接时，服务器将执行指定的命令并附带以下参数：
#     /etc/some_command addr auth tx 
#     该命令必须将客户 ID 输出到 stdout，如果允许客户端连接，则返回退出代码 0；如果客户端被拒绝，则返回非零。
#     如果命令执行失败，客户端将被拒绝。
#-------------------------------------------------------------------------

#-------------------------------------------------------------------------
# DNS 解析
# 
# 可以指定用于解析客户端请求中的域名的 DNS 服务器。
# 如果省略，Hysteria 将使用系统默认的 DNS 服务器。
#-------------------------------------------------------------------------
resolver:
  type: udp
  tcp:
    addr: 8.8.8.8:53 # TCP DNS 服务器地址。
    timeout: 4s # DNS 查询超时时间。
  udp:
    addr: 8.8.4.4:53 # UDP DNS 服务器地址。
    timeout: 4s
  tls:
    addr: 1.1.1.1:853 # DNS over TLS 服务器地址。
    timeout: 10s
    sni: cloudflare-dns.com # DNS over TLS 服务器的 SNI。
    insecure: false # 禁用 TLS 证书验证。
  https:
    addr: 1.1.1.1:443 # DNS over HTTPS 服务器地址。
    timeout: 10s
    sni: cloudflare-dns.com
    insecure: false


#-------------------------------------------------------------------------
# ACL
#
# ACL 是 Hysteria 服务端中一个非常强大的功能，可以用来自定义处理客户端请求的方式，往往配合出站规则（outbounds）使用。
# 例如，可以使用 ACL 来屏蔽某些地址，或者针对不同网站使用不同的出口。
# 关于语法、使用方法以及其他信息，请参考 ACL 文档(https://v2.hysteria.network/zh/docs/advanced/ACL/)。
#
# 可以选择使用 file 或者 inline，但不能同时使用两者。
#
# 注意： Hysteria 只支持 MaxMind 的 GeoLite2 Country MMDB 格式的数据库来实现 GeoIP 功能。
#     如果你不知道如何获取正确的文件，可以省略 geoip 字段，让 Hysteria 自动下载最新版本。
#     只有在 ACL 中至少有一个 GeoIP 规则时，才会下载数据库。
#-------------------------------------------------------------------------

# 文件
acl:
  file: some.txt # ACL 文件的路径。
  # geoip: GeoLite2-Country.mmdb # 可选。取消注释以启用。GeoIP 数据库文件的路径。如果省略这个字段，Hysteria 会自动下载最新的数据库。

# 内联
#acl:
#  inline: 
#    - reject(v2ex.com)
#    - reject(*.v2ex.com)
#    - reject(all, udp/443)
#    - reject(geoip:cn)
#  geoip: GeoLite2-Country.mmdb # 可选。取消注释以启用。GeoIP 数据库文件的路径。如果省略这个字段，Hysteria 会自动下载最新的数据库。


#-------------------------------------------------------------------------
# 出站规则 (Outbounds)
#
# 出站规则用于定义连接应通过哪个“出口”。
# 例如，与 ACL 结合使用时，可以实现除 Netflix 外的所有流量都直接使用服务器本地网络，而 Netflix 流量通过另一个 SOCKS5 代理连接。
#
# 目前，Hysteria 支持以下几种出站类型：
#   - direct：通过本地网络直接连接。
#   - socks5：SOCKS5 代理。
# 如果不使用 ACL，所有连接将始终通过列表中的第一个（“默认”）出站规则进行路由，所有其他出站规则将被忽略。
#-------------------------------------------------------------------------
outbounds:
  - name: my_outbound_1 # 出站规则的名称。在 ACL 中使用。
    type: direct
  - name: my_outbound_2
    type: socks5
    socks5:
      addr: shady.proxy.ru:1080 # SOCKS5 代理地址。
      username: hackerman # 可选。SOCKS5 代理用户名。
      password: Elliot Alderson # 可选。SOCKS5 代理密码。


#-------------------------------------------------------------------------
# 关于 direct 出站
#
# direct 出站规则有一些额外的选项，可以用来定制其行为：
# 注意： bindIPv4、bindIPv6 和 bindDevice 三者是互斥的。
#    可以只指定 bindIPv4 和/或 bindIPv6，或者只使用 bindDevice。
#
# 支持的 mode 值包括：
#   - auto：默认值。双栈模式。客户端会同时尝试使用 IPv4 和 IPv6 地址连接目标，选择第一个成功的。
#   - 64：优先使用 IPv6，如果没有可用的 IPv6 地址，使用 IPv4。
#   - 46：优先使用 IPv4，如果没有可用的 IPv4 地址，使用 IPv6。
#   - 6：始终使用 IPv6。如果没有可用的 IPv6 地址，连接失败。
#   - 4：始终使用 IPv4。如果没有可用的 IPv4 地址，连接失败。
#-------------------------------------------------------------------------
outbounds:
  - name: hoho
    type: direct
    direct:
      mode: auto 
      bindIPv4: 2.4.6.8 # 要绑定的本地 IPv4 地址。
      bindIPv6: 0:0:0:0:0:ffff:0204:0608 # 要绑定的本地 IPv6 地址。
      bindDevice: eth233 # 要绑定的本地网卡。


#-------------------------------------------------------------------------
# 流量统计 API (HTTP)
#
# 流量统计 API 允许你通过 HTTP API 查询服务器的流量统计信息，以及踢用户下线。
# 具体使用方法请参考 流量统计 API 文档(https://v2.hysteria.network/zh/docs/advanced/Traffic-Stats-API/)。
#
# 注意： 此 API 没有验证，注意不要暴露在公网上。另外建议通过 ACL 阻止客户端访问。
#-------------------------------------------------------------------------
trafficStats:
  listen: :9999 

#-------------------------------------------------------------------------
# 伪装 (Masquerade)
#
# Hysteria 抵抗审查的关键之一就是它能伪装成标准的 HTTP/3 流量。
# 这意味着数据包不仅对中间设备（middleboxes）看起来像是 HTTP/3，服务器还会像普通网站服务器一样真的响应 HTTP 请求。
# 然而，这意味着你的服务器必须实际提供一些内容，以便看起来是真实的。
#
# 如果审查不是你需要担心的问题，可以从配置文件中完全删除 masquerade 部分。
# 这种情况下，Hysteria 将对所有 HTTP 请求始终返回 404 Not Found 。
#
# 目前 Hysteria 提供以下几种伪装模式：
#   - file：作为一个静态文件服务器，从一个目录提供内容。
#   - proxy：作为一个反向代理，从另一个网站提供内容。
#-------------------------------------------------------------------------
# 可以通过特定参数启动 Chrome 以强制使用 QUIC，测试你的伪装配置：
#     chrome --origin-to-force-quic-on=your.site.com:443 
# 注意： 在用参数启动 Chrome 之前，请先确保完全退出了 Chrome，没有任何 Chrome 进程还在后台运行。
# 否则参数可能不会生效。
# 
# 然后访问 https://your.site.com 验证伪装是否生效。
#-------------------------------------------------------------------------
masquerade:
  type: proxy
  file:
    dir: /www/masq 
  proxy:
    url: https://some.site.net 
    rewriteHost: true 


#-------------------------------------------------------------------------
# 伪装举例：HTTP/HTTPS 伪装
#
# 通常支持 HTTP/3 的网站只是将其作为一个升级选项，在 80/443 端口上也提供 TCP 的 HTTP/HTTPS。
# 如果希望模仿这种模式，可以使用 listenHTTP 和 listenHTTPS 选项来启用 HTTP/HTTPS 伪装。
# 这种情况下，不需要用上述特殊参数启动 Chrome，和普通的网站一样访问即可验证伪装。
#-------------------------------------------------------------------------
# 注意： 目前没有迹象表明有任何政府/商业防火墙在利用 "缺少 TCP HTTP/HTTPS" 这点来检测 Hysteria 服务器。
# 本功能仅为执着于 "做戏做全套" 的用户提供。
# 既然要 "做戏做全套"，就没有理由将 HTTP/HTTPS 监听在 80/443 之外的自定义端口上（虽然 Hysteria 允许自定义监听地址）。
#-------------------------------------------------------------------------
masquerade:
  # ... (上述其他字段)
  listenHTTP: :80 
  listenHTTPS: :443 
  forceHTTPS: true 

```


## 赞助

**建站不易，以下是一个广告，还请动动您的小拇指，点击一次以示鼓励，谢谢！**


<div class="article-ads"></div>

> 就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本，`如果看不到广告，可能是网络原因或被拦截了，那就无所谓了~`

Hysteria2代理：服务端配置整理

twitter:card

twitter:title

twitter:site

twitter:image

努力做一只帅气、有才、豁达的老狗！

twitter:description

程序员,笔记,Bug记录,编程技术,AI,Java,Node,Golang,个人博客,资源分享,月上老狗,dingdangdog