时间:2021-05-20
本文实例为大家分享了SpringBoot的WebSocket实现单聊群聊,供大家参考,具体内容如下
在HTTP协议中,所有的请求都是由客户端发送给服务端,然后服务端发送请求
要实现服务器向客户端推送消息有几种methods:
1、轮询
大量无效请求,浪费资源
2、长轮询
有新数据再推送,但这会导致连接超时,有一定隐患
3、Applet和Flash
过时,安全隐患,兼容性不好
创建新项目:
添加依赖:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>sockjs-client</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.3.1</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>stomp-websocket</artifactId> <version>2.3.3</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>webjars-locator-core</artifactId></dependency>创建WebSocket配置类:WebSocketConfig
@Configuration@EnableWebSocketMessageBroker//注解开启webSocket消息代理public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { /** * 配置webSocket代理类 * @param registry */ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker("/topic"); //代理消息的前缀 registry.setApplicationDestinationPrefixes("/app"); //处理消息的方法前缀 } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/chat").withSockJS(); //定义一个/chat前缀的endpioint,用来连接 }}创建Bean
/** * 群消息类 */public class Message { private String name; private String content;//省略getter& setter}定义controller的方法:
/** * MessageMapping接受前端发来的信息 * SendTo 发送给信息WebSocket消息代理,进行广播 * @param message 页面发来的json数据封装成自定义Bean * @return 返回的数据交给WebSocket进行广播 * @throws Exception */ @MessageMapping("/hello") @SendTo("/topic/greetings") public Message greeting(Message message) throws Exception { return message; }<html lang="en"><head> <meta charset="UTF-8"> <title>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> var stompClient = null; //点击连接以后的页面改变 function setConnected(connection) { $("#connect").prop("disable",connection); $("#disconnect").prop("disable",!connection); if (connection) { $("#conversation").show(); $("#chat").show(); } else { $("#conversation").hide(); $("#chat").hide(); } $("#greetings").html(""); } //点击连接按钮建立连接 function connect() { //如果用户名为空直接跳出 if (!$("#name").val()) { return; } //创建SockJs实例,建立连接 var sockJS = new SockJS("/chat"); //创建stomp实例进行发送连接 stompClient = Stomp.over(sockJS); stompClient.connect({}, function (frame) { setConnected(true); //订阅服务端发来的信息 stompClient.subscribe("/topic/greetings", function (greeting) { //将消息转化为json格式,调用方法展示 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(); }); $("#disconnect").click(function () { disconnect(); }); $("#send").click(function () { sendName(); }) }) </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">断开连接</button></div><div id="chat" style="display: none;"> <div> <label for="name"></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>既然是私聊,就要有对象目标,也是用户,可以用SpringSecurity引入
所以添加额外依赖:
配置SpringSecurity
@Configurationpublic class WebSecurityConfig extends WebSecurityConfigurerAdapter { @Bean PasswordEncoder passwordEncoder(){ return new BCryptPasswordEncoder(); } @Override protected void configure(AuthenticationManagerBuilder auth) throws Exception { auth.inMemoryAuthentication() .withUser("panlijie").roles("admin").password("$2a$10$5Pf0KhCdnrpMxP5aRrHvMOsvV2fvfWJqk0SEDa9vQ8OWwV8emLFhi") .and() .withUser("suyanxia").roles("user").password("$2a$10$5Pf0KhCdnrpMxP5aRrHvMOsvV2fvfWJqk0SEDa9vQ8OWwV8emLFhi"); } @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .anyRequest().authenticated() .and() .formLogin() .permitAll(); }}在原来的WebSocketConfig配置类中修改:也就是多了一个代理消息前缀:"/queue"
@Configuration@EnableWebSocketMessageBroker//注解开启webSocket消息代理public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { /** * 配置webSocket代理类 * @param registry */ @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker("/topic","/queue"); //代理消息的前缀 registry.setApplicationDestinationPrefixes("/app"); //处理消息的方法前缀 } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/chat").withSockJS(); //定义一个/chat前缀的endpioint,用来连接 }}创建Bean:
public class Chat { private String to; private String from; private String content;//省略getter& setter}添加controller方法:
/** * 点对点发送信息 * @param principal 当前用户的信息 * @param chat 发送的信息 */ @MessageMapping("chat") public void chat(Principal principal, Chat chat) { //获取当前对象设置为信息源 String from = principal.getName(); chat.setFrom(from); //调用convertAndSendToUser("用户名","路径","内容"); simpMessagingTemplate.convertAndSendToUser(chat.getTo(), "/queue/chat", chat); }创建页面:
<html lang="en"><head> <meta charset="UTF-8"> <title>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> var stompClient = null; function connect() { var socket = new SockJS("/chat"); stompClient = Stomp.over(socket); stompClient.connect({}, function (frame) { stompClient.subscribe('/user/queue/chat', function (chat) { showGreeting(JSON.parse(chat.body)); }); }); } function sendMsg() { stompClient.send("/app/chat",{},JSON.stringify({'content' : $("#content").val(), 'to': $("#to").val()})); } function showGreeting(message) { $("#chatsContent").append("<div>" + message.from + ":" + message.content + "</div>"); } $(function () { connect(); $("#send").click(function () { sendMsg(); }); }); </script></head><body><div id="chat"> <div id="chatsContent"> </div> <div> 请输入聊天内容 <input type="text" id="content" placeholder="聊天内容"> <input type="text" id="to" placeholder="目标用户"> <button type="button" id="send">发送</button> </div></div></body></html>暂结!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1/概述利用SpringBoot作为基础框架,SpringSecurity作为安全框架,WebSocket作为通信框架,实现点对点聊天和群聊天。2/所需依赖Sp
目的通过nodejs+ws(Websocket)实现点对点发送及群聊发送项目搭建直接跳过,这里列举一下用到的插件yarnaddwsWebSocket话不多说,直
在一个应用中,websocket一般都是以单例形式存在的,即在整个应用中,websocket实例始终保持唯一。但有时我们要用到websocket实例的时候,可能
微信小程序转发功能的实现1.当用户将小程序转发到任一群聊之后,可以获取到此次转发的shareTicket2.此转发卡片在群聊中被其他用户打开时,可以在App.o
本文为大家分享了SpringMVC整合websocket实现消息推送,供大家参考,具体内容如下1.创建websocket握手协议的后台(1)HandShake的