spring boot(学习笔记第十五课)
- Spring boot的websocket(广播)
学习内容：
- Spring boot的websocket（广播）
1. Spring boot的websocket（广播）
- 回顾下web server的进化
-
- 第一代Web程序，使用整体页面刷新技术，对整个页面进行刷新。
缺点：明明不需要的页面部分，也要全部刷新，对于网络带宽占用较大，而且效率很低。
- 第一代Web程序，使用整体页面刷新技术，对整个页面进行刷新。
-
- 第二代Web程序，使用
ajax刷新技术，对页面进行局部刷新。
优点：仅仅需要刷新页面的部分，向服务器发出请求，并将应答数据进行web页面局部刷新。
缺点：只能浏览器主动pull到web server。不能实时realtime检测到web server的数据变化。
- 第二代Web程序，使用
-
- 第二代Web程序，使用
ajax刷新技术，对web server进行长轮训long polling。
- 第二代Web程序，使用
-
- 第三代Web程序，使用
web socket刷新技术，让web client和web server进行实时数据交互。
- 第三代Web程序，使用
-
- 开始练习
spring boot上的web socket- 向
spring boot添加必要的依赖（服务器端配置）<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator-core</artifactId> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>sockjs-client</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>stomp-websocket</artifactId> <version>2.3.3</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.3.1</version> </dependency> - 进行
endPoint，messageBroker以及destinationPrefixes初始化配置（服务器端配置）@Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry messageBrokerRegistry) { messageBrokerRegistry.enableSimpleBroker("/topic"); messageBrokerRegistry.setApplicationDestinationPrefixes("/app"); } @Override public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry){ stompEndpointRegistry.addEndpoint("/chat").withSockJS(); } }addEndPoint
web socket的server和client交互的端点。setApplicationDestinationPrefixes
web socket client向web server发起请求的urlenableSimpleBroker
web server向web socket client发起请求的messageBroker
- 配置
controller（服务器端配置）@Controller public class WebSocketController { @MessageMapping("hello") @SendTo("/topic/greetings") public Message greeting(Message message) throws Exception { return message; }Message message是从web socket client传递来的参数@SendTo("/topic/greetings")是利用topic这个messageBroker讲消息在转发到web socket client
- 配置客户端静态页面
/static/chat.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聊天</title> <script src="/webjars/jquery/jquery.min.js"></script> <script src="/webjars/sockjs-client/sockjs.min.js"></script> <script src="/webjars/stomp-websocket/stomp.min.js"></script> <script src="/app.js"></script> </head> <body> <div> <label for="name">请输入用户名:</label> <input type="text" id="name" placeholder="用户名"> </div> <div> <button id="connect" type="button">连接</button> <button id="disconnect" type="button" disabled="disabled">断开</button> </div> <div id="chat" style="display:none;"> <div> <label for="content">请输入聊天内容:</label> <input type="text" id="content" placeholder="聊天内容"> </div> <button id="send" type="button">发送</button> <div id="greetings"> <div id="conversation" style="display:none">群聊进行中</div> </div> </div> </body> </html>
- 配置客户端的javascript
/static/app.js-
与
web socket的连接处理function connect(){ if(!$("#name").val()){ return; } var socket = new SockJS('/chat'); //连接endPoint stompClient = Stomp.over(socket); stompClient.connect({},function (frame){ setConnected(true); //渲染控件 stompClient.subscribe('/topic/greetings',function(greeting){ //注册web server报文接收的callback showGreeting(JSON.parse(greeting.body)); }); }); } -
点击
发送的处理函数function sendName(){ stompClient.send("/app/hello",{}, JSON.stringify({'name':$("#name").val(),'content':$("#content").val()})); } -
页面的初始化函数
$(function(){ $("#connect").click(function(){connect();}); $("#discontent").click(function(){disconnect()}); $("#send").click(function(){sendName()}); }); -
/static/app.js的全体var stompClient = null; function setConnected(connected){ $("#connect").prop("disabled",connected); $("#disconnect").prop("disabled",!connected); if(connected){ $("#conversation").show(); $("#chat").show(); }else{ $("#conversation").hide(); $("#chat").hide(); } $("#greetings").html(""); } function connect(){ if(!$("#name").val()){ return; } var socket = new SockJS('/chat'); stompClient = Stomp.over(socket); stompClient.connect({},function (frame){ setConnected(true); stompClient.subscribe('/topic/greetings',function(greeting){ showGreeting(JSON.parse(greeting.body)); }); }); } function disconnect(){ if(stompClient != null){ stompClient.disconnect(); } setConnected(false); } function sendName(){ stompClient.send("/app/hello",{}, JSON.stringify({'name':$("#name").val(),'content':$("#content").val()})); } function showGreeting(message){ $("#greetings").append("<div>" + message.name + ":" + message.content + "</div>"); } $(function(){ $("#connect").click(function(){connect();}); $("#discontent").click(function(){disconnect()}); $("#send").click(function(){sendName()}); });
-
- 向
- 测试
spring boot上的web socket
在两个浏览器上测试，输入名字，连接之后开始聊天。
