通过之前的《工程目录》可以看到，该工程并不存在request.js之类的进行通信的js文件，所以它是完全通过云信sdk与云信服务器进行信息通信的，只要了解了这个，工程中其它部分都只是个“壳”而已。_

初始化

页面组件

以工程首页“最近消息列表”页面（src/pages/Session.vue）为出发点，找一下它的数据来源于哪。

先贴一下代码：

  1. <template>
  2.   <div class="g-inherit m-main p-session">
  3.     <group class="u-list">
  4.       <cell class="u-list-item" title="消息中心" @click.native="enterSysMsgs">
  5.         <img class="icon" slot="icon" width="24" :src="noticeIcon">
  6.         <span v-show="sysMsgUnread > 0" class="u-unread">{{sysMsgUnread}}</span>
  7.       </cell>
  8.       <cell class="u-list-item" title="我的手机" @click.native="enterMyChat">
  9.         <img class="icon" slot="icon" width="24" :src="myPhoneIcon">
  10.       </cell>
  11.       <cell
  12.         v-for="(session, index) in sessionlist"
  13.         class="u-list-item"
  14.         :title="session.name"
  15.         :inline-desc="session.lastMsgShow"
  16.         :key="session.id"
  17.         :sessionId="session.id"
  18.         v-touch:swipeleft="showDelBtn"
  19.         v-touch:swiperight="hideDelBtn"
  20.         @click.native="enterChat(session)" >
  21.         <img class="icon u-circle" slot="icon" width="24" :src="session.avatar">
  22.         <span class='u-session-time'>
  23.           {{session.updateTimeShow}}
  24.         </span>
  25.         <span v-show="session.unread > 0" class="u-unread">{{session.unread}}</span>
  26.         <span
  27.           class="u-tag-del"
  28.           :class="{active: delSessionId===session.id}"
  29.           @click="deleteSession"
  30.           ></span>
  31.       </cell>
  32.     </group>
  33.   </div>
  34. </template>
  36. <script>
  37. import util from '../utils'
  38. import config from '../configs'
  40. export default {
  41.   data () {
  42.     return {
  43.       delSessionId: null,
  44.       stopBubble: false,
  45.       noticeIcon: config.noticeIcon,
  46.       myPhoneIcon: config.myPhoneIcon,
  47.       myGroupIcon: config.defaultGroupIcon,
  48.       myAdvancedIcon: config.defaultAdvancedIcon
  49.     }
  50.   },
  51.   computed: {
  52.     sysMsgUnread () {
  53.       let temp = this.$store.state.sysMsgUnread
  54.       let sysMsgUnread = temp.addFriend || 0
  55.       sysMsgUnread += temp.team || 0
  56.       let customSysMsgUnread = this.$store.state.customSysMsgUnread
  57.       return sysMsgUnread + customSysMsgUnread
  58.     },
  59.     userInfos () {
  60.       return this.$store.state.userInfos
  61.     },
  62.     myInfo () {
  63.       return this.$store.state.myInfo
  64.     },
  65.     myPhoneId () {
  66.       return `${this.$store.state.userUID}`
  67.     },
  68.     sessionlist () {
  69.       let sessionlist = this.$store.state.sessionlist.filter(item => {
  70.         item.name = ''
  71.         item.avatar = ''
  72.         if (item.scene === 'p2p') {
  73.           let userInfo = null
  74.           if (item.to !== this.myPhoneId) {
  75.             userInfo = this.userInfos[item.to]
  76.           } else {
  77.             // userInfo = this.myInfo
  78.             // userInfo.alias = '我的手机'
  79.             // userInfo.avatar = `${config.myPhoneIcon}`
  80.             return false
  81.           }
  82.           if (userInfo) {
  83.             item.name = util.getFriendAlias(userInfo)
  84.             item.avatar = userInfo.avatar
  85.           }
  86.         } else if (item.scene === 'team') {
  87.           let teamInfo = null
  88.           teamInfo = this.$store.state.teamlist.find(team => {
  89.             return team.teamId === item.to
  90.           })
  91.           if (teamInfo) {
  92.             item.name = teamInfo.name
  93.             item.avatar = teamInfo.avatar || (teamInfo.type === 'normal' ? this.myGroupIcon : this.myAdvancedIcon)
  94.           } else {
  95.             item.name = `群${item.to}`
  96.             item.avatar = item.avatar || this.myGroupIcon
  97.           }
  98.         }
  99.         let lastMsg = item.lastMsg || {}
  100.         if (lastMsg.type === 'text') {
  101.           item.lastMsgShow = lastMsg.text || ''
  102.         } else if (lastMsg.type === 'custom') {
  103.           item.lastMsgShow = util.parseCustomMsg(lastMsg)
  104.         } else if (lastMsg.scene === 'team' && lastMsg.type === 'notification') {
  105.           item.lastMsgShow = util.generateTeamSysmMsg(lastMsg)
  106.         } else if (util.mapMsgType(lastMsg)) {
  107.           item.lastMsgShow = `[${util.mapMsgType(lastMsg)}]`
  108.         } else {
  109.           item.lastMsgShow = ''
  110.         }
  111.         if (item.updateTime) {
  112.           item.updateTimeShow = util.formatDate(item.updateTime, true)
  113.         }
  114.         return item
  115.       })
  116.       return sessionlist
  117.     }
  118.   },
  119.   methods: {
  120.     enterSysMsgs () {
  121.       if (this.hideDelBtn())
  122.         return
  123.       location.href = '#/sysmsgs'
  124.     },
  125.     enterChat (session) {
  126.       if (this.hideDelBtn())
  127.         return
  128.       if (session && session.id)
  129.         location.href = `#/chat/${session.id}`
  130.     },
  131.     enterMyChat () {
  132.       // 我的手机页面
  133.       location.href = `#/chat/p2p-${this.myPhoneId}`
  134.     },
  135.     deleteSession () {
  136.       if (this.delSessionId !== null) {
  137.         this.$store.dispatch('deleteSession', this.delSessionId)
  138.       }
  139.     },
  140.     showDelBtn (vNode) {
  141.       if (vNode && vNode.data && vNode.data.attrs) {
  142.         this.delSessionId = vNode.data.attrs.sessionId
  143.         this.stopBubble = true
  144.         setTimeout(() => {
  145.           this.stopBubble = false
  146.         }, 20)
  147.       }
  148.     },
  149.     hideDelBtn () {
  150.       if (this.delSessionId !== null && !this.stopBubble) {
  151.         // 用于判断是否前置状态是显示删除按钮
  152.         this.delSessionId = null
  153.         return true
  154.       }
  155.       return false
  156.     }
  157.   }
  158. }
  159. </script>
  161. <style type="text/css">
  162.   .p-session {
  163.     .vux-cell-primary {
  164.       max-width: 70%;
  165.     }
  166.   }
  167. </style>

