模拟一个广播弹幕的websocket。gateway通过eureka注册中心拉取服务进行转发websocket

1.搭建 Spring WebSocket

1.1 pom.xml websocket maven依赖

 
  1. <dependency>
  2. <groupId>org.springframework.boot</groupId>
  3. <artifactId>spring-boot-starter-actuator</artifactId>
  4. </dependency>
  5. <dependency>
  6. <groupId>org.springframework.boot</groupId>
  7. <artifactId>spring-boot-starter-web</artifactId>
  8. </dependency>
  9. <dependency>
  10. <groupId>org.springframework.cloud</groupId>
  11. <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
  12. </dependency>
  13. <dependency>
  14. <groupId>org.springframework.boot</groupId>
  15. <artifactId>spring-boot-starter-websocket</artifactId>
  16. </dependency>
  17. <dependency>
  18. <groupId>org.springframework.boot</groupId>
  19. <artifactId>spring-boot-devtools</artifactId>
  20. <optional>true</optional>
  21. </dependency>

1.2 application.yml 配置文件

 
  1. spring:
  2. application:
  3. name: bullet
  4. server:
  5. port: 5678
  6. eureka:
  7. client:
  8. serviceUrl:
  9. defaultZone: http://localhost:1025/eureka/

1.3 BulletApplication websocket启动程序

 
  1. @SpringBootApplication
  2. public class BulletApplication {
  3.  
  4. public static void main(String[] args) {
  5. SpringApplication.run(BulletApplication.class, args);
  6. }
  7. }

1.4 WebSocketAutoConfig websocket配置类

 
  1. @Configuration
  2. @EnableWebSocketMessageBroker
  3. public class WebSocketAutoConfig implements WebSocketMessageBrokerConfigurer {
  4.  
  5. @Override
  6. public void registerStompEndpoints(StompEndpointRegistry registry) {
  7. registry.addEndpoint("/bullet") //开启/bullet端点
  8. .setAllowedOrigins("*") //允许跨域访问
  9. .withSockJS(); //使用sockJS
  10. }
  11.  
  12. @Override
  13. public void configureMessageBroker(MessageBrokerRegistry registry) {
  14. registry.enableSimpleBroker("/toAll"); //订阅Broker名称
  15. }
  16. }

1.5 BulletMessageVO类

使用lombok的@Getter和@Setter注解来自动生成get、set方法

 
  1. @Getter
  2. @Setter
  3. public class BulletMessageVO {
  4. String username;
  5. String message;
  6. }

1.6 BulletController websocket控制器

 
  1. @Controller
  2. public class BulletController {
  3.  
  4. @MessageMapping("/chat")
  5. @SendTo("/toAll/bulletScreen") //SendTo 发送至 Broker 下的指定订阅路径
  6. public String say(BulletMessageVO clientMessage) {
  7. String result=null;
  8. if (clientMessage!=null){
  9. result=clientMessage.getUsername()+":"+clientMessage.getMessage();
  10. }
  11. return result;
  12. }
  13. }

2 搭建 Spring Cloud Gateway

2.1 pom.xml gateway网关maven依赖

 
  1. <dependency>
  2. <groupId>org.springframework.boot</groupId>
  3. <artifactId>spring-boot-starter-actuator</artifactId>
  4. </dependency>
  5. <dependency>
  6. <groupId>org.springframework.cloud</groupId>
  7. <artifactId>spring-cloud-starter-gateway</artifactId>
  8. </dependency>
  9. <dependency>
  10. <groupId>org.springframework.cloud</groupId>
  11. <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
  12. </dependency>
  13. <dependency>
  14. <groupId>org.springframework.boot</groupId>
  15. <artifactId>spring-boot-devtools</artifactId>
  16. <scope>runtime</scope>
  17. </dependency>

2.2 application.yml gateway网关配置文件

 
  1. spring:
  2. application:
  3. name: gateway
  4. gateway:
  5. routes:
  6. - id: bulletscreen
  7. # 重点！/info必须使用http进行转发，lb代表从注册中心获取服务
  8. uri: lb://bullet
  9. predicates:
  10. # 重点！转发该路径！
  11. - Path=/bullet/info/**
  12. - id: bulletscreen
  13. # 重点！lb:ws://代表从注册中心获取服务，并且转发协议为websocket，这种格式怀疑人生！
  14. uri: lb:ws://bullet
  15. predicates:
  16. # 转发/bullet端点下的所有路径
  17. - Path=/bullet/**
  18. server:
  19. port: 8888
  20. eureka:
  21. client:
  22. serviceUrl:
  23. defaultZone: http://localhost:1025/eureka/

2.3 GatewayApplication gateway启动类

 
  1. @SpringCloudApplication
  2. public class GatewayApplication {
  3.  
  4. public static void main(String[] args) {
  5. SpringApplication.run(GatewayApplication.class, args);
  6. }
  7. }

3 编写html

这个是从网上找来的html代码，可以保存到本地文件，不需要放入服务里面

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Spring Boot WebSocket+广播式</title>
  6. </head>
  7. <body onload="disconnect()">
  8. <noscript>
  9. <h2 style="color:#ff0000">貌似你的浏览器不支持websocket</h2>
  10. </noscript>
  11. <div>
  12. <div>
  13. <button id="connect" onclick="connect()">连接</button>
  14. <button id="disconnect" onclick="disconnect();">断开连接</button>
  15. </div>
  16. <div id="conversationDiv">
  17. <label>输入你的名字</label> <input type="text" id="name" />
  18. <br>
  19. <label>输入消息</label> <input type="text" id="messgae" />
  20. <button id="send" onclick="send();">发送</button>
  21. <p id="response"></p>
  22. </div>
  23. </div>
  24. <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
  25. <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
  26. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  27. <script type="text/javascript">
  28. var stompClient = null;
  29. //gateway网关的地址
  30. var host="http://127.0.0.1:8888";
  31. function setConnected(connected) {
  32. document.getElementById('connect').disabled = connected;
  33. document.getElementById('disconnect').disabled = !connected;
  34. document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
  35. $('#response').html();
  36. }
  37.  
  38. function connect() {
  39. //地址+端点路径，构建websocket链接地址
  40. var socket = new SockJS(host+'/bullet');
  41. stompClient = Stomp.over(socket);
  42. stompClient.connect({}, function(frame) {
  43. setConnected(true);
  44. console.log('Connected:' + frame);
  45. //监听的路径以及回调
  46. stompClient.subscribe('/toAll/bulletScreen', function(response) {
  47. showResponse(response.body);
  48. });
  49.  
  50. });
  51. }
  52.  
  53.  
  54. function disconnect() {
  55. if (stompClient != null) {
  56. stompClient.disconnect();
  57. }
  58. setConnected(false);
  59. console.log("Disconnected");
  60. }
  61.  
  62. function send() {
  63. var name = $('#name').val();
  64. var message = $('#messgae').val();
  65. //发送消息的路径
  66. stompClient.send("/chat", {}, JSON.stringify({username:name,message:message}));
  67. }
  68.  
  69. function showResponse(message) {
  70. var response = $('#response');
  71. response.html(message);
  72. }
  73. </script>
  74. </body>
  75. </html>

4 启动程序

  1. 启动Eureka 服务端，开启注册中心
  2. 启动Bullet WebSocket程序
  3. 启动GateWay网关

5 测试程序

  1. 开启多个html页面，并打开控制台

  2. 在多个页面中点击连接按钮，观察控制台是否连接成功

  1. 输入名字和消息，观察是否成功进行广播

6 源码

https://github.com/naah69/SpringCloud-Gateway-WebSocket-Demo

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生