基于Jeecgboot前后端分离的聊天功能集成(一)

简介: 基于Jeecgboot前后端分离的聊天功能集成(一)

  官方jeecgboot开源版本没有聊天功能,网上也比较少,所以考虑集成聊天功能。

      目前网上比较好的开源聊天功能是V-IM,同时这个采用比较好的t-io高性能网络编程框架,其炸裂的性能、超长续航的稳定性、极简易用的API、丰富够用的内置功能,据说能达到百万级的,具体地址如下:

https://gitee.com/tywo45/t-io

        所以决定集成这个开源聊天项目,先放上集成后的聊天窗口。

1、前端部分

主要是窗口控制 webControl与utils部分,views部分如下

 

因为集成到jeecgboot里,所以登录部分去掉,采用本身的登录,index部分进行改造如下:

主要是登录后的相关操作移植过来。

created: function() {
    let self = this;
    let requestApi = RequestUtils;
    
    const token = Vue.ls.get(ACCESS_TOKEN);
    StoreUtils.setToken(token); //设置token
    
    localStorage.setItem("host", window._CONFIG['hostAddress'] ); //设置主机地址
    console.log("localStorage host=",localStorage.getItem("host"));
    
    requestApi.request(conf.getInitUrl(), new FormData()).then(json => {
          console.log("json=",json);
          //个人信息
          self.$store.commit("setImUser", json.me);
          //好友
          self.$store.commit("setUserFriendList", json.friends);
          //群
          self.$store.commit("setChatGroupList", json.groups);    
          //把群组封装到map中
          let chatMap = new Map();
          json.groups.forEach(group => {
            chatMap.set(group.id, group);
          });
          self.$store.commit("setChatMap", chatMap);
          
          self.imuser = self.$store.state.im.imuser;
          
          console.log("self.$store.state=",self.$store.state);
          
          console.log("self.imuser=",self.imuser);
          
          RequestUtils.webSocketOperation(self);
          
          // 跳转到index 页面
          self.$router.push({
            path: "/im/index/chatBox",
            params: {}
          });
        })
        .catch(function(error) {
          console.error(error);
          self.showErr = true;
          if (ErrorType.NET_ERROR === error.toString()) {
            self.err = "服务通讯失败,请检查服务设置";
          } else {
            self.err = error.toString();
          }
        });
    
  },
相关文章
|
1月前
|
传感器 监控 搜索推荐
智能服装:集成健康监测功能的纺织品——未来穿戴科技的新篇章
【10月更文挑战第7天】智能服装作为穿戴科技的重要分支,正以其独特的技术优势和广泛的应用前景,成为未来科技发展的亮点之一。它不仅改变了我们对服装的传统认知,更将健康监测、运动训练、医疗康复等功能融为一体,为我们的生活带来了更多的便利和可能。随着技术的不断进步和市场的日益成熟,我们有理由相信,智能服装将成为未来穿戴科技的新篇章,引领我们走向更加健康、智能、可持续的生活方式。
|
1月前
|
前端开发 JavaScript UED
探索Python Django中的WebSocket集成:为前后端分离应用添加实时通信功能
通过在Django项目中集成Channels和WebSocket,我们能够为前后端分离的应用添加实时通信功能,实现诸如在线聊天、实时数据更新等交互式场景。这不仅增强了应用的功能性,也提升了用户体验。随着实时Web应用的日益普及,掌握Django Channels和WebSocket的集成将为开发者开启新的可能性,推动Web应用的发展迈向更高层次的实时性和交互性。
75 1
|
3月前
|
资源调度 Java 调度
Spring Cloud Alibaba 集成分布式定时任务调度功能
定时任务在企业应用中至关重要,常用于异步数据处理、自动化运维等场景。在单体应用中,利用Java的`java.util.Timer`或Spring的`@Scheduled`即可轻松实现。然而,进入微服务架构后,任务可能因多节点并发执行而重复。Spring Cloud Alibaba为此发布了Scheduling模块,提供轻量级、高可用的分布式定时任务解决方案,支持防重复执行、分片运行等功能,并可通过`spring-cloud-starter-alibaba-schedulerx`快速集成。用户可选择基于阿里云SchedulerX托管服务或采用本地开源方案(如ShedLock)
124 1
|
19天前
|
JSON Java API
springboot集成ElasticSearch使用completion实现补全功能
springboot集成ElasticSearch使用completion实现补全功能
23 1
|
5月前
|
前端开发 安全 数据库
Web架构&前后端分离站&Docker容器站&集成软件站&建站分配
Web架构&前后端分离站&Docker容器站&集成软件站&建站分配
202 1
|
29天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
1月前
|
存储 前端开发 Java
Spring Boot 集成 MinIO 与 KKFile 实现文件预览功能
本文详细介绍如何在Spring Boot项目中集成MinIO对象存储系统与KKFileView文件预览工具,实现文件上传及在线预览功能。首先搭建MinIO服务器,并在Spring Boot中配置MinIO SDK进行文件管理;接着通过KKFileView提供文件预览服务,最终实现文档管理系统的高效文件处理能力。
266 11
|
2月前
|
机器学习/深度学习 人工智能 搜索推荐
如何让你的Uno Platform应用秒变AI大神?从零开始,轻松集成机器学习功能,让应用智能起来,用户惊呼太神奇!
【9月更文挑战第8天】随着技术的发展,人工智能与机器学习已融入日常生活,特别是在移动应用开发中。Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 开发跨平台应用(涵盖 Windows、macOS、iOS、Android 和 Web)。本文探讨如何在 Uno Platform 中集成机器学习功能,通过示例代码展示从模型选择、训练到应用集成的全过程,并介绍如何利用 Onnx Runtime 等库实现在 Uno 平台上的模型运行,最终提升应用智能化水平和用户体验。
55 1
|
4月前
|
资源调度 Java 调度
Spring Cloud Alibaba 集成分布式定时任务调度功能
Spring Cloud Alibaba 发布了 Scheduling 任务调度模块 [#3732]提供了一套开源、轻量级、高可用的定时任务解决方案,帮助您快速开发微服务体系下的分布式定时任务。
14936 30
|
3月前
|
JavaScript 网络协议 API
【Azure API 管理】Azure APIM服务集成在内部虚拟网络后,在内部环境中打开APIM门户使用APIs中的TEST功能失败
【Azure API 管理】Azure APIM服务集成在内部虚拟网络后,在内部环境中打开APIM门户使用APIs中的TEST功能失败

热门文章

最新文章