当前位置：首页 > news >正文

websocket webworker教程及应用

news 2025/8/3 6:20:44

WebSocket 和 Web Workers 是两种不同的 Web 技术，分别用于实现实时通信和后台线程处理。以下是它们的简要教程：

WebSocket 教程

1. 什么是 WebSocket？
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它允许服务器主动向客户端推送数据，适用于实时通信场景。

2. 如何使用 WebSocket？

创建 WebSocket 对象：

const socket = new WebSocket('ws://example.com/socketserver');

监听事件：

// 连接打开时触发
socket.addEventListener('open', function (event) {socket.send('Hello Server!');
});// 接收到消息时触发
socket.addEventListener('message', function (event) {console.log('Message from server ', event.data);
});// 连接关闭时触发
socket.addEventListener('close', function (event) {console.log('The connection has been closed successfully.');
});// 发生错误时触发
socket.addEventListener('error', function (event) {console.error('WebSocket error observed:', event);
});

发送消息：
```
socket.send('Hello Server!');
```
关闭连接：
```
socket.close();
```

3. 应用场景

实时聊天应用
在线游戏
实时数据监控

Web Workers 教程

1. 什么是 Web Worker？
Web Worker 是一种在后台线程中运行脚本的技术，不会干扰页面的性能。它适用于执行耗时的计算任务。

2. 如何使用 Web Worker？

创建 Worker 对象：

const worker = new Worker('worker.js');

监听事件：

// 接收到消息时触发
worker.addEventListener('message', function (event) {console.log('Message from worker:', event.data);
});// 发生错误时触发
worker.addEventListener('error', function (event) {console.error('Worker error:', event);
});

发送消息：
```
worker.postMessage('Hello Worker!');
```
终止 Worker：
```
worker.terminate();
```

3. worker.js 示例

// worker.js
self.addEventListener('message', function (event) {const data = event.data;// 执行一些耗时操作const result = performHeavyTask(data);// 发送结果回主线程self.postMessage(result);
});function performHeavyTask(data) {// 模拟耗时操作let result = 0;for (let i = 0; i < data; i++) {result += i;}return result;
}