该页面组件内容比较多，不需要去看，跟着我的思路走就好。

我们看到第12行v-for="(session, index) in sessionlist"可知数据是通过遍历sessionlist渲染出来的。

那么看下script部分sessionlist是来自哪里，进而发现了它只是computed中的一个function（第68行），也就是说它本身并不负责请求数据！再仔细看functin中的内容的话，会发现她是从$store取出来的值。

存储位置

通过编辑器搜索 sessionlist 可以快速地在 src/store/state.js 找到它的存储位置。既然存储位置找到， 那究竟是谁放进去的呢，再看下搜索结果中 src/store/mutations/index.js 文件。

  1.   updateSessions (state, sessions) {
  2.     const nim = state.nim
  3.     state.sessionlist = nim.mergeSessions(state.sessionlist, sessions)
  4.     state.sessionlist.sort((a, b) => {
  5.       return b.updateTime - a.updateTime
  6.     })
  7.     state.sessionlist.forEach(item => {
  8.       state.sessionMap[item.id] = item
  9.     })
  10.   },

可看出它是通过 state.sessionlist = nim.mergeSessions(state.sessionlist, sessions) 对state的sessionlist进行了赋值。

赋值位置

此时我们定位到了updateSessions function，那再搜索它看看，结果在 src/store/actions/session.js 中找到有两个function调用了它。

  1. // onSessions只在初始化完成后回调
  2. export function onSessions (sessions) {
  3.   updateSessionAccount(sessions)
  4.   store.commit('updateSessions', sessions)
  5. }
  7. export function onUpdateSession (session) {
  8.   let sessions = [session]
  9.   updateSessionAccount(sessions)
  10.   store.commit('updateSessions', sessions)
  11. }

