pc-im

项目描述

pc端im

项目结构描述

• assets 公用资源
• components 公用组件
• layout 页面布局
• mixins 混入
• plugins 三方插件 例如地图 语音等
• router 路由
• services axios 公用配置及接口
• store 仓库
• styles 样式文件
• utils 公用配置
• views 页面视图

目录结构

| 目录名称 | 说明 | | ---------- | ----------------------- | | assets | 资源相关 | | components | 公共组件 | | IM | IM部分源码 | | layout | 页面布局 | | plugins | 插件相关 | | mixins | 混入 | | router | 页面路由配置 | | api | 接口配置 | | store | vuex全局数据 | | styles | 全局样式配置 | | utils | 全局工具类, 全局axios配置 | | views | 所有页面 |

项目启动

npm run serve

打包

npm run build

Customize configuration

See Configuration Reference.

版本

此版本为v1.1 固定版本， 嵌入到其它项目内部， 通过url 传参， 自身的登录入口被隐藏， 由父级项目在url 中传入参数代入必须的信息，然后自身登录页面进行隐式登录

流程

流程一 iframe url 传参代入一些用户信息和通讯录接口信息

iframe 的url 长格式 http://localhost:8080/#/imLogin?rootId=f3c80de7ec6e497b920be98a07468285&rootName=%E6%9F%8F%E5%9E%AB%E9%95%87&name=%E5%90%B4%E7%8F%8A%E7%90%B4&userId=7b9d3794a8b841fea87b3fe144cb6976&refreshToken=fc5f65ca1d48473bb7a277e6473e20d8&axToken=eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJ3dXNxIiwidXNlcklkIjoiN2I5ZDM3OTRhOGI4NDFmZWE4N2IzZmUxNDRjYjY5NzYiLCJhZG1pblR5cGUiOiIwMCIsImxvZ2luTmFtZSI6Ind1c3EiLCJ0eXBlIjoiMCIsImNuYW1lIjoi5ZC054-K55C0IiwidW5pdElkIjoiNzY3Yzg4YjljMmM0NGY3ZmJiYzFiOTJiMjRiNDgzNmYiLCJyb290SWQiOiJmM2M4MGRlN2VjNmU0OTdiOTIwYmU5OGEwNzQ2ODI4NSIsInJlZnJlc2hUb2tlbiI6ImZjNWY2NWNhMWQ0ODQ3M2JiN2EyNzdlNjQ3M2UyMGQ4IiwiZXhwIjoxNjY0MzU2Nzk5fQ.ce51pkeKzxf2KchySanrInpm-Pb5WaKQiudirXkiOGNOSO3Ft-_e0-DxsjCSswU9MXjiBI3arrjp80Rd52zvuuCgkv0Xt8HwzSfQvdvnFQ9avnV-moDxOFMaGfbJV4TQ3bOWm6G_zoRxe-OXxuihF98EuEawOWE3DknlwYIwXHM

第一部分 http://localhost:8080/#/imLogin 路由部分，走路由表，匹配到登录页,在登录页做im 自身登录获取必要信息，然后重定向到im 信息展示页面 rootId 根组织树的id rootName 根组织树的名称

name userId refreshToken

axToken 安信的token

分别作用 1 通信录的用户体系用的是安信的用户接口， 所以安信的token, 也就是 axToken ， 跟组织树的名称和Id 都是为了调用安信组织树的以获取用户聊天对象 refreshToken 安信接口过期刷新用的

2 name 登录账户的用户名 userId 登录账户的useId 这2个值是 使用im 自身的登录用的 /user/userLogin 这个接口需要的， 拿到im 的token, im 的接口请求头access-token 都加了这个token

流程二 @/im/views/auth/login.vue 这个登录页做im 自身用户体系的登录 调用user/login 接口，目前是隐藏状态， 可以根据需要放开

   iframe 传来的参数还有 userLogin 接口传来的用户信息存起来， 存在localStrage 里面， key 为user, 同时存在vuex 里面， key 也为user

流程三 @/im/index.vue 页面

页面结构分为左右， 左边也就是侧边sider <sider @getKey="getCurComp" :curKey="curComp"> 也就是侧边的消息，群组，通讯录三大部分

右边内容， 分为上下， 上边为固定的head ，搜索框 根据左边的值，动态渲染出不同的组件

根据 is 属性渲染出 三大部分 import mes from './views/mes' // 默认是mes 组件 import group from './views/group' // 群组组件 import contacts from './views/contacts' // 联系人

mes 信息组件是重点，有左右分成会话区域mesList， 右边内容区域， 内容区域分为上下 信息列表chatList 区域 与 editor 编辑器区域

mesList 点击切换会话， 切换会话对象的msgList ，重新渲染信息列表

信息列表内的消息 分为 自己发送和被动接受 自己发送，提取编辑器editor 的值， 合成格式，发送给后端，自己往该会话的msgList 里面插入前端格式的会话信息 被动接受， 走websocket ， 插入对应的消息列表，然后重新渲染 被动接受包含别人发的， 也包括同一账号在不同设备（移动端与pc 信息的同步）

 src/utils/webcocket.js 接受到消息
 src/utils/msgCallback.js 各种不同消息action 的处理
 src/utils/replyMsg.js  将后端ws 的消息格式转换成前端的信息格式， 在漫游，实时接受等多处用到， 有几种调用方式，请阅读代码， 如单信息， 插入所属会话中（在已有msgList 前插和后插）

打包组件

1、手动修改package.json至一个新版本,如："version": "0.1.1"
2、建议删除package-lock.json文件、node_module文件夹 重新npm i
3、运行npm run build-bundle
4、cmd打开项目
5、npm whoami确认npm连接状态
6、npm publish --access public将组件发布到npm

分支说明

命名规范：[拉取自分支]-[场景使用背景说明或者新增需求功能说明] 注：_xxx 用于说明版本情况

• 【v6.2】cppcc_v6.1: 基于底座v2.1版本集成
• 【v6.2】cppcc_v6.1_hebei: 河北项目-基于底座v2.1版本
• 【v6.3】cppcc_v6.3: 基于底座v2.3版本集成
• 【v6.3】cppcc_upms: 基于底座upms_2.0版本集成