一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: All - Page 3 | Spark1e的个人博客

> 本文的应用环境是指在使用他人已编译好，且不方便自己重新再进行编译的Padavan路由系统下，如何添加软件。

> 本文涉及的frp故障排查版本为0.51.2，如果后续更新可能会有不同，仅供参考。

### Padavan添加软件

Padavan的系统（或者说目前刷路由器，非软路由，可用的系统里）大部分目录都是重启即丢失的。

> 但需要注意的是，由于Padavan系统的特殊性，关键目录以外的目录均为 tmpfs ，可以理解为是把数据暂存在内存上。因此在/etc/storage目录里所做的修改，如果没有执行保存脚本，就并没有真正的写入 Rom 里，重启之后文件还会丢失。 —— panFake的[文章](https://panfake.com/2019/01/padavan-settings-files-lost-after-reboot/)

那么我们的第一个目标就是把frp添加到/etc/storage目录下，并且烧录，使其重启可用。

#### 路由器还是能插U盘的更好一些

我的是红米AC2100，刷入Padavan后，SSH到路由器可见，可用空间大概也就几M，而最新版本的frp大概需要10M，空间严重不足。如果你的路由器能够插U盘，那么方案就变成了：

- 把frp放在U盘指定目录
- 路由器启动时自动挂载U盘
- 拷贝可执行文件到/tmp目录并启动（或者直接在U盘上启动）

不过上述方案不适合我，接下来介绍我的处理。

> 首要条件需要开启Padavan的SSH功能，这里不赘述，自行搜索。

#### [UPX](https://github.com/upx/upx)，好用

> 本文没有使用UPX的最新版，个人使用的[3.95](https://github.com/upx/upx/releases/tag/v3.95)

> 经过自己的测试，UPX运行的平台与需要修改的可执行文件平台无关，因此如果压缩有问题可能是你的原本的可执行文件的平台不对。

> 红米AC2100使用的是联发科的MT7621A，个人测试使用的frp版本应为misple版本。

利用UPX工具，使用`--best`参数，将frpc从10M压缩到了4M左右，如果你的空间还是不足，可以尝试压缩更旧版本的frpc，我自己压缩的0.39版本可以压缩到2M左右。

压缩好后将frpc和配置文件放在/etc/storage目录下，我自己放在了/etc/storage/frp/下，下文基于此。

放置好后建议先测试一下能否正常连接，因为每次重启后会还原到烧录的版本，如果配置的有问题，还需要重新烧录。

> 如果连接不上，是打不开frpc的管理面板的，我觉得这一点上frpc可以优化一下，至少可以判断是否启动成功。

> 如果路由器开启了防火墙，记得放行管理面板的端口和与服务端连接用的端口。不建议直接iptables，在管理面板里找Upnp配置即可。

如果测试没问题可以正常连接你的frps服务端，那么到系统设置里可以准备烧录了，这里借用一张恩山老哥的图片。

![微信图片_20230815105635](/img/uploads/微信图片_20230815105635.jpg)

选择“保存/etc/storage/内容到闪存”的提交，即可。

> 注意检查保存时的log，如果出现类似于：
> 
> Aug 18 02:37:15 Storage save: Save storage files to MTD partition "/dev/mtdblock6"
> 
> Aug 18 02:37:26 Storage save: Invalid storage final data size: 4240811
> 
> 一般是指/etc/storage容量不足

提交完毕，在系统设置 - 脚本，里找到“路由器启动时”（或者类似的字样），增加一行nohup启动脚本：

```bash
# 可执行文件更改为你自己的目录
nohup /etc/storage/frp/frpc -c /etc/storage/frp/frpc.ini >/dev/null 2>&1 &
```

> 选择输出到/dev/null是因为我在frpc.ini里配置了日志输出目录，建议输出到tmp避免闪存写满。

可以重启路由器测试frpc是否自动启动好并且连接上了。

### frp故障排除

然而我在测试时遭遇了frp用户最常见的错误：

```log
2023/08/14 13:53:31 [I] [service.go:296] EOF
```

EOF这种错误一般出现在读取返回体没有正确读取的情况，可能跟conn等都有关系，只有一个EOF这难排查。

找到frp的源码，在client/service.go下增加log

附上我自己debug用的service.go代码：

```go
// Copyright 2017 fatedier, fatedier@gmail.com
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package client

import (
	"context"
	"crypto/tls"
	"fmt"
	"io"
	"math/rand"
	"net"
	"runtime"
	"strconv"
	"strings"
	"sync"
	"sync/atomic"
	"time"

	"github.com/fatedier/golib/crypto"
	libdial "github.com/fatedier/golib/net/dial"
	fmux "github.com/hashicorp/yamux"
	quic "github.com/quic-go/quic-go"

	"github.com/fatedier/frp/assets"
	"github.com/fatedier/frp/pkg/auth"
	"github.com/fatedier/frp/pkg/config"
	"github.com/fatedier/frp/pkg/msg"
	"github.com/fatedier/frp/pkg/transport"
	"github.com/fatedier/frp/pkg/util/log"
	utilnet "github.com/fatedier/frp/pkg/util/net"
	"github.com/fatedier/frp/pkg/util/util"
	"github.com/fatedier/frp/pkg/util/version"
	"github.com/fatedier/frp/pkg/util/xlog"
)

func init() {
	crypto.DefaultSalt = "frp"
	// TODO: remove this when we drop support for go1.19
	rand.Seed(time.Now().UnixNano())
}

// Service is a client service.
type Service struct {
	// uniq id got from frps, attach it in loginMsg
	runID string

	// manager control connection with server
	ctl   *Control
	ctlMu sync.RWMutex

	// Sets authentication based on selected method
	authSetter auth.Setter

	cfg         config.ClientCommonConf
	pxyCfgs     map[string]config.ProxyConf
	visitorCfgs map[string]config.VisitorConf
	cfgMu       sync.RWMutex

	// The configuration file used to initialize this client, or an empty
	// string if no configuration file was used.
	cfgFile string

	exit uint32 // 0 means not exit

	// service context
	ctx context.Context
	// call cancel to stop service
	cancel context.CancelFunc
}

func NewService(
	cfg config.ClientCommonConf,
	pxyCfgs map[string]config.ProxyConf,
	visitorCfgs map[string]config.VisitorConf,
	cfgFile string,
) (svr *Service, err error) {
	svr = &Service{
		authSetter:  auth.NewAuthSetter(cfg.ClientConfig),
		cfg:         cfg,
		cfgFile:     cfgFile,
		pxyCfgs:     pxyCfgs,
		visitorCfgs: visitorCfgs,
		ctx:         context.Background(),
		exit:        0,
	}
	return
}

func (svr *Service) GetController() *Control {
	svr.ctlMu.RLock()
	defer svr.ctlMu.RUnlock()
	return svr.ctl
}

func (svr *Service) Run(ctx context.Context) error {
	ctx, cancel := context.WithCancel(ctx)
	svr.ctx = xlog.NewContext(ctx, xlog.New())
	svr.cancel = cancel

	xl := xlog.FromContextSafe(svr.ctx)

	// set custom DNSServer
	if svr.cfg.DNSServer != "" {
		dnsAddr := svr.cfg.DNSServer
		if _, _, err := net.SplitHostPort(dnsAddr); err != nil {
			dnsAddr = net.JoinHostPort(dnsAddr, "53")
		}
		// Change default dns server for frpc
		net.DefaultResolver = &net.Resolver{
			PreferGo: true,
			Dial: func(ctx context.Context, network, address string) (net.Conn, error) {
				return net.Dial("udp", dnsAddr)
			},
		}
	}

	// login to frps
	for {
		conn, cm, err := svr.login()
		if err != nil {
			xl.Warn("login to server failed: %v", err)

			// if login_fail_exit is true, just exit this program
			// otherwise sleep a while and try again to connect to server
			if svr.cfg.LoginFailExit {
				return err
			}
			util.RandomSleep(5*time.Second, 0.9, 1.1)
		} else {
			// login success
			ctl := NewControl(svr.ctx, svr.runID, conn, cm, svr.cfg, svr.pxyCfgs, svr.visitorCfgs, svr.authSetter)
			ctl.Run()
			svr.ctlMu.Lock()
			svr.ctl = ctl
			svr.ctlMu.Unlock()
			break
		}
	}

	go svr.keepControllerWorking()

	if svr.cfg.AdminPort != 0 {
		// Init admin server assets
		assets.Load(svr.cfg.AssetsDir)

		address := net.JoinHostPort(svr.cfg.AdminAddr, strconv.Itoa(svr.cfg.AdminPort))
		err := svr.RunAdminServer(address)
		if err != nil {
			log.Warn("run admin server error: %v", err)
		}
		log.Info("admin server listen on %s:%d", svr.cfg.AdminAddr, svr.cfg.AdminPort)
	}
	<-svr.ctx.Done()
	// service context may not be canceled by svr.Close(), we should call it here to release resources
	if atomic.LoadUint32(&svr.exit) == 0 {
		svr.Close()
	}
	return nil
}

func (svr *Service) keepControllerWorking() {
	xl := xlog.FromContextSafe(svr.ctx)
	maxDelayTime := 20 * time.Second
	delayTime := time.Second

	// if frpc reconnect frps, we need to limit retry times in 1min
	// current retry logic is sleep 0s, 0s, 0s, 1s, 2s, 4s, 8s, ...
	// when exceed 1min, we will reset delay and counts
	cutoffTime := time.Now().Add(time.Minute)
	reconnectDelay := time.Second
	reconnectCounts := 1

	for {
		<-svr.ctl.ClosedDoneCh()
		if atomic.LoadUint32(&svr.exit) != 0 {
			return
		}

		// the first three attempts with a low delay
		if reconnectCounts > 3 {
			util.RandomSleep(reconnectDelay, 0.9, 1.1)
			xl.Info("wait %v to reconnect", reconnectDelay)
			reconnectDelay *= 2
		} else {
			util.RandomSleep(time.Second, 0, 0.5)
		}
		reconnectCounts++

		now := time.Now()
		if now.After(cutoffTime) {
			// reset
			cutoffTime = now.Add(time.Minute)
			reconnectDelay = time.Second
			reconnectCounts = 1
		}

		for {
			if atomic.LoadUint32(&svr.exit) != 0 {
				return
			}

			xl.Info("try to reconnect to server...")
			conn, cm, err := svr.login()
			if err != nil {
				xl.Warn("reconnect to server error: %v, wait %v for another retry", err, delayTime)
				util.RandomSleep(delayTime, 0.9, 1.1)

				delayTime *= 2
				if delayTime > maxDelayTime {
					delayTime = maxDelayTime
				}
				continue
			}
			// reconnect success, init delayTime
			delayTime = time.Second

			ctl := NewControl(svr.ctx, svr.runID, conn, cm, svr.cfg, svr.pxyCfgs, svr.visitorCfgs, svr.authSetter)
			ctl.Run()
			svr.ctlMu.Lock()
			if svr.ctl != nil {
				svr.ctl.Close()
			}
			svr.ctl = ctl
			svr.ctlMu.Unlock()
			break
		}
	}
}

// login creates a connection to frps and registers it self as a client
// conn: control connection
// session: if it's not nil, using tcp mux
func (svr *Service) login() (conn net.Conn, cm *ConnectionManager, err error) {
	xl := xlog.FromContextSafe(svr.ctx)
	cm = NewConnectionManager(svr.ctx, &svr.cfg)

	if err = cm.OpenConnection(); err != nil {
		xl.Info("Throwed from line:249, the origin error msg is: ")
		xl.Info(err.Error())
		return nil, nil, err
	}

	defer func() {
		if err != nil {
			cm.Close()
		}
	}()

	conn, err = cm.Connect()
	if err != nil {
		xl.Info("Throwed from line:261, the origin error msg is: ")
		xl.Info(err.Error())
		return
	}

	loginMsg := &msg.Login{
		Arch:      runtime.GOARCH,
		Os:        runtime.GOOS,
		PoolCount: svr.cfg.PoolCount,
		User:      svr.cfg.User,
		Version:   version.Full(),
		Timestamp: time.Now().Unix(),
		RunID:     svr.runID,
		Metas:     svr.cfg.Metas,
	}

	// Add auth
	if err = svr.authSetter.SetLogin(loginMsg); err != nil {
		xl.Info("Throwed from line:280, the origin error msg is: ")
		xl.Info(err.Error())
		return
	}

	if err = msg.WriteMsg(conn, loginMsg); err != nil {
		xl.Info("Throwed from line:286, the origin error msg is: ")
		xl.Info(err.Error())
		return
	}

	var loginRespMsg msg.LoginResp
	_ = conn.SetReadDeadline(time.Now().Add(60 * time.Second))
	if err = msg.ReadMsgInto(conn, &loginRespMsg); err != nil {
		xl.Info("Throwed from line:294, the origin error msg is: ")
		xl.Info(err.Error())
		return
	}
	_ = conn.SetReadDeadline(time.Time{})

	if loginRespMsg.Error != "" {
		err = fmt.Errorf("%s", loginRespMsg.Error)
		xl.Error("%s", loginRespMsg.Error)
		return
	}

	svr.runID = loginRespMsg.RunID
	xl.ResetPrefixes()
	xl.AppendPrefix(svr.runID)

	xl.Info("login to server success, get run id [%s]", loginRespMsg.RunID)
	return
}

func (svr *Service) ReloadConf(pxyCfgs map[string]config.ProxyConf, visitorCfgs map[string]config.VisitorConf) error {
	svr.cfgMu.Lock()
	svr.pxyCfgs = pxyCfgs
	svr.visitorCfgs = visitorCfgs
	svr.cfgMu.Unlock()

	svr.ctlMu.RLock()
	ctl := svr.ctl
	svr.ctlMu.RUnlock()

	if ctl != nil {
		return svr.ctl.ReloadConf(pxyCfgs, visitorCfgs)
	}
	return nil
}

func (svr *Service) Close() {
	svr.GracefulClose(time.Duration(0))
}

func (svr *Service) GracefulClose(d time.Duration) {
	atomic.StoreUint32(&svr.exit, 1)

	svr.ctlMu.RLock()
	if svr.ctl != nil {
		svr.ctl.GracefulClose(d)
		svr.ctl = nil
	}
	svr.ctlMu.RUnlock()

	if svr.cancel != nil {
		svr.cancel()
	}
}

type ConnectionManager struct {
	ctx context.Context
	cfg *config.ClientCommonConf

	muxSession *fmux.Session
	quicConn   quic.Connection
}

func NewConnectionManager(ctx context.Context, cfg *config.ClientCommonConf) *ConnectionManager {
	return &ConnectionManager{
		ctx: ctx,
		cfg: cfg,
	}
}

func (cm *ConnectionManager) OpenConnection() error {
	xl := xlog.FromContextSafe(cm.ctx)

	// special for quic
	if strings.EqualFold(cm.cfg.Protocol, "quic") {
		var tlsConfig *tls.Config
		var err error
		sn := cm.cfg.TLSServerName
		if sn == "" {
			sn = cm.cfg.ServerAddr
		}
		if cm.cfg.TLSEnable {
			tlsConfig, err = transport.NewClientTLSConfig(
				cm.cfg.TLSCertFile,
				cm.cfg.TLSKeyFile,
				cm.cfg.TLSTrustedCaFile,
				sn)
		} else {
			tlsConfig, err = transport.NewClientTLSConfig("", "", "", sn)
		}
		if err != nil {
			xl.Warn("fail to build tls configuration, err: %v", err)
			return err
		}
		tlsConfig.NextProtos = []string{"frp"}

		conn, err := quic.DialAddr(
			cm.ctx,
			net.JoinHostPort(cm.cfg.ServerAddr, strconv.Itoa(cm.cfg.ServerPort)),
			tlsConfig, &quic.Config{
				MaxIdleTimeout:     time.Duration(cm.cfg.QUICMaxIdleTimeout) * time.Second,
				MaxIncomingStreams: int64(cm.cfg.QUICMaxIncomingStreams),
				KeepAlivePeriod:    time.Duration(cm.cfg.QUICKeepalivePeriod) * time.Second,
			})
		if err != nil {
			return err
		}
		cm.quicConn = conn
		return nil
	}

	if !cm.cfg.TCPMux {
		return nil
	}

	conn, err := cm.realConnect()
	if err != nil {
		return err
	}

	fmuxCfg := fmux.DefaultConfig()
	fmuxCfg.KeepAliveInterval = time.Duration(cm.cfg.TCPMuxKeepaliveInterval) * time.Second
	fmuxCfg.LogOutput = io.Discard
	fmuxCfg.MaxStreamWindowSize = 6 * 1024 * 1024
	session, err := fmux.Client(conn, fmuxCfg)
	if err != nil {
		return err
	}
	cm.muxSession = session
	return nil
}

func (cm *ConnectionManager) Connect() (net.Conn, error) {
	if cm.quicConn != nil {
		stream, err := cm.quicConn.OpenStreamSync(context.Background())
		if err != nil {
			return nil, err
		}
		return utilnet.QuicStreamToNetConn(stream, cm.quicConn), nil
	} else if cm.muxSession != nil {
		stream, err := cm.muxSession.OpenStream()
		if err != nil {
			return nil, err
		}
		return stream, nil
	}

	return cm.realConnect()
}

func (cm *ConnectionManager) realConnect() (net.Conn, error) {
	xl := xlog.FromContextSafe(cm.ctx)
	var tlsConfig *tls.Config
	var err error
	tlsEnable := cm.cfg.TLSEnable
	if cm.cfg.Protocol == "wss" {
		tlsEnable = true
	}
	if tlsEnable {
		sn := cm.cfg.TLSServerName
		if sn == "" {
			sn = cm.cfg.ServerAddr
		}

		tlsConfig, err = transport.NewClientTLSConfig(
			cm.cfg.TLSCertFile,
			cm.cfg.TLSKeyFile,
			cm.cfg.TLSTrustedCaFile,
			sn)
		if err != nil {
			xl.Warn("fail to build tls configuration, err: %v", err)
			return nil, err
		}
	}

	proxyType, addr, auth, err := libdial.ParseProxyURL(cm.cfg.HTTPProxy)
	if err != nil {
		xl.Error("fail to parse proxy url")
		return nil, err
	}
	dialOptions := []libdial.DialOption{}
	protocol := cm.cfg.Protocol
	switch protocol {
	case "websocket":
		protocol = "tcp"
		dialOptions = append(dialOptions, libdial.WithAfterHook(libdial.AfterHook{Hook: utilnet.DialHookWebsocket(protocol, "")}))
		dialOptions = append(dialOptions, libdial.WithAfterHook(libdial.AfterHook{
			Hook: utilnet.DialHookCustomTLSHeadByte(tlsConfig != nil, cm.cfg.DisableCustomTLSFirstByte),
		}))
		dialOptions = append(dialOptions, libdial.WithTLSConfig(tlsConfig))
	case "wss":
		protocol = "tcp"
		dialOptions = append(dialOptions, libdial.WithTLSConfigAndPriority(100, tlsConfig))
		// Make sure that if it is wss, the websocket hook is executed after the tls hook.
		dialOptions = append(dialOptions, libdial.WithAfterHook(libdial.AfterHook{Hook: utilnet.DialHookWebsocket(protocol, tlsConfig.ServerName), Priority: 110}))
	default:
		dialOptions = append(dialOptions, libdial.WithTLSConfig(tlsConfig))
	}

	if cm.cfg.ConnectServerLocalIP != "" {
		dialOptions = append(dialOptions, libdial.WithLocalAddr(cm.cfg.ConnectServerLocalIP))
	}
	dialOptions = append(dialOptions,
		libdial.WithProtocol(protocol),
		libdial.WithTimeout(time.Duration(cm.cfg.DialServerTimeout)*time.Second),
		libdial.WithKeepAlive(time.Duration(cm.cfg.DialServerKeepAlive)*time.Second),
		libdial.WithProxy(proxyType, addr),
		libdial.WithProxyAuth(auth),
	)
	conn, err := libdial.DialContext(
		cm.ctx,
		net.JoinHostPort(cm.cfg.ServerAddr, strconv.Itoa(cm.cfg.ServerPort)),
		dialOptions...,
	)
	return conn, err
}

func (cm *ConnectionManager) Close() error {
	if cm.quicConn != nil {
		_ = cm.quicConn.CloseWithError(0, "")
	}
	if cm.muxSession != nil {
		_ = cm.muxSession.Close()
	}
	return nil
}

```

修改后编译一个debug版本，再放到路由器内测试。

> https://github.com/fatedier/frp/blob/dev/package.sh 即这个项目的编译脚本，直接执行即可得到所需的比如misple版本。

可以看出错误位置在于：

```log
2023/08/14 13:53:31 [I] [service.go:295] Throwed from line:294, the origin error msg is:
2023/08/14 13:53:31 [I] [service.go:296] EOF
```

考虑到在参考其他人方案改为kcp模式时也会出现i/o deadline问题，这里我修改了读取的时间，从原来的10秒改为60秒：

```go
_ = conn.SetReadDeadline(time.Now().Add(60 * time.Second))
	if err = msg.ReadMsgInto(conn, &loginRespMsg); err != nil {
		xl.Info("Throwed from line:294, the origin error msg is: ")
		xl.Info(err.Error())
		return
	}
```

> 修改时间这个方式不一定是最后跑通的关键，建议先往后看。

修改后再编译执行，发现还是EOF，而且跟时间无关，日志仍然是秒报错。

```log
2023/08/14 14:27:41 [I] [root.go:220] start frpc service for config file [./frpc.ini]
2023/08/14 14:27:41 [I] [service.go:295] Throwed from line:294, the origin error msg is:
2023/08/14 14:27:41 [I] [service.go:296] EOF
2023/08/14 14:27:41 [W] [service.go:133] login to server failed: EOF
```

这个时候我（大概，可能，记不太清了）注意到了有这么一行[注释](https://github.com/fatedier/frp/blob/f1454e91f56508603e4c2e3c7bf37ccb534458c2/client/service.go#L244) 提到了Mux配置，我立即检查了我的服务端，发现我的服务端配置的`tcp_mux`选项([文档链接](https://github.com/fatedier/frp/blob/dev/README.md#tcp-stream-multiplexing))我设置成了false，而客户端默认没有使用时则为true，这里不匹配导致了conn的连接问题。

都更改为true之后，EOF问题解决，成功连接。

顺便记录排除frp报错EOF(i/o deadline)的过程

Padavan自己增加frp并排除故障

### 思路

利用Loopback，将原来两个不相交的通路重新定向：

![loopback2](/img/uploads/loopback2.jpg)

### 一些实验结果

![微信图片_20230804214412](/img/uploads/微信图片_20230804214412.png)

![微信图片_20230804214534](/img/uploads/微信图片_20230804214534.png)

![微信图片_20230804214842](/img/uploads/微信图片_20230804214842.png)

> 上面三个对比可以得出结论，定向到YY的声音主要取决于是否勾选该通道的监听。

![微信图片_20230804215114](/img/uploads/微信图片_20230804215114.png)

![微信图片_20230804215512](/img/uploads/微信图片_20230804215512.png)

![微信图片_20230804215332](/img/uploads/微信图片_20230804215332.png)

> 通过这三个对比之前的三个，对于YY等远端推流的软件而言，无所谓是否监听伴奏（loopback通道），只会影响本机能否听到声音。

> 如果不是推流，只是希望本机录歌的话，只需要两个通道，然后都勾选录制即可。或者直接将伴奏导入到音轨，避免二次内录。

Loopback + Studio One，不使用虚拟跳线

利用声卡的Loopback通道配合机架输出到YY

![usb版本跳线](/img/uploads/usb版本跳线.png)

如图，使用的是Banana版本，可以免费试用（定期会出现Donate弹窗，可以忽略），对于单一的USB麦克风，使用这个软件能够实现大部分的功能。

### 设置输入输出

左边HARDWARE INPUT是可选的输入硬件，输入硬件一般是独立的麦克风，或者耳机的麦克风，这里因为是USB设备，没有单独的ASIO驱动，所以在列表里要选择WDM或者MME，一般而言，WDM的延迟会更低一些。

右边HARDWARE OUTPUT是可选的输出，这里会控制你的所有音频监听设备，因此请注意建议先把下面 MASTER SECTION里能Mute的都先Mute掉，否则可能瞬间出现非常大的声音。

设置输出时，比如我现在有音响，耳机，两个设备，我可以设置A1为耳机输出，A2为音响输出，这时候如果我把A1的输出Mute解开，音频就会从耳机播放。同理对于音响的A2也是一样。

> 一般使用单麦克风的时候，无法录制立体声，这时候我们勾选这一路输入的mono，即可模拟出立体声（左右声道）的效果。

### 设置系统声音输出

为了让VoiceMeeter能够同时获得系统播放的声音（比如伴奏），需要将系统声音也指向VoiceMeeter。软件安装好之后会在系统声音设备里出现两个新的输入和输出——VAIO和AUX，这里暂时先不区别这两种的区别（Banana版，Potato版本会提供更多的），只把他们当作两个虚拟的设备。

我希望把系统声音指向到VoiceMeeter的VAIO，那么我需要在系统里将声音的默认播放设备改为VoiceMeeter Input (VAIO)，如图，设备左下角有个对勾表示设置默认成功：

![qq截图20230729211403](/img/uploads/qq截图20230729211403.png)

同理，如果你的YY没有遵循系统的默认设置，你可以手工在列表里选成如图所示：

![qq截图20230729211921](/img/uploads/qq截图20230729211921.png)

但是这个时候，通过耳机（A1）通道还是听不到系统声音，这是因为系统声音被指向了中间VIRTUAL INPUTS的左边VAIO中，如果你现在网页播放声音，能够看到中间出现电平变化，那么意味着VoiceMeeter收到了系统声音。

但是为什么耳机还不能听到呢，因为我们还没用引导VoiceMeeter收到的声音到系统。点亮VAIO的A1（耳机）输出，这个时候声音就来到了耳机。

### 规划跳线

跳线，就是通过配置线路，将合适的单路、多路声音汇总到一起，既可以汇总多个声音到输入，也可以汇总多个到输出，在使用USB麦克风的时候，我的规划是这样的：

![跳线step2-混合声音信号](/img/uploads/跳线step2-混合声音信号.jpg)

> 如果觉得延迟比较高，可以将系统声音直接输出到A1里，来获得更低的延迟。

> 本文还没有涉及接入机架的部分，可能会另起一篇文章来更新。

### 内录功能

右上角是VoiceMeeter的内录，即输入到VoiceMeeter的声音都可以被录入。录入后的回放，可以勾选右侧来选择输出到哪个设备。

之前用小雪球（Blue Snowball ICE）

VoiceMeeter用于麦克风跳线的简单记录

### JavaScript - Array

IE全系列不兼容`Array.prototype.find`，部分可能的旧版本也可能确实Array下的其他方法，提供一些polyfill供参考。

```javascript
// Polyfill for Array.prototype
(function () {
    if (!Array.prototype.find) {
        console.log("Polyfill 'array.find'");
        Array.prototype.find = function(callback) {
            if (this === null) {
              throw new TypeError('Array.prototype.find called on null or undefined');
            } else if (typeof callback !== 'function') {
              throw new TypeError('callback must be a function');
            }
            var list = Object(this);
            // Makes sures is always has an positive integer as length.
            var length = list.length >>> 0;
            var thisArg = arguments[1];
            for (var i = 0; i < length; i++) {
              var element = list[i];
              if ( callback.call(thisArg, element, i, list) ) {
                return element;
              }
            }
          };
    }
    if (!Array.prototype.filter) {
        console.log("Polyfill 'array.filter'");
        Array.prototype.filter = function (callbackFn) {
            var arr = [];
            for (var i = 0; i < this.length; i++) {
                if (callbackFn.call(this, this[i], i, this)) {
                    arr.push(this[i]);
                }
            }
            return arr;
        }
    }
    if (!Array.prototype.map) {
        console.log("Polyfill 'array.map'");
        Array.prototype.map = function (callbackFn) {
            var arr = [];
            for (var i = 0; i < this.length; i++) {
                /* call the callback function for every value of this array and push the returned value into our resulting array */
                arr.push(callbackFn(this[i], i, this));
            }
            return arr;
        }
    }
}())
```

> 如果你的环境允许，可以使用[polyfill.io](https://polyfill.io/v3/) 的工具来生成一个根据不同浏览器自动加载的polyfill包，但是请小心[供应链攻击](https://www.cloudflare.com/zh-cn/learning/security/what-is-a-supply-chain-attack/)

### CSS - Flex bug

#### using flex

flexbox 需要IE10+

#### `justify-content: center;`

需要在出现问题的容器上加上：

```css
flex-direction: column;
```

尽管无论是哪个轴，双center原则上应该是整个容器中心，但是IE下必须声明。

#### background image using data uri (SVG)

部分SVG特性不支持，保险起见，用URL链接吧。

> 不过base64的png url还可以。

2023年了，您还在兼容IE呢？

“被迫”兼容IE11遇到的一些问题和解决方案

不多说，直接先上代码，

```javascript
function copy2Clipboard(content) {
    function useClipboardApi(content) {
        navigator.clipboard.writeText(content).then(
            () => {
                console.log('success');
            },
            () => {
                console.log('failed');
                console.log(arguments);
                useExecCommandApi(content);
            }
        ).catch(e => {
            console.log(e)
        })
    }

    function useExecCommandApi(content) {
        console.log('use execCommand fallback');
        var i = document.createElement("input")
        i.setAttribute("style", "position:absolute;z-index:-1;width:1px;height:1px;top:-1px;opacity:0;-webkit-user-select: text;")
        document.body.appendChild(i)
        i.value = content
        var t = i.contentEditable,
            n = i.readOnly,
            o = document.createRange();
        i.contentEditable = !0
        i.readOnly = !1
        o.selectNodeContents(i);
        var a = window.getSelection();
        a.removeAllRanges()
        a.addRange(o)
        i.setSelectionRange(0, 999999)
        i.contentEditable = t
        i.readOnly = n
        window.document.execCommand("Copy")
        i.blur()
        document.body.removeChild(i)
        i = null
    }


    try {
        if (window.navigator && window.navigator.clipboard) {
            useClipboardApi(content);
        } else {
            useExecCommandApi(content);
        }
    } catch (e) {
        console.log(e);
        useExecCommandApi(content);
    }
}
```

### 坑

1. 部分浏览器对navigator.clipboard支持很差，建议用else的代码；
2. __Safari如果要访问剪贴板，需要在可信的HTTPS环境下执行，自签的证书是无法调用`execCommand`/`avigator.clipboard.writeText`的__


##### 附录：一个之前写的有注释的版本

```javascript
function copyToClipboard(text) {
    if (text === "") return;
    var ipt = document.createElement('input'); // maybe you need to change `input` to `textarea`
    ipt.setAttribute(
        'style',
        'position:absolute;z-index:-1;width:1px;height:1px;top:-1px;opacity:0;-webkit-user-select: text;'
    )
    document.body.appendChild(ipt)
    ipt.value = text
    // ipt.select()
    if (/iphone|ipad|ios/.test(navigator.userAgent.toLowerCase())) {
        var oldContentEditable = ipt.contentEditable
        var oldReadOnly = ipt.readOnly
        var range = document.createRange()

        ipt.contentEditable = true
        ipt.readOnly = false
        range.selectNodeContents(ipt)

        var s = window.getSelection()
        s.removeAllRanges()
        s.addRange(range)

        ipt.setSelectionRange(0, 999999) // A big number, to cover anything that could be inside the element.

        ipt.contentEditable = oldContentEditable
        ipt.readOnly = oldReadOnly
    } else {
        ipt.select()
    }
    window.document.execCommand('Copy')
    ipt.blur()
    document.body.removeChild(ipt)
    ipt = null
}
```


有些浏览器对新API的兼容实在是太差啦！

JS复制到剪贴板之意料之外的坑



### 参考文章

1. 官方Docker配置：[link](https://grafana.com/docs/grafana/latest/setup-grafana/configure-docker/)
2. Grafana配置SMTP：[link](https://rorschachchan.github.io/2018/06/06/Grafana%E9%85%8D%E7%BD%AEsmtp%E9%82%AE%E4%BB%B6/)
3. 将loki的log数据条数转换为Timeline的图表：[Example (you can copy its json)](https://play.grafana.org/d/f03dfa36-f578-4f4e-ac5e-2bce58476674/log-volume?orgId=1&from=1683531030209&to=1683534630209)
4. 通过图表创建告警规则

适合个人建站的简单日志收集系统Loki

### 扩展欧几里得算法

```
ed ≡ 1 (mod φ(n))
```

RSA算法计算公钥私钥相关的一些知识点

### 0. 初始化一个node项目

在希望的文件夹下`npm init`，填写必要的信息。

### 1. 安装所需要的依赖

```bash
npm i express -S
npm i @types/express @types/node typescript -D
# 如果你需要热重载的话，再加上
# npm i nodemon ts-node -D
```

### 2. 修改`tsconfig.json`

```json
{
	"rootDir": "./src",
	"outDir": "./dist"
}
```

### 3. 配置nodemon（无需热重载跳过此节）

在根目录新建`nodemon.json`

```json
{
    "ignore": [
        "**/*.test.ts",
        "**/*.spec.ts",
        "node_modules"
    ],
    "watch": [
        "src"
    ],
    "exec": "npm run preview",
    "ext": "ts"
}
```

> watch、exec字段均与接下来的配置有关，watch的是tsconfig中的rootDir，exec是接下来配置的"npm script"

### 4. 配置npm script

打开package.json， 修改script内的项目：

```json
"scripts": {
    "dev": "nodemon",
    "preview": "ts-node ./src/app.ts",
    "prestart": "npx tsc",
    "start": "node ./dist/app.js"
}
```

> 如果不需要热重载，可以不配置dev和preview命令。

### 5. 初始化一个简单的app.ts

在src下新建一个app.ts作为入口，内容举例如下：

```js
import express, { Application, Request, Response } from 'express';

const app: Application = express();

const PORT: number = 3001;

app.use('/', (req: Request, res: Response): void => {
    res.send('Hello my customer!');
});

app.listen(PORT, (): void => {
    console.log('SERVER IS UP ON PORT:', PORT);
});
```

### 6. 结束

项目内执行`npm run dev`即带有热重载，如果发布，执行`npm start`即可。

最小化新建一个Express.js + Typescript的后端项目

请点击右侧的链接进行尝试，注意不要真的发送哦，

- [iOS Click Me](sms:1069070087457&body=这只是一条测试信息，请不要发送哦)
- [Android Click Me](sms:1069070087457?body=这只是一条测试信息，请不要发送哦)

### 原理

`sms:<send-sms-to>(&/?)body=<sms-body>`

从QQ邮箱学来的还算实用的小技巧

如何利用URL实现呼起短信应用发短信

### Loading

- https://codepen.io/nikhil8krishnan/pen/rVoXJa
- https://samherbert.net/svg-loaders/

Spark1e

Category: all