websocket怎么传输图片视频

websocket

小亿

475

2024-05-31 09:31:16

栏目: 编程语言

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

websocket怎么传输图片视频

最新问答

相关标签