看函数内容可知，它们分别用作初始化和更新。当下最关心的是如何通过初始化得到了数据，于是我们再通过 onSessions 去搜索看看。

连接初始化文件

搜索到了 src/store/actions/initNimSDK.js 使用到了它，下面贴的代码的第30行位置。

  1. /*
  2.  * SDK连接相关
  3.  */
  5. import config from '@/configs'
  6. import pageUtil from '@/utils/page'
  7. import util from '@/utils'
  8. import store from '../'
  9. import {onFriends, onSyncFriendAction} from './friends'
  10. import {onRobots} from './robots'
  11. import {onBlacklist, onMarkInBlacklist} from './blacks'
  12. import {onMyInfo, onUserInfo} from './userInfo'
  13. import {onSessions, onUpdateSession} from './session'
  14. import {onRoamingMsgs, onOfflineMsgs, onMsg} from './msgs'
  15. import {onSysMsgs, onSysMsg, onSysMsgUnread, onCustomSysMsgs} from './sysMsgs'
  16. import { onTeams, onSynCreateTeam, onCreateTeam, onUpdateTeam, onTeamMembers, onUpdateTeamMember, onAddTeamMembers, onRemoveTeamMembers, onUpdateTeamManagers, onDismissTeam, onUpdateTeamMembersMute, onTeamMsgReceipt} from './team'
  18. const SDK = require('@/sdk/' + config.sdk)
  20. // 重新初始化 NIM SDK
  21. export function initNimSDK ({ state, commit, dispatch }, loginInfo) {
  22.   if (state.nim) {
  23.     state.nim.disconnect()
  24.   }
  25.   dispatch('showLoading')
  26.   // 初始化SDK
  27.   window.nim = state.nim = SDK.NIM.getInstance({
  28.     //... 省去上半部分
  29.     // 会话
  30.     onsessions: onSessions,
  31.     onupdatesession: onUpdateSession,
  32.     // 消息
  33.     onroamingmsgs: onRoamingMsgs,
  34.     onofflinemsgs: onOfflineMsgs,
  35.     //...省去下半部分
  36.   })
  37.   window.nim.useDb = config.useDb
  38. }

SDK.NIM.getInstance函数中我省略了上下部分，内容与 onsessions: onSessions 类似，传了很多键值对给到它。

文件的注释写得很清楚，该文件或者说该文件唯一对出口函数 initNimSDK 的作用就是重新初始化 NIM SDK。

执行初始化

搜索 initNimSDK 关键字，会发现 src/store/actions/index.js 文件用到了它，该文件也是vuex的actions总出口文件。

那么具体是怎么进行初始化的呢？

