在线聊天项目

简介: 在线聊天项目

在线聊天是一个为了方便HR进行快速沟通提高工作效率而开发的功能,考虑到一个公司中的HR并不多,并发量不大,因此这里直接使用最基本的WebSocket来完成该功能。

后端接口实现

要使用WebSocket,首先引入WebSocket依赖:

依赖添加成功后,接下来配置WebSocket配置类,代码如下:

然后创建消息转发Controller,代码如下:

配置完成后,重启后端项目,然后开始配置前端。

前端实现

聊天功能写在FriendChat.vue组件中,但是用户登录成功后,首先加载的是Home.vue页面,在Home页面的右上角有一个通知的图标,如果有最新的通知,这里会显示一个红点,如图

因此,虽然聊天是在FriendChat.vue页面进行的,但是WebSocket连接却需要登录成功后才建立,这里选择在store中建立WebSocket请求,代码如下:

定义好之后,在初始化菜单数据的地方调用connect方法建立WebSocket连接,代码如下:

通过store.dispatch(‘connect’);调用connect方法。

这里配置完成后,重新登录,在Chrome控制台可以看到WebSocket连接已经成功建立起来了,如图

最后,在FriendChat.vue中通过如下方式发送一条消息:

另外,浏览器在收到消息之后,是将消息保存在store中的,这样一旦收到消息,FriendChat页面的聊天数据就会自动更新,并且,当有新消息到达时,即使用户不在FriendChat页面,也能及时收到通知(主页右上角的通知图标会显示小红点)。

聊天效果如图

这里由于前端页面代码量庞大,因此只贴出部分关键步骤的代码,完整代码读者可以在https://github.com/lenve/vhr下载。

这里有两个订阅,“/user/queue/chat”是用来做在线聊天的,“/topic/nf”则是为了接收系统通知。


相关文章
|
6月前
|
前端开发 JavaScript 机器人
从头搭建一个在线聊天室(一)
从头搭建一个在线聊天室(一)
|
消息中间件 NoSQL API
环信实现聊天功能
环信实现聊天功能
95 0
|
网络协议 计算机视觉
项目实战:Qt多人聊天室程序(在线、离线、离线信息再次登录后发送等)
项目实战:Qt多人聊天室程序(在线、离线、离线信息再次登录后发送等)
项目实战:Qt多人聊天室程序(在线、离线、离线信息再次登录后发送等)
|
5月前
|
JavaScript 前端开发 IDE
如何使用这些技术开发一个简单的实时聊天应用
如何使用这些技术开发一个简单的实时聊天应用
73 0
语音软件源码开发搭建,好友管理功能剖析
我们就成功实现了语音软件源码好友管理功能,这一功能对于语音软件源码平台是非常重要,语音软件源码好友管理功能可以为我们的社交增添一份坚实的力量。
语音软件源码开发搭建,好友管理功能剖析
|
6月前
|
存储 NoSQL 前端开发
从头搭建一个在线聊天室(二)
从头搭建一个在线聊天室(二)
116 0
|
6月前
|
前端开发 JavaScript NoSQL
在线聊天室优化之私聊
在线聊天室优化之私聊
在线聊天室优化之私聊
|
6月前
|
存储 前端开发 数据库
从头搭建一个在线聊天室(三)
从头搭建一个在线聊天室(三)
|
6月前
|
JSON NoSQL 前端开发
从头搭建一个在线聊天室(四)
从头搭建一个在线聊天室(四)