App.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  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. export default {
  7. data() {
  8. return {
  9. audioTip: null
  10. }
  11. },
  12. methods: {
  13. init() {
  14. // 加载数据
  15. store.dispatch("load").then(() => {
  16. // 审核
  17. this.initAudit();
  18. // 初始化websocket
  19. this.initWebSocket();
  20. }).catch((e) => {
  21. console.log(e);
  22. this.exit();
  23. })
  24. },
  25. initWebSocket() {
  26. let loginInfo = uni.getStorageSync("loginInfo")
  27. let userId = store.state.userStore.userInfo.id;
  28. wsApi.init(process.env.WS_URL, loginInfo.accessToken);
  29. wsApi.connect();
  30. wsApi.onOpen(()=>{
  31. // 拉取未读消息
  32. this.pullUnreadMessage();
  33. })
  34. wsApi.onMessage((cmd, msgInfo) => {
  35. if (cmd == 2) {
  36. // 异地登录,强制下线
  37. uni.showModal({
  38. content: '您已在其他地方登陆,将被强制下线',
  39. showCancel: false,
  40. })
  41. this.exit();
  42. } else if (cmd == 3) {
  43. // 标记这条消息是不是自己发的
  44. msgInfo.selfSend = userId == msgInfo.sendId;
  45. // 插入私聊消息
  46. this.handlePrivateMessage(msgInfo);
  47. } else if (cmd == 4) {
  48. // 标记这条消息是不是自己发的
  49. msgInfo.selfSend = userId == msgInfo.sendId;
  50. // 插入群聊消息
  51. this.handleGroupMessage(msgInfo);
  52. }
  53. });
  54. wsApi.onClose((res)=>{
  55. // 1006是服务器主动断开,3000是APP主动关闭
  56. if(res.code == 1006){
  57. uni.showToast({
  58. title: '连接已断开,请重新登录',
  59. icon: 'none',
  60. })
  61. this.exit();
  62. }else if(res.code != 3000){
  63. // 重新连接
  64. wsApi.connect();
  65. }
  66. })
  67. },
  68. pullUnreadMessage() {
  69. // 拉取未读私聊消息
  70. http({
  71. url: "/message/private/pullUnreadMessage",
  72. method: 'POST'
  73. });
  74. // 拉取未读群聊消息
  75. http({
  76. url: "/message/group/pullUnreadMessage",
  77. method: 'POST'
  78. });
  79. },
  80. handlePrivateMessage(msg) {
  81. let friendId = msg.selfSend ? msg.recvId : msg.sendId;
  82. let friend = store.state.friendStore.friends.find((f) => f.id == friendId);
  83. if (!friend) {
  84. http({
  85. url: `/friend/find/${msg.sendId}`,
  86. method: 'GET'
  87. }).then((friend) => {
  88. this.insertPrivateMessage(friend, msg);
  89. store.commit("addFriend", friend);
  90. })
  91. } else {
  92. // 好友列表不存在好友信息,则发请求获取好友信息
  93. this.insertPrivateMessage(friend, msg);
  94. }
  95. },
  96. insertPrivateMessage(friend, msg) {
  97. // webrtc 信令
  98. if (msg.type >= enums.MESSAGE_TYPE.RTC_CALL &&
  99. msg.type <= enums.MESSAGE_TYPE.RTC_CANDIDATE) {}
  100. let chatInfo = {
  101. type: 'PRIVATE',
  102. targetId: friend.id,
  103. showName: friend.nickName,
  104. headImage: friend.headImage
  105. };
  106. // 打开会话
  107. store.commit("openChat", chatInfo);
  108. // 插入消息
  109. store.commit("insertMessage", msg);
  110. // 播放提示音
  111. !msg.selfSend && this.playAudioTip();
  112. },
  113. handleGroupMessage(msg) {
  114. let group = store.state.groupStore.groups.find((g) => g.id == msg.groupId);
  115. if (!group) {
  116. http({
  117. url: `/group/find/${msg.groupId}`,
  118. method: 'get'
  119. }).then((group) => {
  120. this.insertGroupMessage(group, msg);
  121. store.commit("addGroup", group);
  122. })
  123. } else {
  124. // 群聊缓存存在,直接插入群聊消息
  125. this.insertGroupMessage(group, msg);
  126. }
  127. },
  128. insertGroupMessage(group, msg) {
  129. let chatInfo = {
  130. type: 'GROUP',
  131. targetId: group.id,
  132. showName: group.remark,
  133. headImage: group.headImageThumb
  134. };
  135. // 打开会话
  136. store.commit("openChat", chatInfo);
  137. // 插入消息
  138. store.commit("insertMessage", msg);
  139. // 播放提示音
  140. !msg.selfSend && this.playAudioTip();
  141. },
  142. exit() {
  143. console.log("exit");
  144. wsApi.close();
  145. uni.removeStorageSync("loginInfo");
  146. uni.navigateTo({
  147. url: "/pages/login/login"
  148. })
  149. store.dispatch("unload");
  150. },
  151. playAudioTip() {
  152. // 音频播放无法成功
  153. // this.audioTip = uni.createInnerAudioContext();
  154. // this.audioTip.src = "/static/audio/tip.wav";
  155. // this.audioTip.play();
  156. },
  157. initAudit() {
  158. console.log("initAudit")
  159. if(store.state.userStore.userInfo.type == 1){
  160. // 显示群组功能
  161. uni.setTabBarItem({
  162. index: 2,
  163. text: "群聊"
  164. })
  165. }else{
  166. // 隐藏群组功能
  167. uni.setTabBarItem({
  168. index: 2,
  169. text: "搜索"
  170. })
  171. }
  172. }
  173. },
  174. onLaunch() {
  175. // 登录状态校验
  176. if (uni.getStorageSync("loginInfo")) {
  177. // 初始化
  178. this.init()
  179. } else {
  180. // 跳转到登录页
  181. uni.navigateTo({
  182. url: "/pages/login/login"
  183. })
  184. }
  185. }
  186. }
  187. </script>
  188. <style lang="scss">
  189. @import url('./static/icon/iconfont.css');
  190. .tab-page {
  191. // #ifdef H5
  192. height: calc(100vh - 46px - 50px); // h5平台100vh是包含了顶部和底部,需要减去
  193. // #endif
  194. // #ifndef H5
  195. height: calc(100vh);
  196. // #endif
  197. background-color: #f8f8f8;
  198. }
  199. .page {
  200. // #ifdef H5
  201. height: calc(100vh - 45px); // h5平台100vh是包含了顶部,需要减去
  202. // #endif
  203. // #ifndef H5
  204. height: calc(100vh);
  205. // #endif
  206. background-color: #f8f8f8;
  207. }
  208. </style>