场景
浏览器(客户端)发送获取图片的请求,参数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');
};
缓存更新策略
CDN缓存有一定的有效期,当源服务器上的图片更新时,需要通过以下方式更新CDN缓存:
- 缓存失效:在源服务器上更新图片后,通过CDN管理控制台或API手动使相关路径缓存失效。
- 版本控制:在图片URL中加入版本号或时间戳,如https://cdn.example.com/folder/image_v2.jpg,确保浏览器每次请求都获取最新的图片。
总结
通过上述方案,CDN在浏览器请求图片并通过WebSocket推送过程中,起到了减少延迟、减轻服务器负载和提高系统可靠性的作用。浏览器通过CDN快速获取图片,同时保持顺序展示,实现了高效、流畅的医生阅片体验。