最近发现一个问题，rust的线程安全机制导致无法实现socket读写分离到两个不同的线程。

先说一下程序的背景，程序是将本地终端pty(cli)拉起，并且将pty的输入输出通过channel对接，并将cli输出的数据经过channel写入到服务端socket，将从服务端socket收取到的数据经另一个channel写入到cli的输入。从而实现远程连接pty。

按照rust的写法，读线程中，在读socket之前需要先锁socket，然后读取，再释放锁；同样，在写线程中，也需要先锁socket，然后写入，再释放锁。这样一来代码应该如下：

连接与初始化代码如下

let (ws_stream, response) =
    connect(Url::parse("wss://ws.postman-echo.com/raw").unwrap()).expect("msg");

println!("Connected to the server");
println!("Response HTTP code: {}", response.status());
println!("Response contains the following headers:");
for (ref header, _value) in response.headers() {
    println!("* {}", header);
}

let socket = Arc::new(Mutex::new(ws_stream));

// init cli
self.pty_start();

let mut me = self.clone();
let skt = socket.clone();
thread::spawn(move || {
    me.watch_socket_read_in(skt);
});
println!("---> watch_socket_read_in");

self.watch_socket_write_out(socket.clone());
println!("---> watch_socket_write_out");

读取方法在一个新起的线程中watch_socket_read_in，如下

fn watch_socket_read_in(&mut self, socket: Arc<Mutex<WebSocket<MaybeTlsStream<TcpStream>>>>) {
    loop {
        let mut skt = socket.lock().unwrap();
        let msg = skt.read_message().unwrap();
        println!("Socket Received: {:?}", msg);
        drop(skt);
        self.tx_in
            .send(msg.clone())
            .expect("send msg into in channel failed");
        println!("send pipe in succ: {:?}", msg);
    }
}

可以看到，不停的从socket读取数据，读取前锁，读取后drop锁。

写入方法在初始化代码所在的主线程中watch_socket_write_out，如下

fn watch_socket_write_out(&mut self, socket: Arc<Mutex<WebSocket<MaybeTlsStream<TcpStream>>>>) {
    let rx = self.rx_out.lock().expect("lock rx out failed");

    for msg in rx.iter() {
        println!("msg from cli -> {:?}", msg);
        let mut skt = socket.lock().unwrap();
        println!("Socket Send    : {:?}", msg);
        skt.write_message(msg).unwrap();
        drop(skt);
    }

    println!("out of socket write out block....")
}

可是，运行的结果却出乎我的意料，运行结果现象是这样的，先是只能够从socket读取到服务端的PING数据，而cli发出的数据经过channel读取出来之后，锁socket，准备发送，但是发现锁socket卡主死锁了，导致无法经socket发送，然后就卡了很久；但是过了一段时间，写socket获取的锁成功了，发了一大堆的数据，然后又轮到读socket卡主，稍后随机的时间后，读socket锁成功，又只能读到PING，如此反复。这种状态的读写，完全不能用，根本实现不了cli与服务端的实时通讯。

分析了一下，应该是socket网络读写是网络通讯，因此读写的锁定socket时长是不确定的且相对耗时算是比较长的，所以导致无法预料是读获取到锁还是写获取到锁，而且这种锁强行将读写串行化了，完全不符合并发读写的要求了。

几经查找，于是采用tokio-tungstenite这个crate替换了tungstenite，因为它可以将WebSocketStream通过split方法分隔为reader和writer，这样一来，读与写就分离开了，在不同的线程中无需对socket加锁。

let (ws_stream, response) =
    connect_async(Url::parse("wss://ws.postman-echo.com/raw").unwrap())
        .await
        .expect("msg");
let (ws_writer, ws_reader) = ws_stream.split();

这样一来，读socket用ws_reader，写socket用ws_writer。

// socket read
let me = self.clone();
tokio::spawn(async move {
    let mut incoming = ws_reader.map(Result::unwrap);
    while let Some(msg) = incoming.next().await {
        if msg.is_text() {
            println!("Socket Received: {:?}", msg);
            me.tx_in.send(msg).expect("send msg into in channel failed");
        }
    }
});

