客户端从服务器端获取图片场景，加入CDN的实施方案

最新推荐文章于 2024-06-26 17:18:42 发布

爱看老照片

最新推荐文章于 2024-06-26 17:18:42 发布

阅读量975

点赞数 18

分类专栏：网络及IT网站文章标签： CDN 内容分发网络缓存加速

本文链接：https://blog.csdn.net/qq_29025955/article/details/139831015

版权

网络及IT网站专栏收录该内容

11 篇文章 0 订阅

订阅专栏

场景

浏览器（客户端）发送获取图片的请求，参数1—指定文件夹，参数2—指定文件夹中的指定图片名称（数字编号）作为开始，然后web服务器端通过websocket的方式从指定图片开始源源不断的按照顺序依次向浏览器发送图片。注：这些图片就存储在web服务器上的某个目录中。

CDN的作用

CDN通过将内容缓存到靠近用户的多个边缘节点，减少传输延迟，提高传输速度和可靠性。对于你的场景，CDN可以在以下方面发挥作用：

减少延迟：通过在全球分布的边缘节点缓存图片，CDN可以将图片快速传输给地理位置不同的医生，减少网络延迟。
减轻服务器负载：将图片请求分流到CDN节点，减轻了Web服务器的压力，提高整体系统的稳定性和响应速度。
提高可靠性：CDN的冗余机制确保了即使某个节点出现问题，图片也可以从其他节点获取，提高了系统的可靠性。

实施方案

图片存储和缓存策略
首先，需要将图片上传到Web服务器，并通过CDN进行缓存。CDN会将图片分发到其全球节点。
配置CDN
配置CDN服务，将图片目录设置为缓存目录。常见的CDN服务提供商包括Cloudflare、Akamai、Amazon CloudFront等。
图片请求流程
当浏览器请求图片时，Web服务器根据请求参数（指定文件夹和指定图片名称）进行处理。具体流程如下：

（1）浏览器请求图片：

浏览器通过WebSocket发送请求，包含指定文件夹和开始图片编号。

（2）Web服务器处理请求：

Web服务器接收请求，根据参数从本地目录中查找相应的图片。
将图片的URL转换为CDN的URL。

（3）图片推送：

Web服务器通过WebSocket将图片的CDN URL推送给浏览器。
浏览器从CDN节点获取图片并展示。

（4）连续图片推送：

Web服务器依次查找下一张图片的路径，继续通过WebSocket推送CDN URL。
浏览器从CDN获取下一张图片，保证图片连续、顺序地展示。

具体实现

配置CDN

假设使用Amazon CloudFront，配置步骤如下：

在AWS管理控制台创建一个新的CloudFront分配。
配置源为你的Web服务器域名。
设置缓存行为规则，缓存所有图片请求。
获取CloudFront分配的域名，类似于d12345678.cloudfront.net。

修改Web服务器

在Spring Boot项目中，通过WebSocket推送图片CDN URL：

import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.nio.file.*;
import java.util.List;
import java.util.stream.Collectors;

public class ImageWebSocketHandler extends TextWebSocketHandler {

    @Value("${cdn.domain}")
    private String cdnDomain;

    @Value("${image.base.path}")
    private String imageBasePath;

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String payload = message.getPayload();
        String[] params = payload.split(",");
        String folder = params[0];
        int startImage = Integer.parseInt(params[1]);

        List<Path> imagePaths = Files.list(Paths.get(imageBasePath, folder))
                .sorted()
                .collect(Collectors.toList());

        for (int i = startImage; i < imagePaths.size(); i++) {
            Path imagePath = imagePaths.get(i);
            String imageName = imagePath.getFileName().toString();
            String imageUrl = String.format("https://%s/%s/%s", cdnDomain, folder, imageName);

            session.sendMessage(new TextMessage(imageUrl));
            Thread.sleep(1000); // 控制图片推送速度
        }
    }
}

前端处理

使用JavaScript在浏览器端通过WebSocket接收CDN URL并显示图片：

const socket = new WebSocket('ws://localhost:8080/ws/images');

socket.onopen = function() {
    const folder = 'exampleFolder';
    const startImage = 0;
    socket.send(`${folder},${startImage}`);
};

socket.onmessage = function(event) {
    const imageUrl = event.data;
    const img = document.createElement('img');
    img.src = imageUrl;
    img.style.width = '100%';
    document.body.appendChild(img);
};

socket.onclose = function() {
    console.log('WebSocket connection closed');
};