spring boot(学习笔记第十五课)

Spring boot的websocket(广播)

学习内容：

Spring boot的websocket（广播）

1. Spring boot的websocket（广播）

回顾下web server的进化
- 1. 第一代Web程序，使用整体页面刷新技术，对整个页面进行刷新。
    缺点：明明不需要的页面部分，也要全部刷新，对于网络带宽占用较大，而且效率很低。
- 1. 第二代Web程序，使用ajax刷新技术，对页面进行局部刷新。
    优点：仅仅需要刷新页面的部分，向服务器发出请求，并将应答数据进行web页面局部刷新。
    缺点：只能浏览器主动pull到web server。不能实时realtime检测到web server的数据变化。
- 1. 第二代Web程序，使用ajax刷新技术，对web server进行长轮训long polling。
- 1. 第三代Web程序，使用web socket刷新技术，让web client和web server进行实时数据交互。

开始练习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 {@Overridepublic void configureMessageBroker(MessageBrokerRegistry messageBrokerRegistry) {messageBrokerRegistry.enableSimpleBroker("/topic");messageBrokerRegistry.setApplicationDestinationPrefixes("/app");}@Overridepublic void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry){stompEndpointRegistry.addEndpoint("/chat").withSockJS();}
}

addEndPoint
web socket的server和client交互的端点。
setApplicationDestinationPrefixes
web socket client向web server发起请求的url
enableSimpleBroker
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'); //连接endPointstompClient = Stomp.over(socket);stompClient.connect({},function (frame){setConnected(true); //渲染控件stompClient.subscribe('/topic/greetings',function(greeting){ //注册web server报文接收的callbackshowGreeting(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
在两个浏览器上测试，输入名字，连接之后开始聊天。

spring boot(学习笔记第十五课)

spring boot(学习笔记第十五课)

学习内容：

1. Spring boot的websocket（广播）

最新新闻

热搜词