重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容主要讲解“SpringBoot+WebSocket怎么实现在线聊天”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“SpringBoot+WebSocket怎么实现在线聊天”吧!
成都创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,成都小程序开发,10年建站对成都水电改造等多个领域,拥有丰富的网站推广经验。
在线聊天使用了SpringBoot+WebSocket实现,为了保证用户隐私,所有的聊天数据都保存在系统本地,服务器只进行了数据转发。OK,那接下来,我们来看下大致的实现步骤。
服务端首先加入websocket依赖,如下:
org.springframework.boot spring-boot-starter-websocket
创建WebSocket的配置类,如下:
@Configuration @EnableWebSocketMessageBroker public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) { stompEndpointRegistry.addEndpoint("/ws/endpointChat").withSockJS(); } @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker("/queue","/topic"); } }
这里我并未使用原生的websocket协议,而是使用了websocket的子协议stomp,方便一些。消息代理既使用了/queue
,又使用了/topic
,主要是因为我这里既有点对点的单聊(queue),也有发送系统消息的群聊(topic)。
创建websocket处理类Controller,如下:
@Controller public class WsController { @Autowired SimpMessagingTemplate messagingTemplate; @MessageMapping("/ws/chat") public void handleChat(Principal principal, String msg) { String destUser = msg.substring(msg.lastIndexOf(";") + 1, msg.length()); String message = msg.substring(0, msg.lastIndexOf(";")); messagingTemplate.convertAndSendToUser(destUser, "/queue/chat", new ChatResp(message, principal.getName())); } }
消息协议很简单:发送来的消息,最后一个;
后面跟的是该条消息要发送到哪个用户,这里通过字符串截取将之提取出来。响应消息包含两个字段,一个是消息内容,一个是该条消息由谁发送。
OK,如此之后,我们的服务端就写好了,很简单。
前端代码稍微复杂,我这里主要和小伙伴介绍下我的大致思路和核心代码,具体代码小伙伴可以star源码进行研究。
首先,当用户登录成功之后,我就发起websocket的连接,将ws连接起来,ws的代码我主要写在了store中,如下:
connect(context){ context.state.stomp = Stomp.over(new SockJS("/ws/endpointChat")); context.state.stomp.connect({}, frame=> { context.state.stomp.subscribe("/user/queue/chat", message=> { var msg = JSON.parse(message.body); var oldMsg = window.localStorage.getItem(context.state.user.username + "#" + msg.from); if (oldMsg == null) { oldMsg = []; oldMsg.push(msg); window.localStorage.setItem(context.state.user.username + "#" + msg.from, JSON.stringify(oldMsg)) } else { var oldMsgJson = JSON.parse(oldMsg); oldMsgJson.push(msg); window.localStorage.setItem(context.state.user.username + "#" + msg.from, JSON.stringify(oldMsgJson)) } if (msg.from != context.state.currentFriend.username) { context.commit("addValue2DotMap", "isDot#" + context.state.user.username + "#" + msg.from); } //更新msgList var oldMsg2 = window.localStorage.getItem(context.state.user.username + "#" + context.state.currentFriend.username); if (oldMsg2 == null) { context.commit('updateMsgList', []); } else { context.commit('updateMsgList', JSON.parse(oldMsg2)); } }); }, failedMsg=> { }); }
连接成功之后,就可以准备接收服务端的消息了,接收到服务端的消息后,数据保存在localStorage中,保存格式是 当前用户名#消息发送方用户名:[{from:'消息发送方',msg:'消息内容'}]
,注意后面的是一个json数组,整个存储的key之所以用当前用户名#消息发送方用户名
是为了避免同一个浏览器多个用户登录所产生的数据紊乱,OK,这样两个人的聊天记录都将保存在这个数组中。在聊天展示页面,当数组中的数据发生变化时,自动更新。
在聊天页面,通过stomp发送消息,如下:
this.$store.state.stomp.send("/ws/chat", {}, this.msg + ";" + this.currentFriend.username);
注意每条消息的内容除了内容本身外,还要加上当前发送者的名字。
每次发送成功后更新聊天页面即可。更新聊天页面代码如下:
{{msg.msg}}{{msg.msg}}
如果消息中的from字段的值,就是当前聊天的用户名,则是发送来的消息,否则就是发出去的消息,不同的消息设置不同的样式即可。
到此,相信大家对“SpringBoot+WebSocket怎么实现在线聊天”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!