先贴代码：

  1. // Action 提交的是 mutation，而不是直接变更状态。
  2. // Action 可以包含任意异步操作。
  3. import cookie from '../../utils/cookie'
  4. import pageUtil from '../../utils/page'
  6. /* 导出actions方法 */
  7. import {showLoading, hideLoading, showFullscreenImg, hideFullscreenImg} from './widgetUi'
  8.   import {initNimSDK} from './initNimSDK'
  9. import {initChatroomSDK, resetChatroomSDK} from './initChatroomSDK'
  10. import {updateBlack} from './blacks'
  11. import {updateFriend, addFriend, deleteFriend} from './friends'
  12. import {resetSearchResult, searchUsers, searchTeam} from './search'
  13. import {deleteSession, setCurrSession, resetCurrSession} from './session'
  14. import {sendMsg, sendFileMsg, sendMsgReceipt, sendRobotMsg, revocateMsg, updateLocalMsg, getHistoryMsgs, resetNoMoreHistoryMsgs, continueRobotMsg} from './msgs'
  15. import {markSysMsgRead, resetSysMsgs, deleteSysMsgs, markCustomSysMsgRead} from './sysMsgs'
  16. import {sendChatroomMsg, sendChatroomRobotMsg, sendChatroomFileMsg, getChatroomHistoryMsgs} from './chatroomMsgs'
  17. import {initChatroomInfos, getChatroomInfo, getChatroomMembers, clearChatroomMembers} from './chatroomInfos'
  18. import { delegateTeamFunction, onTeamNotificationMsg, enterSettingPage, getTeamMembers, checkTeamMsgReceipt, getTeamMsgReads} from './team'
  20. function connectNim ({state, commit, dispatch}, obj) {
  21.   let {force} = Object.assign({}, obj)
  22.   // 操作为内容页刷新页面，此时无nim实例
  23.   if (!state.nim || force) {
  24.     let loginInfo = {
  25.       uid: cookie.readCookie('uid'),
  26.       sdktoken: cookie.readCookie('sdktoken'),
  27.     }
  28.     if (!loginInfo.uid) {
  29.       // 无cookie，直接跳转登录页
  30.       pageUtil.turnPage('无历史登录记录，请重新登录', 'login')
  31.     } else {
  32.       // 有cookie，重新登录
  33.       dispatch('initNimSDK', loginInfo)
  34.     }
  35.   }
  36. }
  38. function connectChatroom ({state, commit, dispatch}, obj) {
  39.   let {chatroomId} = Object.assign({}, obj)
  40.   const nim = state.nim
  41.   if (nim) {
  42.     dispatch('showLoading')
  43.     nim.getChatroomAddress({
  44.       chatroomId,
  45.       done: function getChatroomAddressDone (error, obj) {
  46.         if (error) {
  47.           alert(error.message)
  48.           location.href = '#/room'
  49.           return
  50.         }
  51.         dispatch('initChatroomSDK', obj)
  52.       }
  53.     })
  54.   }
  55. }
  57. export default {
  58.   updateRefreshState ({commit}) {
  59.     commit('updateRefreshState')
  60.   },
  62.   // UI 及页面状态变更
  63.   showLoading,
  64.   hideLoading,
  65.   showFullscreenImg,
  66.   hideFullscreenImg,
  67.   continueRobotMsg,
  69.   // 连接sdk请求，false表示强制重连
  70.   connect (store, obj) {
  71.     let {type} = Object.assign({}, obj)
  72.     // type 可为 nim chatroom
  73.     type = type || 'nim'
  74.     switch (type) {
  75.       case 'nim':
  76.         connectNim(store, obj)
  77.         break
  78.       case 'chatroom':
  79.         connectChatroom(store, obj)
  80.         break
  81.     }
  82.   },
  84.   // 用户触发的登出逻辑
  85.   logout ({ state, commit }) {
  86.     cookie.delCookie('uid')
  87.     cookie.delCookie('sdktoken')
  88.     if (state.nim) {
  89.       state.nim.disconnect()
  90.     }
  91.     pageUtil.turnPage('', 'login')
  92.   },
  94.   // 初始化 重新连接SDK
  95.   initNimSDK,
  96.   // 清空所有搜索历史纪录
  97.   resetSearchResult,
  98.   // 搜索用户信息
  99.   searchUsers,
  100.   // 更新黑名单
  101.   updateBlack,
  102.   // 更新好友
  103.   addFriend,
  104.   deleteFriend,
  105.   updateFriend,
  106.   // 删除会话
  107.   deleteSession,
  108.   // 设置当前会话
  109.   setCurrSession,
  110.   // 重置当前会话
  111.   resetCurrSession,
  112.   // 发送消息
  113.   sendMsg,
  114.   sendFileMsg,
  115.   sendRobotMsg,
  116.   // 发送消息已读回执
  117.   sendMsgReceipt,
  118.   // 消息撤回
  119.   revocateMsg,
  120.   // 更新本地消息
  121.   updateLocalMsg,
  122.   getHistoryMsgs,
  123.   // 重置历史消息状态
  124.   resetNoMoreHistoryMsgs,
  125.   // 标记系统消息已读
  126.   markSysMsgRead,
  127.   markCustomSysMsgRead,
  128.   resetSysMsgs,
  129.   deleteSysMsgs,
  131.   initChatroomSDK,
  132.   initChatroomInfos,
  133.   resetChatroomSDK,
  134.   sendChatroomMsg,
  135.   sendChatroomRobotMsg,
  136.   sendChatroomFileMsg,
  137.   getChatroomHistoryMsgs,
  138.   getChatroomInfo,
  139.   getChatroomMembers,
  140.   clearChatroomMembers,
  143.   // 搜索群
  144.   searchTeam,
  145.   // 代理sdk中的群方法
  146.   delegateTeamFunction,
  147.   // 处理群消息回调
  148.   onTeamNotificationMsg,
  149.   // 进入群信息设置页
  150.   enterSettingPage,
  151.   // 获取群成员
  152.   getTeamMembers,
  153.   // 群消息回执检查
  154.   checkTeamMsgReceipt,
  155.   // 查询群消息回执已读列表
  156.   getTeamMsgReads,
  158. }