// socket write
self.watch_socket_write_out(ws_writer).await;

async fn watch_socket_write_out(
    &mut self,
    mut writer: SplitSink<WebSocketStream<MaybeTlsStream<TcpStream>>, Message>,
) {
    let rx = self.rx_out.lock().expect("lock rx out failed");

    for msg in rx.iter() {
        println!("Socket Send    : {:?}", msg.to_text().unwrap());
        writer.send(msg).await.unwrap();
    }

    println!("out of socket write out block....")
}

可以看到，新线程中读socket，主线程中写socket；ws_reader经map方法后，可以在死循环中阻塞调用next()不断的读取socket中的信息。写socket则从channel中读取到数据，按常规的方法send即可。

接入tokio-tungstenite解决了这个问题，不过它是基于tokio的，tokio是一个协程库，有自己的运行时，用了tokio的程序起协程后，程序会自动启动若干个线程，类比goroutine，它也是有初始的资源消耗的，比如这个程序只需要4个线程，但是使用了tokio的程序，会有10个线程（如上图），内存占用会明显增多。

最近需要用ffmpeg将视频截取转为webp动图，但是发现截取后的视频在Chrome浏览器上打开播放循环次数不对

./ffmpeg -i xxx.mp4 -map_metadata -1 -s 640x360 -r 15 -t 00:00:02 -loop 1 xxx1.webp

以上命令中 -loop 1 指定动画循环1次，但是所生成的图片在Chrome上播放却是循环2次，同时发现截取 gif 也存在这个问题

./ffmpeg -i xxx.mp4 -map_metadata -1 -s 640x360 -r 15 -t 00:00:02 -loop 1 xxx1.gif

但是后来我发现将 -loop 指定为-1却可以截取一次循环的gif，但是 -loop -1 这个参数如果用在截取 webp 就会报错。

最后我找到了 libwebp 项目，在其压缩包目录中找到了官方的 webp 查看工具 vwebp.exe ，用它播放 webp 发现却是正常的，Chrome上播放循环两次的图用它播放只有一次。这说明是 Chrome 的bug，并非 ffmpeg 转码的问题。有人也发现了这个问题。 链接  

自定义web字体流行已经不是一天两天的事了，仿佛是随着google，ajax，web2.0这些字眼在多年前就已经到来了，不过如今却是越加流行了。用自定义字体代替图片图标确实有着不少好处，比如，字体是矢量的可以无限放大，字体可以随意的改变颜色只需在css中设置color属性即可。最近发现了一个在线字体生成工具很是不错，那就是fontello。

fontello提供众多图标供用户定制选择，并且用户还可以上传自己设计的svg图标文件，fontello会将其转化打包为字体文件fontello.eot、fontello.svg、fontello.ttf以及fontello.woff，供不同的浏览器调用，它在浏览器中的调用方式和众多的图标字体的调用方式是一样的——通过css调用，或者说通过指定class值的html节点调用，相信所有人都会使用，如果不会，自己查看打包目录下的demo.html文件就会了。

字体设计：

首先打开Illustrator，通过性状工具以及钢笔工具勾勒出你所需要的图形，然后转化为复合路径(对象>复合路径>建立)，然后保存为svg配置文件SVG 1.1，即可生成svg文件。

然后，在fontello页面的custom区域拖拽上传svg文件便会生成自定义的字体文字(或者说是图标)，选中它，以及你所需要的图标，点击download便可以打包字体文件。

使用字体图标的好处就不在赘述了。在Illustrator中设计图标时无需在意图标的颜色，因为对于字体来说是没有颜色的，只有形状，这也是在Illustrator中将其转换为复合路径的原因。另外需要注意的是在Illustrator中绘制路径的话要保证路径是闭合的，不然无法形成形状，在导入fontello后便会发现图标是空白的，假如你发现自己的图标是空白的或者是全黑的，那么建议你先学习一下Illustrator的使用以及路径和性状这些概念再来设计图标。