SpingCloud：Gateway+Nginx+Stomp+Minio构建聊天室并进行文件传输
注：本人使用阿里云服务器（安装mino）+本地虚拟机（安装nginx）进行，理论上完全在本地进行也可以。
1、前期准备：
1、将本地虚拟机设置为静态ip且能ping通外网，参考网址：https://www.cnblogs.com/wsongl/p/14534170.html（完全照做就行）
2、安装nginx：
#创建文件夹
mkdir -p /mydata/nginx
#下载并启动
docker run -p 80:80 --name nginx -d nginx:1.10
#将容器内的配置文件拷贝到当前nginx目录（注意此时我们的位置在mydata文件夹下，不要忘了后面有个点）
docker container cp nginx:/etc/nginx .
#停止nginx容器并删除nginx镜像
docker stop nginx
docker rm nginx
#重命名nginx为conf
mv nginx conf
#再次创建nginx文件夹
mkdir nginx
#将conf移动到nginx
mv conf nginx/
#创建实例
docker run -p 80:80 --name nginx \
-v /mydata/nginx/html:/usr/share/nginx/html \
-v /mydata/nginx/logs:/var/log/nginx \
-v /mydata/nginx/conf:/etc/nginx \
-d nginx:1.10
3、安装minio：
docker run -it -p 9000:9000 -p 9001:9001
--name minio \
-d --restart=always \
-e "MINIO_ROOT_USER=admin" \
-e "MINIO_ROOT_PASSWORD=123456" \
-v /mydata/minio/data:/data \
-v /mydata/minio/config:/root/.minio \
minio/minio server /data \
--console-address ":9001"
MINIO_ROOT_USER:登录账号
MINIO_ROOT_PASSWORD：登陆密码
2、Nginx反向代理配置：
2.1：官方文档参考：
1、minio官方文档：https://docs.min.io/（不要看中文文档，方法已经过期了）
2、gateway官方文档：https://spring.io/projects/spring-cloud-gateway
2.2：引入包：
gateway网关服务的pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.5.4</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.social</groupId> <artifactId>whales-gateway</artifactId> <version>0.0.1-SNAPSHOT</version> <name>whales-gateway</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> <spring-cloud.version>2020.0.3</spring-cloud.version> </properties> <dependencies> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId> <version>2.2.1.RELEASE</version> <!-- 使用spring loadbalancer，弃用ribbon --> <exclusions> <exclusion> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-netflix-ribbon</artifactId> </exclusion> </exclusions> </dependency> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId> <version>2.2.1.RELEASE</version> </dependency> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-loadbalancer</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-webflux</artifactId> </dependency> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-gateway</artifactId> </dependency> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-openfeign</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>io.projectreactor</groupId> <artifactId>reactor-test</artifactId> <scope>test</scope> </dependency> </dependencies> <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-dependencies</artifactId> <version>${spring-cloud.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
gateway的application.yml部分配置：
spring:
cloud:
gateway:
routes:
- id: community_host_route
uri: lb://whales-community
predicates:
- Host=community.whales.com
本人使用nacos为服务注册中心，在gateway的application.properties文件中配置：
spring.cloud.nacos.discovery.server-addr=119.xx.xx.xx:8848 #nacos安装的地址
spring.application.name= whales-gateway
server.port=88
2.3：nginx配置：
在linux上使用ifconfig检测其IP地址：
我们选取先前配置好的静态IP地址，在win10的hosts上配置相关域名，本人使用SwitchHosts软件直接进行配置：
随后在win上检查ip：
在linux上打开nginx.config进行配置，whales是可以替换成其他自己喜欢的命名，但必须与之后conf.d配置文件内容里的proxy_pass后的名字相同：
#进入nginx配置文件夹，打开nginx.config
cd /mydata/nginx/conf/
vi nginx.conf
#编辑文件内容：添加黄色部分字体
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
upstream whales{
server 192.168.6.49:88;
}
include /etc/nginx/conf.d/*.conf;
}
配置conf.d下的配置文件：
#进入conf.d文件下
cd /mydata/nginx/conf/conf.d/
#复制一份default.conf并进行编辑
cp default.conf whales.conf
vi whales.conf
#编辑文件内容：加量部分
server {
listen 80;
server_name whales.com *.whales.com;
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
location / {
proxy_set_header Host $host;
proxy_pass http://whales;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
截止目前nginx+gateway的反向代理完成。
2.4：nginx反向代理原理图：
3、minio配置实现
3.1：MinioConfig配置类
@Data @Component @ConfigurationProperties(prefix = "minio") public class MinioConfig { private String endpoint; private String accessKey; private String secretKey; private String bucketName; @Bean public MinioClient minioClient(){ MinioClient minioClient = MinioClient.builder() .endpoint(endpoint) .credentials(accessKey, secretKey) .build(); return minioClient; } }
进入Minio控制台生成密钥：
生成存储桶：
3.2：编写Minio工具类
/** * 实体类 * 爪哇笔记：https://blog.52itstyle.vip */ @Data @Configuration @ConfigurationProperties(prefix = "min.io") public class MinIoComponent{ private String endpoint; private String accessKey; private String secretKey; @Bean public MinioClient minClient(){ // 使用MinIO服务的URL，端口，Access key和Secret key创建一个MinioClient对象 MinioClient minioClient = new MinioClient.Builder().endpoint(endpoint).credentials(accessKey, secretKey).build(); return minioClient; } }
工具类中的方法可以在官方文档中找到然后进行实际应用的修改
@Component public class MinioUtils { @Autowired MinioClient minioClient; @SneakyThrows public void putObject(MultipartFile file, String bucket, String pathObject) { InputStream stream = file.getInputStream(); String type = file.getContentType(); //System.out.println(type); minioClient.putObject( PutObjectArgs.builder().bucket(bucket).object(pathObject).stream( stream, file.getSize(), -1) .contentType(type) .build()); } @SneakyThrows public void putObject(File file, String bucket, String pathObject) { InputStream stream = new FileInputStream(file); String type = file.getName().split("\\.")[1]; System.out.println(type); minioClient.putObject( PutObjectArgs.builder().bucket(bucket).object(pathObject).stream( stream, file.length(), -1) .contentType(type) .build()); } }
这里着重讲解下stream中的意义，有文件流、文件大小、分块大小。由于minio在传输中是将文件分块传输，所以有分块大小设置：
application.properties进行参数配置:
min.io.endpoint = http://119.23.57.189:9000
#生成密钥
min.io.accessKey =3B-----------------61
min.io.secretKey =+ANgi6S+----------------------2pqff3gS
#生成存储桶
min.io.bucket = whales-picture
3.3：实际代码
@Override public void sendPhotoToGroup(String groupId, String userId, MultipartFile file) throws ExecutionException, InterruptedException { //设置组与当日时间：文件夹命名方式：groupxxxxxxx/yyyyMMdd SimpleDateFormat s = new SimpleDateFormat("yyyyMMdd");//设置日期格式 String name = file.getOriginalFilename(); String type = file.getContentType(); String format = s.format(new Date()); //设置存储在minio的文件路径 String pathObject = "/Group" + groupId + "/" + format + "/" + name; minioUtils.putObject(file, MINIO_BUCKET, pathObject);
}
4、基于Stomp协议搭建Websocket聊天室：
4.1：WebSocketStompConfig配置
@Configuration @EnableWebSocketMessageBroker public class WebSocketStompConfig implements WebSocketMessageBrokerConfigurer { // 这个方法的作用是添加一个服务端点，来接收客户端的连接。 @Override public void registerStompEndpoints(StompEndpointRegistry registry){ registry.addEndpoint("/whaleSocial").withSockJS(); } @Override // 这个方法的作用是定义消息代理，通俗一点讲就是设置消息连接请求的各种规范信息。 public void configureMessageBroker(MessageBrokerRegistry registry){ //服务端给客户端发消息的地址的前缀信息 //@SenTo/subscribe registry.enableSimpleBroker("/member"); //客户端给服务端发消息的地址的前缀 //@SubscribeMapping/subscribe只接收此前缀的消息 //@MessageMapping/send registry.setApplicationDestinationPrefixes("/group"); } }
4.2：Controller类
@Controller /*@RequestMapping("/")*/ public class CommunityController { @ResponseBody @PostMapping("/photos/{groupId}/{userId}") public GraceJSONResult sendPhoto(@PathVariable String groupId, @PathVariable String userId, MultipartFile file) throws ExecutionException, InterruptedException{ sendMessageService.sendPhotoToGroup(groupId, userId, file); return GraceJSONResult.ok(); } }
4.3：Service类
@Service public class CommunitySendMessageServiceServiceImpl implements CommunitySendMessageService { private final static String REDIS_MESSAGE_USER = "redis_message_user"; private final static String GROUP_MEMBER = "redis_group_member"; private final static String GROUP_MESSAGES = "redis_messages"; private final static String MINIO_BUCKET = "whales-picture"; @Resource private SimpMessagingTemplate simpMessagingTemplate; @Autowired private StringRedisTemplate redisTemplate; @Resource private GroupMembersMapper groupMembersMapper; @Autowired MinioUtils minioUtils; @Autowired ThreadPoolExecutor executor; @Override public void sendPhotoToGroup(String groupId, String userId, MultipartFile file) throws ExecutionException, InterruptedException { //设置组与当日时间：文件夹命名方式：groupxxxxxxx/yyyyMMdd SimpleDateFormat s = new SimpleDateFormat("yyyyMMdd");//设置日期格式 String name = file.getOriginalFilename(); String type = file.getContentType(); String format = s.format(new Date()); //设置存储在minio的文件路径 String pathObject = "/Group" + groupId + "/" + format + "/" + name; minioUtils.putObject(file, MINIO_BUCKET, pathObject); //获取可访问的url文件路径 //TODO 将地址更换为域名,photosUrl是将回显地址给传前端 String photosUrl = "http://119.xx.xx.189:9000/" + MINIO_BUCKET + pathObject; simpMessagingTemplate.convertAndSend("/member/photos/" + groupId, photosUrl); } }
4.4：前端测试页面：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8" /> <title>Spring Boot+WebSocket+广播式</title> <script src="https://cdn.bootcdn.net/ajax/libs/sockjs-client/1.5.1/sockjs.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script> </head> <body onload="disconnect()"> <noscript><h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2></noscript> <div> <!-- <div> <button id="enter" onclick="enter();">进入群聊</button> <button id="esc" disabled="disabled" onclick="disconnect();">退出群聊</button> </div>--> <div> <button id="connect" onclick="connect();">进入群聊</button> <button id="disconnect" disabled="disabled" onclick="disconnect();">退出群聊</button> </div> <div id="conversationDiv"> <form action="/photos/1148973713/18819776464" method="post" enctype="multipart/form-data" target="rfFrame"> <input type="file" id="file" name="file"> <input type="submit" value="提交" /><p> </form> <img id="photos"/> </div> </div> <script type="text/javascript"> var stompClient = null; function setConnected(connected) { document.getElementById('connect').disabled = connected; document.getElementById('disconnect').disabled = !connected; document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden'; $('#response').html(); } function connect() { // 连接 SockJs 的 endpoint 名称为 "/whaleSocial" var socket = new SockJS('/whaleSocial',null,{timeout: 15000}); // 使用 STOMP 子协议的 WebSocket 客户端 stompClient = Stomp.over(socket); stompClient.connect({}, function(frame) { setConnected(true); console.log('Connected: ' + frame);// 通过 stompClient.subscribe 订阅 stompClient.subscribe('/member/photos/1148973713', function(respnose){ console.log("This is:"+respnose.body) showPhotosResponse(respnose.body); }); }); }function disconnect() { // 断开连接 if (stompClient != null) { stompClient.disconnect(); } setConnected(false); console.log("Disconnected"); }function showPhotosResponse(message){ $("#photos").attr("src",message) } </script> </body> </html>
此时如果使用域名访问会报错：Incompatibile SockJS! Main site uses: "1.1.5", the iframe: "1.0.0"，因为websoket必须要使用HTTP/1.1通信协议，所以要到nginx再新增配置：
server {
listen 80;
server_name whales.com *.whales.com;
#charset koi8-r;
#access_log /var/log/nginx/log/host.access.log main;
location / {
proxy_set_header Host $host;
proxy_pass http://whalesocial;
}
#前缀whaleSocial必须与WebSocketConfig中Stomp服务端设置的节点名字相同
location /whaleSocial/{
proxy_pass http://192.168.6.49:11000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
配置完后就能使用域名进入网页发送websocket消息，并将图片上传Minio并进行回显。
浙公网安备 33010602011771号