websocket怎么传输图片视频

WebSocket 是一种在单个 TCP 连接上进行全双工通信的通信协议，通常用于实时数据传输。要在 WebSocket 上传输图片和视频，可以将图片和视频文件转换为 Base64 编码的字符串，然后通过 WebSocket 发送。

以下是一个示例代码，演示如何使用 WebSocket 传输图片和视频：

1. 客户端代码：

const ws = new WebSocket('ws://localhost:3000');  ws.onopen = () => {   console.log('WebSocket 连接成功');      // 发送图片   const image = new Image();   image.src = 'image.png';   image.onload = () => {     const canvas = document.createElement('canvas');     canvas.width = image.width;     canvas.height = image.height;          const ctx = canvas.getContext('2d');     ctx.drawImage(image, 0, 0);          const imageData = canvas.toDataURL('image/png');     ws.send(imageData);   };      // 发送视频   const video = document.createElement('video');   video.src = 'video.mp4';   video.oncanplay = () => {     const canvas = document.createElement('canvas');     canvas.width = video.videoWidth;     canvas.height = video.videoHeight;          const ctx = canvas.getContext('2d');     ctx.drawImage(video, 0, 0);          const videoData = canvas.toDataURL('image/jpeg');     ws.send(videoData);   }; };  ws.onmessage = (event) => {   console.log('收到消息：', event.data); }; 

2. 服务端代码：

const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 3000 });  wss.on('connection', (ws) => {   console.log('客户端已连接');      ws.on('message', (data) => {     console.log('收到数据：', data);          // 处理图片     if (data.startsWith('data:image')) {       // 对 Base64 编码的图片数据进行处理     }          // 处理视频     if (data.startsWith('data:video')) {       // 对 Base64 编码的视频数据进行处理     }   }); }); 

在客户端代码中，我们首先创建一个 WebSocket 连接，并在连接成功后发送图片和视频数据。在服务端代码中，我们创建一个 WebSocket 服务器，并在收到数据后对图片和视频数据进行处理。

请注意，由于 Base64 编码会增加数据大小，因此传输大型图片和视频可能会导致性能问题。在实际应用中，建议使用其他方式（如 CDN 或直接传输文件）来传输大型图片和视频。