Suncn-im-base NPM

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