websocket怎么传输图片视频

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

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

客户端代码：

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);};

服务端代码：

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 或直接传输文件）来传输大型图片和视频。