suncn-im-chat v0.3.2
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
版本
此版本为v1.1 固定版本, 嵌入到其它项目内部, 通过url 传参, 自身的登录入口被隐藏, 由父级项目在url 中传入参数代入必须的信息,然后自身登录页面进行隐式登录
流程
流程一 iframe url 传参代入一些用户信息和通讯录接口信息
第一部分 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.3.9"
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