項目中採用 wss 來建立的前後端連接, 但是並沒有用到認證的證書, 所以自己用 openssl 生成了私鑰, 自簽名證書來使用:
這裏就不再贅述 Wss 連接過程, 直接上手操作:
1. 生成私鑰, 證書:
請查看: 使用 openssl 安裝和生成證書 - 書源 - 博客園 (cnblogs.com)
2. rust 服務端:
將生成的 server.crt 和 server.key 放到 d:\\User\\Desktop\\wss\\openssl 目錄下
依賴:
[dependencies]
rustls = "0.19.0"
tokio-rustls = "0.22.0"
tokio = { version = "1", features = ["full"] }
tokio-tungstenite = "0.20"
futures-util = "0.3"
RUST 代碼:
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(())
}
3. 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);
}
);
}
4. 谷歌瀏覽器設置
谷歌瀏覽器圖標右擊 屬性 -> 快捷方式 -> 目標(修改其中字符串, )
原來類似 "C:\Program Files\Google\Chrome\Application\chrome.exe"
修改為 "C:\Program Files\Google\Chrome\Application\chrome.exe" --ignore-certificate-errors
![]()
這個命令會忽略證書錯誤。正常情況下，當你訪問一個使用自簽名或無效證書的網站時，Chrome 會顯示一個警告頁面，指示你有潛在的安全風險。然而，使用 --ignore-certificate-errors 參數可以忽略這些證書錯誤，並允許你繼續訪問網站，而不會受到瀏覽器的證書警告頁面的干擾。
5. 結果展示:
前端項目使用 npm start 啓動:
![]()
前端控制枱:
![]()
後端控制枱:
![]()
版權聲明：本文為博客園博主「書源」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：rust angular 自簽名證書 wss - 書源 - 博客園 (cnblogs.com)
