前端建立WebSocket(单纯new)

本文介绍了WebSocket的基础知识,展示了如何创建WebSocket连接,包括连接建立、消息接收和发送的函数,并提供了在不同协议环境下的使用方法。通过学习,你可以掌握WebSocket在实时通信中的应用。

建立

this.wSocket = new WebSocket('ws://192.xx.xx.xx:8080/xxx/xxxx'); //记住没有http://
 if (!this.wSocket) {
    console.log('您的浏览器不支持websocket协议!'); //不进来这个表示浏览器支持WebSocket
 } 

PS:若是https环境,将ws改为wss即可。


俩个函数接收与发送

this.wSocket.onopen = () => {
   console.log('websocket已链接.');
};
 this.wSocket.onmessage = (e) => {
   console.log('e就是返回的数据');
   // 在这里写处理函数
};
this.wSocket.send(xxxxx); // 向后端发送数据

当想关闭时

this.wSocket.close();
this.wSocket.onclose = () => {
   console.log('websocket连接已关闭...');
 };

 

学习于:这里

 

websocket的字节接收与发送:这里

 

websocket知识点:这里

<think>嗯,用户询问的是Tauri框架中WebSocket的使用方法,看起来需要详细的实现指南。用户可能是开发者,正在尝试在桌面应用中集成实时通信功能。考虑到Tauri的特殊性(Rust后端+前端框架),需要同时说明两端实现。 从技术细节来看,核心是三个部分:Rust端建立WebSocket服务(用tauri-plugin-websocket或手动实现)、前端连接逻辑、以及双向通信机制。用户可能还关心实际应用场景,比如是否需要处理重连、二进制数据传输等进阶需求。 准备在回答中提供两端代码示例,因为单纯讲概念不如直接展示可运行的代码片段。同时要提醒配置文件修改和依赖安装,这是Tauri开发中容易卡住的点。最后补充常见问题,这样用户遇到错误时能快速排查。 用户没有说明具体使用场景,但WebSocket通常用于实时数据推送(如股票行情、聊天应用),所以准备在应用场景部分举例说明。如果用户后续追问性能优化,可以再深入讨论Rust端的并发处理。 安全方面需要强调wss协议的重要性,特别是生产环境。不过示例中用ws://localhost是本地开发常见的做法。</think>以下是Tauri框架中使用WebSocket的完整实现指南,包含配置、代码示例和常见问题解决方案: ### 一、基础配置 1. **启用全局API** 在`tauri.conf.json`中启用全局对象: ```json { "build": { "withGlobalTauri": true } } ``` 2. **安装依赖** ```bash npm install @tauri-apps/api # 前端 cargo add tokio-tungstenite # Rust后端 ``` ### 二、Rust服务端实现 ```rust // src/main.rs use tauri::Manager; use tokio::net::{TcpListener, TcpStream}; use tokio_tungstenite::tungstenite::protocol::Message; #[tauri::command] async fn start_websocket(port: u16) { let listener = TcpListener::bind(format!("127.0.0.1:{}", port)).await.unwrap(); while let Ok((stream, _)) = listener.accept().await { tokio::spawn(handle_connection(stream)); } } async fn handle_connection(stream: TcpStream) { let mut ws_stream = tokio_tungstenite::accept_async(stream).await.unwrap(); while let Some(msg) = ws_stream.next().await { match msg { Ok(Message::Text(text)) => { println!("收到消息: {}", text); ws_stream.send(Message::Text("ACK: ".to_string() + &text)).await.unwrap(); } _ => break, } } } ``` ### 三、前端连接示例 ```javascript // 前端页面 import { invoke } from '@tauri-apps/api/tauri' // 启动WebSocket服务 invoke('start_websocket', { port: 9000 }) // 创建客户端连接 const socket = new WebSocket('ws://localhost:9000') socket.onopen = () => { socket.send('Hello Tauri!') } socket.onmessage = (event) => { console.log('收到服务端响应:', event.data) } ``` ### 四、双向通信进阶 ```rust // Rust端主动推送 use tauri::Window; #[tauri::command] fn send_alert(window: Window) { window.emit("websocket-event", "服务端主动消息").unwrap(); } ``` ```javascript // 前端监听 import { appWindow } from '@tauri-apps/api/window' appWindow.listen('websocket-event', (event) => { console.log('服务端推送:', event.payload) }) ``` ### 五、应用场景 1. **实时数据看板**:股票行情/物联网设备监控 2. **桌面聊天应用**:结合Tauri系统通知API 3. **自动更新系统**:推送新版本下载进度 4. **多窗口同步**:主窗口与浮动控制面板通信 ### 六、常见问题解决 1. **跨域问题** 在`tauri.conf.json`添加白名单: ```json "security": { "csp": "connect-src ws://localhost:9000" } ``` 2. **连接断开处理** ```javascript // 前端重连机制 function reconnect() { setTimeout(() => { const newSocket = new WebSocket('ws://localhost:9000') newSocket.addEventListener('open', /*...*/) }, 1000) } ``` 3. **二进制数据传输** ```rust // Rust端处理 Message::Binary(data) => { let img = image::load_from_memory(&data).unwrap(); } ``` > **性能提示**:对于高频数据传输(>1000msg/s),建议使用[Protocol Buffers](https://protobuf.dev)替代JSON序列化 [^1]: Tauri全局对象需在`tauri.conf.json`显式启用 [^2]: 端口冲突时可尝试`netstat -ano|findstr :9000`检查占用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值