websock - 副本.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. // @/utils/websocket.js
  2. // import { isJSON } from "@/utils/utils"
  3. class WebSocketClass {
  4. constructor(url) {
  5. this.lockReconnect = false; // 是否开始重连
  6. this.wsUrl = ""; // ws 地址
  7. this.globalCallback = null; // 回调方法
  8. this.userClose = false; // 是否主动关闭
  9. this.createWebSocket(url);
  10. console.log('================================================================== ')
  11. }
  12. createWebSocket(url) {
  13. console.log("WebSocket --- createWebSocket " , );
  14. // #ifdef H5
  15. if (typeof(WebSocket) === 'undefined') {
  16. this.writeToScreen("您的浏览器不支持WebSocket,无法获取数据");
  17. return false
  18. }
  19. // #endif
  20. // #ifdef APP-PLUS
  21. if (typeof(uni.connectSocket) === 'undefined') {
  22. this.writeToScreen("您的浏览器不支持WebSocket,无法获取数据");
  23. return false
  24. }
  25. // #endif
  26. this.wsUrl = url;
  27. try {
  28. // 创建一个this.ws对象【发送、接收、关闭socket都由这个对象操作】
  29. // #ifdef H5
  30. this.ws = new WebSocket(this.wsUrl);
  31. console.log("WebSocket初始化H5 ---------" , );
  32. this.initEventHandle();
  33. // #endif
  34. // #ifdef APP-PLUS
  35. this.ws = uni.connectSocket({
  36. url: this.wsUrl,
  37. success: data => {
  38. console.log("WebSocket初始化APP ---------" , );
  39. this.initEventHandle();
  40. }
  41. });
  42. // #endif
  43. } catch (e) {
  44. this.reconnect(url);
  45. }
  46. }
  47. // 初始化
  48. initEventHandle() {
  49. /**
  50. * 监听WebSocket连接打开成功
  51. */
  52. // #ifdef H5
  53. this.ws.onopen = () => {
  54. console.log("WebSocket连接打开H5" , event);
  55. };
  56. // this.ws.onopen = (event) => {
  57. // console.log("WebSocket连接打开H5" , event);
  58. // // this.globalCallback({text:'WebSocket连接打开H5'})
  59. // };
  60. // #endif
  61. // #ifdef APP-PLUS
  62. this.ws.onOpen(res => {
  63. console.log('WebSocket连接打开APP' , res);
  64. });
  65. // #endif
  66. // /**
  67. // * 连接关闭后的回调函数
  68. // */
  69. // #ifdef H5
  70. this.ws.onclose = (event) => {
  71. console.log('this.userClose = H5' , this.userClose)
  72. if (!this.userClose) {
  73. // this.reconnect(this.wsUrl); //重连
  74. }
  75. };
  76. // #endif
  77. // #ifdef APP-PLUS
  78. this.ws.onClose(() => {
  79. console.log('this.userClose = APP' , this.userClose)
  80. if (!this.userClose) {
  81. this.reconnect(this.wsUrl); //重连
  82. }
  83. });
  84. // #endif
  85. /**
  86. * 报错时的回调函数
  87. */
  88. // #ifdef H5
  89. this.ws.onerror = (event) => {
  90. if (!this.userClose) {
  91. console.log('WebSocket 重连 H5' );
  92. this.reconnect(this.wsUrl); //重连
  93. }
  94. };
  95. // #endif
  96. // #ifdef APP-PLUS
  97. this.ws.onError(() => {
  98. if (!this.userClose) {
  99. console.log('WebSocket 重连 APP' );
  100. this.reconnect(this.wsUrl); //重连
  101. }
  102. });
  103. // #endif
  104. /**
  105. * 收到服务器数据后的回调函数
  106. */
  107. // #ifdef H5
  108. this.ws.onmessage = (event) => {
  109. console.log('onmessage = H5', event)
  110. // if(isJSON(event.data)) {
  111. // const jsonobject = JSON.parse(event.data)
  112. // this.globalCallback(jsonobject)
  113. // }else {
  114. // this.globalCallback(event.data)
  115. // }
  116. };
  117. // #endif
  118. // #ifdef APP-PLUS
  119. this.ws.onMessage(event => {
  120. console.log('onmessage = APP-PLUS', event)
  121. // if(isJSON(event.data)) {
  122. // const jsonobject = JSON.parse(event.data)
  123. // this.globalCallback(jsonobject)
  124. // }else {
  125. // this.globalCallback(event.data)
  126. // }
  127. });
  128. // #endif
  129. }
  130. // 关闭ws连接回调
  131. reconnect(url) {
  132. if (this.lockReconnect) return;
  133. this.ws.close();
  134. this.lockReconnect = true; // 关闭重连,没连接上会一直重连,设置延迟避免请求过多
  135. setTimeout(() => {
  136. this.createWebSocket(url);
  137. this.lockReconnect = false;
  138. }, 1000);
  139. }
  140. // 发送信息方法
  141. webSocketSendMsg(msg) {
  142. this.ws && this.ws.send({
  143. data: msg,
  144. success() {
  145. console.log("消息发送成功");
  146. },
  147. fail(err) {
  148. console.log("关闭失败", err)
  149. }
  150. });
  151. }
  152. // 获取ws返回的数据方法
  153. getWebSocketMsg(callback) {
  154. this.globalCallback = callback
  155. }
  156. // 关闭ws方法
  157. closeSocket() {
  158. if (this.ws) {
  159. this.userClose = true;
  160. this.ws.close({
  161. success(res) {
  162. console.log("关闭成功", res)
  163. },
  164. fail(err) {
  165. console.log("关闭失败", err)
  166. }
  167. });
  168. }
  169. }
  170. writeToScreen(massage) {
  171. console.log(massage);
  172. }
  173. }
  174. export default WebSocketClass;