文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

SpringBoot+WebSocket怎么实现在线聊天

2023-06-19 12:51

关注

本篇内容主要讲解“SpringBoot+WebSocket怎么实现在线聊天”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“SpringBoot+WebSocket怎么实现在线聊天”吧!

在线聊天使用了SpringBoot+WebSocket实现,为了保证用户隐私,所有的聊天数据都保存在系统本地,服务器只进行了数据转发。OK,那接下来,我们来看下大致的实现步骤。

服务端

服务端首先加入websocket依赖,如下:

<dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-websocket</artifactId></dependency>

创建WebSocket的配置类,如下:

@Configuration@EnableWebSocketMessageBrokerpublic 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,如下:

@Controllerpublic 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);

注意每条消息的内容除了内容本身外,还要加上当前发送者的名字。
每次发送成功后更新聊天页面即可。更新聊天页面代码如下:

<template v-for="msg in msgList"><!--发送来的消息--><div        v-if="msg.from==currentFriend.username">    <img :src="currentFriend.userface" class="userfaceImg">    <div    >    {{msg.msg}}    </div></div><!--发出去的消息--><div v-if="msg.from!=currentFriend.username"        >    <div    >    {{msg.msg}}    </div>    <img :src="currentUser.userface" class="userfaceImg"></div></template>

如果消息中的from字段的值,就是当前聊天的用户名,则是发送来的消息,否则就是发出去的消息,不同的消息设置不同的样式即可。

到此,相信大家对“SpringBoot+WebSocket怎么实现在线聊天”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