基于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();
          }
        });
    
  },
相关文章
|
19天前
|
存储 Go
Go 浅析主流日志库:从设计层学习如何集成日志轮转与切割功能
本文将探讨几个热门的 go 日志库如 logrus、zap 和官网的 slog,我将分析这些库的的关键设计元素,探讨它们是如何支持日志轮转与切割功能的配置。
145 0
Go 浅析主流日志库:从设计层学习如何集成日志轮转与切割功能
|
19天前
在jeecgboot中集成bpmn-process-designer流程设计器
在jeecgboot中集成bpmn-process-designer流程设计器
14 0
|
19天前
|
前端开发
基于jeecgboot流程管理平台的自定义业务表单集成方法
基于jeecgboot流程管理平台的自定义业务表单集成方法
35 0
|
19天前
|
前端开发
基于Jeecgboot前后端分离的聊天功能集成(二)
基于Jeecgboot前后端分离的聊天功能集成(二)
15 0
|
19天前
|
分布式计算 DataWorks MaxCompute
DataWorks产品使用合集之在DataWorks中,将数据集成功能将AnalyticDB for MySQL中的数据实时同步到MaxCompute中如何解决
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
38 0
|
19天前
|
机器学习/深度学习 人工智能 TensorFlow
安卓中的人工智能:集成机器学习功能
【4月更文挑战第14天】在数字化时代,人工智能与机器学习正驱动安卓平台的技术革新。谷歌的ML Kit和TensorFlow Lite为开发者提供了便捷的集成工具,使得应用能实现图像识别、文本转换等功能,提升用户体验。尽管面临数据隐私和安全性的挑战,但随着技术进步,更强大的AI功能将预示着移动端的未来,为开发者创造更多创新机遇。
|
19天前
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
1、【宝塔】删除ripro文件,上传最新ripro版本,然后上传压缩包内的ripro里面的对应文件到ripro主题对应内覆盖(找到对应路径单个文件去覆盖)。 2、然后上传ripro-chlid子主题美化包到/wp-content/themes路径下 3、注意顺序 原版–>美化包–>后台启用子主题(已启用请忽略)。
37 0
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
|
19天前
|
机器学习/深度学习 PyTorch TensorFlow
iOS设备功能和框架: 什么是 Core ML?如何在应用中集成机器学习模型?
iOS设备功能和框架: 什么是 Core ML?如何在应用中集成机器学习模型?
44 0
|
19天前
|
存储 NoSQL Java
基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖集成Redis(九)
基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖集成Redis(九)
|
19天前
|
NoSQL 前端开发 Java
Sa-Token实现分布式登录鉴权(Redis集成 前后端分离)
Sa-Token实现分布式登录鉴权(Redis集成 前后端分离)
Sa-Token实现分布式登录鉴权(Redis集成 前后端分离)