App.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <script>
  2. var wsUrl="ws://42.194.245.189:8008/app/webSocket/w-";
  3. var pingpangTimes=null;
  4. var isSocketOpen=false;
  5. var socket=null;
  6. export default {
  7. data() {
  8. return {
  9. };
  10. },
  11. onLaunch: function() {
  12. console.log('App Launch')
  13. var that=this;
  14. uni.$on('initSocket', () => {
  15. that.initSocket()
  16. })
  17. uni.$on('sendMsg', (item) => {
  18. that.sendMsg(item)
  19. })
  20. uni.$on('closeWebSocket', () => {
  21. that.closeWebSocket()
  22. })
  23. },
  24. onShow: function() {
  25. console.log('App Show')
  26. },
  27. onHide: function() {
  28. console.log('App Hide')
  29. },
  30. onUnload() {
  31. console.log(pingpangTimes)
  32. clearInterval(pingpangTimes)
  33. },
  34. methods:{
  35. closeWebSocket(){
  36. if(socket!=null){
  37. uni.closeSocket();
  38. }
  39. clearInterval(pingpangTimes)
  40. },
  41. initSocket(){
  42. console.log("initSocket")
  43. //创建一个socket连接
  44. var userId=uni.getStorageSync('companyUserId') ;
  45. var that=this;
  46. console.log(wsUrl)
  47. socket=uni.connectSocket({
  48. url:wsUrl+userId,
  49. multiple:true,
  50. success: res=>{
  51. console.log('WebSocket连接已打开!');
  52. isSocketOpen=true
  53. //先确保清除了之前的心跳定时器
  54. clearInterval(pingpangTimes)
  55. uni.onSocketMessage((res)=>{
  56. console.log("收到消息")
  57. const redata = JSON.parse(res.data);
  58. console.log(redata);
  59. if(redata.cmd=="heartbeat"){
  60. //心跳
  61. console.log("heartbeat")
  62. }
  63. else if(redata.cmd=="getWeixinId"){
  64. uni.$emit('getWeixinId',redata);
  65. }
  66. else if(redata.cmd=="getWeixinList"){
  67. uni.$emit('getWeixinList',redata);
  68. }
  69. else if(redata.cmd=="sendSop"){
  70. uni.$emit('sendSop',redata);
  71. }
  72. })
  73. pingpangTimes=setInterval(()=>{
  74. var userId=uni.getStorageSync('userId') ;
  75. var data={cmd:"heartbeat",userId: "w-"+userId};
  76. console.log(data)
  77. uni.sendSocketMessage({
  78. data:JSON.stringify(data),
  79. success:()=>{
  80. console.log('WebSocket发送心条数据!');
  81. },
  82. fail:()=>{
  83. isSocketOpen=false
  84. }
  85. });
  86. },5000)
  87. },
  88. error: res=>{
  89. console.log(res)
  90. },
  91. })
  92. //监听socket打开
  93. uni.onSocketOpen(()=>{
  94. isSocketOpen=true
  95. console.log('WebSocket连接已打开!!');
  96. })
  97. //监听socket关闭
  98. uni.onSocketClose(()=>{
  99. isSocketOpen=false
  100. console.log('WebSocket连接已关闭!');
  101. })
  102. //监听socket错误
  103. uni.onSocketError(()=>{
  104. isSocketOpen=false
  105. console.log('WebSocket连接打开失败');
  106. })
  107. },
  108. sendMsg(data){
  109. if(isSocketOpen){
  110. var userId=uni.getStorageSync('companyUserId') ;
  111. uni.sendSocketMessage({
  112. data: JSON.stringify(data),
  113. success:()=>{
  114. console.log("发送成功")
  115. },
  116. fail:()=>{
  117. console.log("发送失败")
  118. }
  119. });
  120. }
  121. },
  122. }
  123. }
  124. </script>
  125. <style lang="scss">
  126. /*每个页面公共css */
  127. @import "@/uni_modules/uview-ui/index.scss";
  128. view{
  129. box-sizing: border-box;
  130. }
  131. .ellipsis{
  132. overflow: hidden;
  133. text-overflow: ellipsis;
  134. white-space: nowrap;
  135. }
  136. .ellipsis2{
  137. overflow:hidden;
  138. text-overflow:ellipsis;
  139. display:-webkit-box;
  140. -webkit-box-orient:vertical;
  141. -webkit-line-clamp:2;
  142. }
  143. .no-data-box{
  144. height:100%;
  145. width: 100%;
  146. display: flex;
  147. justify-content: center;
  148. align-items: center;
  149. flex-direction: column;
  150. image{
  151. width: 264upx;
  152. height: 212upx;
  153. }
  154. .empty-title{
  155. margin-top: 20rpx;
  156. font-size: 28rpx;
  157. color: gray;
  158. }
  159. }
  160. </style>
  161. <style lang="less">
  162. /*每个页面公共css */
  163. @import './assets/iconfont/iconfont.css';
  164. @import './assets/css/common.less';
  165. </style>