App.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <script>
  2. import store from './store';
  3. import http from './common/request';
  4. import * as enums from './common/enums';
  5. import * as wsApi from './common/wssocket';
  6. import UNI_APP from '@/.env.js'
  7. export default {
  8. data() {
  9. return {
  10. audioTip: null
  11. }
  12. },
  13. methods: {
  14. init() {
  15. // 加载数据
  16. store.dispatch("load").then(() => {
  17. // 审核
  18. this.initAudit();
  19. // 初始化websocket
  20. this.initWebSocket();
  21. }).catch((e) => {
  22. console.log(e);
  23. this.exit();
  24. })
  25. },
  26. initWebSocket() {
  27. let loginInfo = uni.getStorageSync("loginInfo")
  28. wsApi.init();
  29. wsApi.connect(UNI_APP.WS_URL, loginInfo.accessToken);
  30. wsApi.onConnect(() => {
  31. // 加载离线消息
  32. this.pullPrivateOfflineMessage(store.state.chatStore.privateMsgMaxId);
  33. this.pullGroupOfflineMessage(store.state.chatStore.groupMsgMaxId);
  34. });
  35. wsApi.onMessage((cmd, msgInfo) => {
  36. if (cmd == 2) {
  37. // 异地登录,强制下线
  38. uni.showModal({
  39. content: '您已在其他地方登陆,将被强制下线',
  40. showCancel: false,
  41. })
  42. this.exit();
  43. } else if (cmd == 3) {
  44. // 私聊消息
  45. this.handlePrivateMessage(msgInfo);
  46. } else if (cmd == 4) {
  47. // 群聊消息
  48. this.handleGroupMessage(msgInfo);
  49. }
  50. });
  51. wsApi.onClose((res) => {
  52. // 1000是客户端正常主动关闭
  53. if (res.code != 1000) {
  54. // 重新连接
  55. uni.showToast({
  56. title: '连接已断开,尝试重新连接...',
  57. icon: 'none',
  58. })
  59. let loginInfo = uni.getStorageSync("loginInfo")
  60. wsApi.reconnect(UNI_APP.WS_URL, loginInfo.accessToken);
  61. }
  62. })
  63. },
  64. pullPrivateOfflineMessage(minId) {
  65. store.commit("loadingPrivateMsg",true)
  66. http({
  67. url: "/message/private/pullOfflineMessage?minId=" + minId,
  68. method: 'get'
  69. });
  70. },
  71. pullGroupOfflineMessage(minId) {
  72. store.commit("loadingGroupMsg",true)
  73. http({
  74. url: "/message/group/pullOfflineMessage?minId=" + minId,
  75. method: 'get'
  76. });
  77. },
  78. handlePrivateMessage(msg) {
  79. // 消息加载标志
  80. if (msg.type == enums.MESSAGE_TYPE.LOADDING) {
  81. store.commit("loadingPrivateMsg", JSON.parse(msg.content))
  82. return;
  83. }
  84. // 消息已读处理,清空已读数量
  85. if (msg.type == enums.MESSAGE_TYPE.READED) {
  86. store.commit("resetUnreadCount", {
  87. type: 'PRIVATE',
  88. targetId: msg.recvId
  89. })
  90. return;
  91. }
  92. // 消息回执处理,改消息状态为已读
  93. if (msg.type == enums.MESSAGE_TYPE.RECEIPT) {
  94. store.commit("readedMessage", { friendId: msg.sendId })
  95. return;
  96. }
  97. // 标记这条消息是不是自己发的
  98. msg.selfSend = msg.sendId == store.state.userStore.userInfo.id;
  99. // 好友id
  100. let friendId = msg.selfSend ? msg.recvId : msg.sendId;
  101. this.loadFriendInfo(friendId).then((friend) => {
  102. this.insertPrivateMessage(friend, msg);
  103. })
  104. },
  105. insertPrivateMessage(friend, msg) {
  106. // webrtc 信令
  107. if (msg.type >= enums.MESSAGE_TYPE.RTC_CALL_VOICE &&
  108. msg.type <= enums.MESSAGE_TYPE.RTC_CANDIDATE) {
  109. // #ifdef MP-WEIXIN
  110. // 小程序不支持音视频
  111. return;
  112. // #endif
  113. // 被呼叫,弹出视频页面
  114. if(msg.type == enums.MESSAGE_TYPE.RTC_CALL_VOICE
  115. || msg.type == enums.MESSAGE_TYPE.RTC_CALL_VIDEO){
  116. let mode = msg.type == enums.MESSAGE_TYPE.RTC_CALL_VIDEO? "video":"voice";
  117. let pages = getCurrentPages();
  118. let curPage = pages[pages.length-1].route;
  119. if(curPage != "pages/chat/chat-video"){
  120. const friendInfo = encodeURIComponent(JSON.stringify(friend));
  121. uni.navigateTo({
  122. url: `/pages/chat/chat-video?mode=${mode}&friend=${friendInfo}&isHost=false`
  123. })
  124. }
  125. }
  126. setTimeout(() => {
  127. uni.$emit('WS_RTC',msg);
  128. },500)
  129. return;
  130. }
  131. let chatInfo = {
  132. type: 'PRIVATE',
  133. targetId: friend.id,
  134. showName: friend.nickName,
  135. headImage: friend.headImage
  136. };
  137. // 打开会话
  138. store.commit("openChat", chatInfo);
  139. // 插入消息
  140. store.commit("insertMessage", msg);
  141. // 播放提示音
  142. !msg.selfSend && this.playAudioTip();
  143. },
  144. handleGroupMessage(msg) {
  145. // 消息加载标志
  146. if (msg.type == enums.MESSAGE_TYPE.LOADDING) {
  147. store.commit("loadingGroupMsg",JSON.parse(msg.content))
  148. return;
  149. }
  150. // 消息已读处理
  151. if (msg.type == enums.MESSAGE_TYPE.READED) {
  152. // 我已读对方的消息,清空已读数量
  153. let chatInfo = {
  154. type: 'GROUP',
  155. targetId: msg.groupId
  156. }
  157. store.commit("resetUnreadCount", chatInfo)
  158. return;
  159. }
  160. // 消息回执处理
  161. if (msg.type == enums.MESSAGE_TYPE.RECEIPT) {
  162. // 更新消息已读人数
  163. let msgInfo = {
  164. id: msg.id,
  165. groupId: msg.groupId,
  166. readedCount: msg.readedCount,
  167. receiptOk: msg.receiptOk
  168. };
  169. store.commit("updateMessage", msgInfo)
  170. return;
  171. }
  172. // 标记这条消息是不是自己发的
  173. msg.selfSend = msg.sendId == store.state.userStore.userInfo.id;
  174. this.loadGroupInfo(msg.groupId).then((group) => {
  175. // 插入群聊消息
  176. this.insertGroupMessage(group, msg);
  177. })
  178. },
  179. insertGroupMessage(group, msg) {
  180. let chatInfo = {
  181. type: 'GROUP',
  182. targetId: group.id,
  183. showName: group.remark,
  184. headImage: group.headImageThumb
  185. };
  186. // 打开会话
  187. store.commit("openChat", chatInfo);
  188. // 插入消息
  189. store.commit("insertMessage", msg);
  190. // 播放提示音
  191. !msg.selfSend && this.playAudioTip();
  192. },
  193. loadFriendInfo(id) {
  194. return new Promise((resolve, reject) => {
  195. let friend = store.getters.findFriend(id);
  196. if (friend) {
  197. resolve(friend);
  198. } else {
  199. http({
  200. url: `/friend/find/${id}`,
  201. method: 'get'
  202. }).then((friend) => {
  203. store.commit("addFriend", friend);
  204. resolve(friend)
  205. })
  206. }
  207. });
  208. },
  209. loadGroupInfo(id) {
  210. return new Promise((resolve, reject) => {
  211. let group = store.state.groupStore.groups.find((g) => g.id == id);
  212. if (group) {
  213. resolve(group);
  214. } else {
  215. http({
  216. url: `/group/find/${id}`,
  217. method: 'get'
  218. }).then((group) => {
  219. resolve(group)
  220. store.commit("addGroup", group);
  221. })
  222. }
  223. });
  224. },
  225. exit() {
  226. console.log("exit");
  227. wsApi.close(1000);
  228. uni.removeStorageSync("loginInfo");
  229. uni.reLaunch({
  230. url: "/pages/login/login"
  231. })
  232. store.dispatch("unload");
  233. },
  234. playAudioTip() {
  235. // 音频播放无法成功
  236. // this.audioTip = uni.createInnerAudioContext();
  237. // this.audioTip.src = "/static/audio/tip.wav";
  238. // this.audioTip.play();
  239. },
  240. initAudit() {
  241. if (store.state.userStore.userInfo.type == 1) {
  242. // 显示群组功能
  243. uni.setTabBarItem({
  244. index: 2,
  245. text: "群聊"
  246. })
  247. } else {
  248. // 隐藏群组功能
  249. uni.setTabBarItem({
  250. index: 2,
  251. text: "搜索"
  252. })
  253. }
  254. }
  255. },
  256. onLaunch() {
  257. // 登录状态校验
  258. if (uni.getStorageSync("loginInfo")) {
  259. // 初始化
  260. this.init()
  261. } else {
  262. // 跳转到登录页
  263. uni.navigateTo({
  264. url: "/pages/login/login"
  265. })
  266. }
  267. }
  268. }
  269. </script>
  270. <style lang="scss">
  271. @import url('./static/icon/iconfont.css');
  272. .tab-page {
  273. // #ifdef H5
  274. height: calc(100vh - 46px - 50px); // h5平台100vh是包含了顶部和底部,需要减去
  275. // #endif
  276. // #ifndef H5
  277. height: calc(100vh);
  278. // #endif
  279. background-color: #f8f8f8;
  280. }
  281. .page {
  282. // #ifdef H5
  283. height: calc(100vh - 45px); // h5平台100vh是包含了顶部,需要减去
  284. // #endif
  285. // #ifndef H5
  286. height: calc(100vh);
  287. // #endif
  288. background-color: #f8f8f8;
  289. }
  290. </style>