websocket文件发送和下载
时间: 2024-05-16 08:15:07 浏览: 17
使用 WebSocket 进行文件的发送和下载可以分为两个步骤:
1. 文件上传/发送
在客户端,你可以使用 JavaScript 的 FileReader API 将文件读取为二进制数据,并将其发送到服务器。在服务器端,你需要将接收到的二进制数据写入一个文件中,以实现文件的上传/发送。
客户端实现代码示例:
```javascript
const fileInput = document.getElementById('fileInput');
const socket = new WebSocket('ws://localhost:8080');
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = () => {
const buffer = reader.result;
socket.send(buffer);
};
});
```
服务器端实现代码示例:
```javascript
const fs = require('fs');
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
const file = './file.txt';
fs.writeFile(file, message, (err) => {
if (err) {
console.error(err);
} else {
console.log('File saved successfully.');
}
});
});
});
```
2. 文件下载
在客户端,你可以使用 JavaScript 的 Blob 和 URL API 将接收到的二进制数据生成一个可下载的链接,然后将其提供给用户进行下载。在服务器端,你需要读取要下载的文件并将其发送到客户端。
客户端实现代码示例:
```javascript
const downloadButton = document.getElementById('downloadButton');
const socket = new WebSocket('ws://localhost:8080');
downloadButton.addEventListener('click', () => {
socket.send('download');
});
socket.addEventListener('message', (event) => {
const url = URL.createObjectURL(new Blob([event.data]));
const link = document.createElement('a');
link.href = url;
link.download = 'file.txt';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
});
```
服务器端实现代码示例:
```javascript
const fs = require('fs');
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
ws.on('message', (message) => {
if (message === 'download') {
const file = './file.txt';
fs.readFile(file, (err, data) => {
if (err) {
console.error(err);
} else {
ws.send(data);
}
});
}
});
});
```
以上是使用 WebSocket 进行文件发送和下载的基本步骤和示例代码,你可以根据自己的需求进行修改和扩展。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)