rust angular 自签名证书 wss

书源x

已于 2024-01-09 14:17:39 修改

阅读量418

点赞数 10

文章标签： rust angular.js 开发语言

于 2024-01-09 14:16:32 首次发布

本文链接：https://blog.csdn.net/qq_45366359/article/details/135479096

版权

本文介绍了如何使用OpenSSL生成私钥和证书，然后在Rust服务器端通过rustls库实现TLS加密WebSocket服务，并在Angular客户端进行连接。同时提到如何在谷歌浏览器中设置忽略证书错误以测试自签名证书的应用。

摘要由CSDN通过智能技术生成

1. 生成私钥, 证书:

请查看: 使用 openssl 安装和生成证书 - 书源 - 博客园 (cnblogs.com)

2. 代码实现:

2.1 Rust 服务端:

依赖:

[dependencies]
rustls = "0.19.0"
tokio-rustls = "0.22.0"
tokio = { version = "1", features = ["full"] }
tokio-tungstenite = "0.20"
futures-util = "0.3"

代码:

use futures_util::sink::SinkExt;
use futures_util::stream::{Stream, StreamExt};
use rustls::ServerConfig;
use std::fs::File;
use std::io::BufReader;
use std::sync::Arc;
use tokio::net::{TcpListener, TcpStream};
use tokio_rustls::TlsAcceptor;
use tokio_tungstenite::accept_async;
use tokio_tungstenite::tungstenite::protocol::Message;

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    // 加载SSL keys
    let certs = rustls::internal::pemfile::certs(&mut BufReader::new(File::open(
        "d:\\User\\Desktop\\wss\\openssl\\server.crt",
    )?))
    .unwrap();
    let key = rustls::internal::pemfile::pkcs8_private_keys(&mut BufReader::new(File::open(
        "d:\\User\\Desktop\\wss\\openssl\\server.key",
    )?))
    .unwrap()[0]
        .clone();






    let tls_cfg = {
        let mut cfg = ServerConfig::new(rustls::NoClientAuth::new());
        cfg.set_single_cert(certs, key).expect("error setting cert");
        Arc::new(cfg)
    };
    let tls_acceptor = TlsAcceptor::from(tls_cfg);






    // 设置TCP监听器
    let addr = "127.0.0.1:10096";
    let listener = TcpListener::bind(&addr).await?;
    println!("Listening on: {}", addr);






    while let Ok((stream, _)) = listener.accept().await {
        let acceptor = tls_acceptor.clone();






        tokio::spawn(async move {
            if let Ok(tls_stream) = acceptor.accept(stream).await {
                let websocket_result = accept_async(tls_stream).await;






                match websocket_result {
                    Ok(mut ws_stream) => {
                        println!("WebSocket connection established");
                        while let Some(message_result) = ws_stream.next().await {
                            match message_result {
                                Ok(message) => {
                                    if message.is_text() || message.is_binary() {
                                        // 对接收到的消息进行处理
                                        println!("接收到消息: {}", message);
                                        // 回传消息
                                        println!("回传消息: {}", message);
                                        if let Err(_) = ws_stream.send(message).await {
                                            // 处理错误
                                            break;
                                        }
                                    }
                                }
                                Err(e) => {
                                    // 处理错误
                                    println!("Error: {}", e);
                                    break;
                                }
                            }
                        }
                    }
                    Err(e) => {
                        println!("Error during the websocket handshake occurred: {}", e);
                    }
                }
            }
        });
    }






    Ok(())
}

2.2 Angular 客户端:

Angular 配置:

将生成的

client.crt 和 client.key 放到和 package.json 同级文件夹下.

package.json

"scripts": {
"start": "ng serve --host 0.0.0.0 --port 443 --ssl true --ssl-cert ./client.crt --ssl-key ./client.key",}

// 补充
./client.crt 和 ./client.key 是相对路径，表示这些证书文件位于当前工作目录。当前工作目录指的是你在运行 ng serve 命令时所在的目录，也就是命令行提示符下的目录。如果你在项目的根目录下运行这个命令（通常是包含 package.json 文件的目录），./ 就表示这个项目的根目录

angular 代码:

import {webSocket} from "rxjs/webSocket";
  ngOnInit() {
    this.websocketTest();
  }  

websocketTest() {
    const url: string = 'wss://127.0.0.1:10096';
    const myWebSocket = webSocket({
      url: url,
      openObserver: {
        next: () => {
          console.info('WebSocket 连接已建立: ' + url);
        },
        error: (err) => {
          console.error('WebSocket 连接出错: ' + url);
          console.error(err);
        },
      },
    });
    const data = JSON.stringify({name: '张三', age: 18, sex: '男'});
    myWebSocket.next(data);

    console.log('客户端发送请求: ', data);
    myWebSocket.subscribe(
      next => {
        console.log('客户端收到响应: ', next);
      },
      error => {
        console.error('WebSocket 出错: ' + url);
        console.error(error);
      }
    );
  }