App.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  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 || res.code == 3000){
  57. uni.showToast({
  58. title: '连接已断开,请重新登录',
  59. icon: 'none',
  60. })
  61. this.exit();
  62. }else{
  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. },
  150. playAudioTip() {
  151. // 音频播放无法成功
  152. // this.audioTip = uni.createInnerAudioContext();
  153. // this.audioTip.src = "/static/audio/tip.wav";
  154. // this.audioTip.play();
  155. },
  156. initAudit() {
  157. console.log("initAudit")
  158. if(store.state.userStore.userInfo.type == 1){
  159. // 显示群组功能
  160. uni.setTabBarItem({
  161. index: 2,
  162. text: "群聊"
  163. })
  164. }else{
  165. // 隐藏群组功能
  166. uni.setTabBarItem({
  167. index: 2,
  168. text: "资讯"
  169. })
  170. }
  171. }
  172. },
  173. onLaunch() {
  174. // 登录状态校验
  175. if (uni.getStorageSync("loginInfo")) {
  176. // 初始化
  177. this.init()
  178. } else {
  179. // 跳转到登录页
  180. uni.navigateTo({
  181. url: "/pages/login/login"
  182. })
  183. }
  184. }
  185. }
  186. </script>
  187. <style lang="scss">
  188. @import url('./static/icon/iconfont.css');
  189. .tab-page {
  190. // #ifdef H5
  191. height: calc(100vh - 46px - 50px); // h5平台100vh是包含了顶部和底部,需要减去
  192. // #endif
  193. // #ifndef H5
  194. height: calc(100vh);
  195. // #endif
  196. background-color: #f8f8f8;
  197. }
  198. .page {
  199. // #ifdef H5
  200. height: calc(100vh - 45px); // h5平台100vh是包含了顶部,需要减去
  201. // #endif
  202. // #ifndef H5
  203. height: calc(100vh);
  204. // #endif
  205. background-color: #f8f8f8;
  206. }
  207. </style>