该代码是完整代码，内容比较长，建议跟着我的思路去看。

我们看到在第8行引入了 initNimSDK.js ，并取出了initNimSDK函数。然后在第95行直接把 initNimSDK 作为actions暴露了出去。

搜索全工程看哪里用到了initNimSDK 这个actions，结果发现只有文件本身的第33行在connectNim 函数中用到了它。

在看文件中只有第76行的 connect actions调用了connectNim 函数，该函数用来创建聊天通信和直播室通信的连接。

再搜索 this.$store.dispatch('connect') 就可以在 src/App.vue 文件的updated生命周期中找到它了。

  1. // 所有页面更新都会触发此函数
  2.   updated () {
  3.     // 提交sdk连接请求
  4.     this.$store.dispatch('connect')
  5.     this.$store.dispatch('updateRefreshState')
  6.   },

小结

至此，网易云信sdk的初始化与信息通信的建立逻辑就理顺了。

  1. 页面加载后 App.vue 这个入口组件会被创建，updated的生命周期会执行connect actions的调用。
  2. connect actions会经过initNimSDK完成sdk的初始化
  3. 初始化过程中会执行onSessions actions完成对state中sessionlist的赋值。

信息通信

接下来我们看看信息通信是怎么进行的，这个相对比较简单。

看下官方文档，或者 src/pages/components/ChatEditor.vue 关于 sendMsg actions的调用可以轻易定位到 src/store/actions/msgs.js 文件中的sendMsg 函数。

  1. // 发送普通消息
  2. export function sendMsg ({state, commit}, obj) {
  3.   const nim = state.nim
  4.   obj = obj || {}
  5.   let type = obj.type || ''
  6.   store.dispatch('showLoading')
  7.   switch (type) {
  8.     case 'text':
  9.       nim.sendText({
  10.         scene: obj.scene,
  11.         to: obj.to,
  12.         text: obj.text,
  13.         done: onSendMsgDone,
  14.         needMsgReceipt: obj.needMsgReceipt || false
  15.       })
  16.       break
  17.     case 'custom':
  18.       nim.sendCustomMsg({
  19.         scene: obj.scene,
  20.         to: obj.to,
  21.         pushContent: obj.pushContent,
  22.         content: JSON.stringify(obj.content),
  23.         done: onSendMsgDone
  24.       })
  25.   }
  26. }

该函数内部通过 nim.sendText() 进行信息通信，而这里的nim变量是前面“sdk初始化”时存储进去的。

通过vuex中state的nim变量从而实现了官网所说的“所有业务均通过 NIM SDK 单例调用”。

总结

至此，云信web demo中sdk的初始化与信息通信的逻辑树立告一段落。了解了这一部分，整个工程完全可以脱离他们的demo自己写一套工程出来了。