本文由得物技术WWQ分享,原题“基于IM场景下的Wasm初探:提升Web应用性能”,即时通讯网进行了排版和内容优化。
0.jpg (25.74 KB, 下载次数: 6)
下载附件 保存到相册
4 天前 上传
cover-opti.png (11.34 KB, 下载次数: 7)
1.png (44.21 KB, 下载次数: 7)
9 天前 上传
2.png (28.84 KB, 下载次数: 7)
3.png (12.88 KB, 下载次数: 7)
4.png (52.13 KB, 下载次数: 7)
5.jpg (116.01 KB, 下载次数: 7)
6.jpg (73.91 KB, 下载次数: 7)
7.png (66.42 KB, 下载次数: 7)
/Users/admin/RustroverProjects/rust_wasm ├── Cargo.lock ├── Cargo.toml ├── src | └── lib.rs └── target ├── CACHEDIR.TAG └── debug ├── build ├── deps ├── examples └── incremental
[lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = { version = "0.2.89", features = [] }
use wasm_bindgen::prelude::*; #[wasm_bindgen] pub extern "C" fn rust_add(left: i32, right: i32) -> i32 { println!("Hello from Rust!"); left + right }
8.png (68.92 KB, 下载次数: 7)
9.png (34.49 KB, 下载次数: 7)
/Users/admin/RustroverProjects/rust_wasm/pkg ├── package.json ├── rust_wasm.d.ts ├── rust_wasm.js ├── rust_wasm_bg.wasm └── rust_wasm_bg.wasm.d.ts
/* tslint:disable */ /* eslint-disable */ /** * @param {number} num * @returns {string} */ export function msg_insert(num: number): string; /** * @param {number} left * @param {number} right * @returns {number} */ export function rust_add(left: number, right: number): number; /** */ export function rust_thread(): void; export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module; export interface InitOutput { readonly memory: WebAssembly.Memory; readonly msg_insert: (a: number, b: number) => void; readonly rust_add: (a: number, b: number) => number; readonly rust_thread: () => void; readonly __wbindgen_add_to_stack_pointer: (a: number) => number; readonly __wbindgen_free: (a: number, b: number, c: number) => void; } export type SyncInitInput = BufferSource | WebAssembly.Module; /** * Instantiates the given `module`, which can either be bytes or * a precompiled `WebAssembly.Module`. * * @param {SyncInitInput} module * * @returns {InitOutput} */ export function initSync(module: SyncInitInput): InitOutput; /** * If `module_or_path` is {RequestInfo} or {URL}, makes a request and * for everything else, calls `WebAssembly.instantiate` directly. * * @param {InitInput | Promise<InitInput>} module_or_path * * @returns {Promise<InitOutput>} */ export default function __wbg_init (module_or_path?: InitInput | Promise<InitInput>): Promise<InitOutput>;
10.png (42.73 KB, 下载次数: 7)
'use client' /* * @Author: wangweiqiang * @Date: 2024-06-18 17:03:34 * @LastEditors: wangweiqiang * @LastEditTime: 2024-06-18 23:09:55 * @Description: app.tsx */ import Image from "next/image"; import { useCallback, useEffect, useState } from "react"; import init, * as rustLibrary from 'rust_wasm' export default function Home() { const [addResult, setAddResult] = useState<number | null>(null) const [calculateTime, setCalculateTime] = useState<string>('') const initRustLibrary = useCallback(() => { init().then(() => { const result = rustLibrary.rust_add(5, 6) const timeStamp = rustLibrary.msg_insert(50000) setCalculateTime(timeStamp) setAddResult(result) }) }, []) useEffect(() => { initRustLibrary() }, [initRustLibrary]); return ( <main className="flex min-h-screen flex-col items-center p-24"> {/* .... */} <div className="mt-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left"> <div> rust代码计算结果:{addResult} </div> <div style={{ marginTop: '20px' }}> 二分法方式{calculateTime} </div> </div> </main> ); }
11.png (35.2 KB, 下载次数: 6)
use chrono::{DateTime, Utc}; use rand::Rng; #[derive()] #[allow(dead_code)] struct Data { content: String, from: String, head: String, msg_id: String, seq: i32, sid: String, topic: String, ts: DateTime<Utc>, } impl Data { fn new( content: String, from: String, head: String, msg_id: &str, seq: i32, sid: String, topic: String, ts: DateTime<Utc>, ) -> Self { Data { content, from, head, msg_id: msg_id.to_string(), seq, sid, topic, ts, } } } // 获取原始数据 fn get_origin_data(num: i32) -> Vec<Data> { let mut data: Vec<Data> = vec![]; // 存储数据的向量 .... // 创建 num 个数据 data } // 初始化结构体数据 fn init_struct_data(num: i32, text: &str) -> Data { let mut rng = rand::thread_rng(); let content = format!("{}_{}", rng.gen_range(1000..=9999), text).to_string(); .... let ts = Utc::now(); Data::new(content, from, head, &msg_id.as_str(), seq, sid, topic, ts) } // 二分法插入 fn binary_insert(data: &mut Vec<Data>, new_data: Data) { let _insert_pos = match data.binary_search_by_key(&new_data.seq, |d| d.seq) { Ok(pos) => { data[pos] = new_data; pos } Err(pos) => { data.insert(pos, new_data); pos } }; } #[wasm_bindgen] pub extern "C" fn msg_insert(num: i32) -> String { let mut data: Vec<Data> = get_origin_data(1000); let test_mode = [num]; let start_time = Utc::now().naive_utc().timestamp_micros(); for test_num in 0..test_mode.len() { for num in 0..test_mode[test_num] { let data_list = init_struct_data(num, "test"); binary_insert(&mut data, data_list); } } let duration = Utc::now().naive_utc().timestamp_micros() - start_time; let result = format!("插入{}条数据执行耗时:{}微秒", num, duration); result }
12.png (24.83 KB, 下载次数: 7)
来源:即时通讯网 - 即时通讯开发者社区!
轻量级开源移动端即时通讯框架。
快速入门 / 性能 / 指南 / 提问
轻量级Web端即时通讯框架。
详细介绍 / 精编源码 / 手册教程
移动端实时音视频框架。
详细介绍 / 性能测试 / 安装体验
基于MobileIMSDK的移动IM系统。
详细介绍 / 产品截图 / 安装体验
一套产品级Web端IM系统。
详细介绍 / 产品截图 / 演示视频
精华主题数超过100个。
连续任职达2年以上的合格正式版主
为论区做出突出贡献的开发者、版主等。
Copyright © 2014-2024 即时通讯网 - 即时通讯开发者社区 / 版本 V4.4
苏州网际时代信息科技有限公司 (苏ICP备16005070号-1)
Processed in 0.093750 second(s), 39 queries , Gzip On.