在浏览器WASM环境用Rust实现UDP Socket遇错求助

问题描述 #

使用Rust在浏览器WASM环境中实现UDP Socket，执行wasm-pack build --target web构建后，浏览器控制台报错：

Uncaught TypeError: Cannot read properties of undefined (reading '__wbindgen_add_to_stack_pointer')
at new UdpSocketClient (udp_socket_wasm.js:162:18)
at Socket.js:6:38

相关源码如下：

src/lib.rs #

use std::net::UdpSocket;
use std::str;
use wasm_bindgen::prelude::*;
use wasm_bindgen::JsValue;
//use web_sys::{console, window};

#[wasm_bindgen]
pub struct UdpSocketClient {
    socket: UdpSocket
}

#[wasm_bindgen]
impl UdpSocketClient {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Result<UdpSocketClient, JsValue> {
        let socket = UdpSocket::bind("0.0.0.0:0").map_err(|e| JsValue::from_str(&e.to_string()))?;
        Ok(UdpSocketClient { socket })
    }

    pub fn send(&self, host: &str, port: u32, data: &[u8]) -> Result<(), JsValue> {
        let server_address = format!("{}:{}", host, port);
        self.socket
            .send_to(data, &server_address)
            .map_err(|e| JsValue::from_str(&e.to_string()))?;
        Ok(())
    }

    pub fn receive(&self, buffer: &mut [u8]) -> Result<usize, JsValue> {
        self.socket
            .recv(buffer)
            .map_err(|e| JsValue::from_str(&e.to_string()))
    }
}

Cargo.toml #

[lib]
crate-type = ["cdylib", "rlib"]

[package]
name = "udp_socket_wasm"
version = "0.1.0"
edition = "2018"

[dependencies]
wasm-bindgen = "0.2"
web-sys = "0.3"
js-sys = "0.3"

Socket.js #

import { UdpSocketClient } from './pkg/udp_socket_wasm.js';

const udpSocket = new UdpSocketClient();

// Send UDP data
const host = '127.0.0.1'; // Replace with your host
const port = 6900; // Replace with your port
// const data = new Uint8Array([/* your data here */]);

const textMessage = "Hello, UDP!"; // Your message as a string
const textEncoder = new TextEncoder(); // Create a TextEncoder

// Encode the message as a Uint8Array
const data = textEncoder.encode(textMessage);

udpSocket
    .send(host, port, data)
    .then(() => {
        console.log('Data sent successfully.');
    })
    .catch((error) => {
        console.error('Error sending data:', error);
    });

// Receive UDP data (this is asynchronous)
const buffer = new Uint8Array(1024); // Adjust the buffer size as needed

udpSocket
    .receive(buffer)
    .then((bytesReceived) => {
        console.log(`Received ${bytesReceived} bytes:`, buffer.slice(0, bytesReceived));
    })
    .catch((error) => {
        console.error('Error receiving data:', error);
    });

index.html（header标签） #

<script src="Socket.js" type="module" defer></script>

已尝试重装wasm-bindgen-cli和wasm-pack，也使用window.onload确保资源加载完成，均未解决问题，目标是实现浏览器端UDP Socket支持，与依赖UDP传输的后端服务通信。

解决方案 #

1. 核心问题分析 #

• Rust标准库的std::net::UdpSocket不支持浏览器WASM环境：浏览器没有暴露直接的UDP Socket API，标准库的网络模块在WASM编译时会被替换为未实现的桩代码，运行时会导致绑定生成错误（即__wbindgen_add_to_stack_pointer未定义的报错）。
• 浏览器的UDP通信限制：浏览器本身不允许直接创建UDP Socket连接到任意服务器，仅支持通过WebRTC DataChannel（模拟UDP式的不可靠传输）或实验性的Web UDP（仅同源或经过CORS授权的场景）实现类UDP通信。

2. 可行实现方案 #

方案A：使用WebRTC DataChannel实现类UDP通信

WebRTC DataChannel支持不可靠、低延迟的数据传输，可模拟UDP的特性，适合与后端服务通信。修改后的Rust代码示例：

use wasm_bindgen::prelude::*;
use web_sys::{RtcDataChannel, RtcPeerConnection, RtcConfiguration};
use js_sys::Object;

#[wasm_bindgen]
pub struct UdpClient {
    data_channel: RtcDataChannel,
}

#[wasm_bindgen]
impl UdpClient {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Result<UdpClient, JsValue> {
        // 配置PeerConnection（需后端信令服务协助建立连接）
        let config = RtcConfiguration::new();
        let peer_connection = RtcPeerConnection::new_with_configuration(&config)?;
        
        // 创建DataChannel，设置为不可靠模式（模拟UDP）
        let data_channel = peer_connection.create_data_channel("udp-sim", Object::new())?;
        data_channel.set_reliable(false);
        
        Ok(UdpClient { data_channel })
    }

    pub fn send(&self, data: &[u8]) -> Result<(), JsValue> {
        let buffer = js_sys::Uint8Array::from(data);
        self.data_channel.send_with_u8_array(&buffer)?;
        Ok(())
    }

    // 绑定消息接收回调
    pub fn on_message(&self, callback: &js_sys::Function) -> Result<(), JsValue> {
        let closure = Closure::wrap(Box::new(move |event: web_sys::MessageEvent| {
            if let Ok(buffer) = event.data().dyn_into::<js_sys::Uint8Array>() {
                let rust_buffer = buffer.to_vec();
                let _ = callback.call1(&JsValue::NULL, &JsValue::from_serde(&rust_buffer).unwrap());
            }
        }) as Box<dyn FnMut(web_sys::MessageEvent)>);
        self.data_channel.set_onmessage(Some(closure.as_ref().unchecked_ref()));
        closure.forget();
        Ok(())
    }
}

方案B：通过WebSocket代理后端UDP服务

如果后端无法支持WebRTC，可搭建一个WebSocket中间服务，将浏览器的WebSocket请求转发为UDP包发送到目标服务，再将UDP响应通过WebSocket返回给浏览器。这种方式无需修改浏览器端的核心逻辑，仅需将UDP操作替换为WebSocket通信。

3. 临时报错修复（仅验证可行性） #

若需确认绑定生成问题的根源，可先移除std::net::UdpSocket的使用，替换为无网络操作的测试代码，验证WASM绑定是否正常工作：

use wasm_bindgen::prelude::*;
use wasm_bindgen::JsValue;

#[wasm_bindgen]
pub struct UdpSocketClient;

#[wasm_bindgen]
impl UdpSocketClient {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Result<UdpSocketClient, JsValue> {
        Ok(UdpSocketClient)
    }

    pub fn send(&self, _host: &str, _port: u32, _data: &[u8]) -> Result<(), JsValue> {
        Ok(())
    }

    pub fn receive(&self, _buffer: &mut [u8]) -> Result<usize, JsValue> {
        Ok(0)
    }
}

执行构建后若不再报错，即可确认是标准库UDP API不支持WASM导致的问题。

内容的提问来源于stack exchange，提问作者Niko H.