websocket.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. /**
  2. * WebSocket聊天管理工具类
  3. * 实现了心跳机制、断线重连、消息队列等功能
  4. */
  5. const DEBUG_WS = false;
  6. class WebSocketManager {
  7. constructor() {
  8. // 心跳相关
  9. this.heartbeatTimer = null;
  10. this.heartbeatInterval = 30000; // 30秒
  11. // 重连相关
  12. this.reconnectTimer = null;
  13. this.reconnectCount = 0;
  14. this.maxReconnectCount = 10;
  15. this.reconnectDelay = 1000; // 初始1秒
  16. // 消息队列(断线时暂存)
  17. this.messageQueue = [];
  18. this.maxQueueSize = 100;
  19. // 回调函数
  20. this.onMessageCallback = null;
  21. this.onConnectCallback = null;
  22. this.onDisconnectCallback = null;
  23. this.onErrorCallback = null;
  24. }
  25. /**
  26. * 连接WebSocket
  27. * @param {Number} userId 用户ID
  28. * @param {String} baseUrl WebSocket服务地址
  29. */
  30. connect(userId, baseUrl = 'ws://api.zhongruanke.cn') {
  31. if (this.isConnected) {
  32. return;
  33. }
  34. this.userId = userId;
  35. this.url = `${baseUrl}/ws/chat?userId=${userId}`;
  36. this.socket = uni.connectSocket({
  37. url: this.url,
  38. success: () => {
  39. },
  40. fail: (err) => {
  41. console.error('WebSocket连接失败', err);
  42. this.onError(err);
  43. }
  44. });
  45. // 监听连接打开
  46. uni.onSocketOpen((res) => {
  47. this.isConnected = true;
  48. this.reconnectCount = 0;
  49. // 启动心跳
  50. this.startHeartbeat();
  51. // 发送队列中的消息
  52. this.flushMessageQueue();
  53. // 触发连接回调
  54. if (this.onConnectCallback) {
  55. this.onConnectCallback();
  56. }
  57. });
  58. // 监听消息接收
  59. uni.onSocketMessage((res) => {
  60. try {
  61. const message = JSON.parse(res.data);
  62. this.handleMessage(message);
  63. } catch (e) {
  64. console.error('❌ 解析消息失败', e);
  65. console.error(' 原始数据:', res.data);
  66. }
  67. });
  68. // 监听连接关闭
  69. uni.onSocketClose((res) => {
  70. this.isConnected = false;
  71. this.stopHeartbeat();
  72. // 触发断开回调
  73. if (this.onDisconnectCallback) {
  74. this.onDisconnectCallback();
  75. }
  76. // 尝试重连
  77. this.reconnect();
  78. });
  79. // 监听错误
  80. uni.onSocketError((err) => {
  81. console.error('WebSocket错误', err);
  82. this.isConnected = false;
  83. this.onError(err);
  84. });
  85. }
  86. /**
  87. * 处理接收到的消息
  88. */
  89. handleMessage(message) {
  90. switch (message.type) {
  91. case 'pong':
  92. // 心跳响应
  93. break;
  94. case 'chat':
  95. // 聊天消息
  96. if (this.onMessageCallback) {
  97. this.onMessageCallback(message);
  98. }
  99. // 自动发送ACK确认
  100. this.sendAck(message.messageId);
  101. break;
  102. case 'ack':
  103. if (this.onMessageCallback) {
  104. this.onMessageCallback(message);
  105. } else {
  106. console.warn(' ⚠️ onMessageCallback未设置!');
  107. }
  108. break;
  109. case 'recall':
  110. // 消息撤回
  111. if (this.onMessageCallback) {
  112. this.onMessageCallback(message);
  113. }
  114. break;
  115. case 'typing':
  116. // 正在输入
  117. if (this.onMessageCallback) {
  118. this.onMessageCallback(message);
  119. }
  120. break;
  121. case 'read':
  122. // 已读回执
  123. if (this.onMessageCallback) {
  124. this.onMessageCallback(message);
  125. }
  126. break;
  127. case 'online':
  128. break;
  129. case 'error':
  130. // 错误消息
  131. console.error('服务器错误', message.errorMessage);
  132. uni.showToast({
  133. title: message.errorMessage,
  134. icon: 'none'
  135. });
  136. break;
  137. default:
  138. }
  139. }
  140. /**
  141. * 发送聊天消息
  142. */
  143. sendMessage(toUserId, content, messageType = 1, extraData = {}) {
  144. const message = {
  145. type: 'chat',
  146. messageId: this.generateMessageId(),
  147. fromUserId: this.userId,
  148. toUserId: toUserId,
  149. messageType: messageType,
  150. content: content,
  151. timestamp: Date.now(),
  152. extraData: extraData
  153. };
  154. if (messageType === 2) {
  155. // 图片消息
  156. message.mediaUrl = extraData.mediaUrl;
  157. message.thumbnailUrl = extraData.thumbnailUrl;
  158. } else if (messageType === 3 || messageType === 4) {
  159. // 语音或视频消息
  160. message.mediaUrl = extraData.mediaUrl;
  161. message.duration = extraData.duration;
  162. message.mediaSize = extraData.mediaSize;
  163. }
  164. this.send(message);
  165. return message.messageId;
  166. }
  167. /**
  168. * 发送消息ACK确认
  169. */
  170. sendAck(messageId) {
  171. this.send({
  172. type: 'ack',
  173. messageId: messageId,
  174. timestamp: Date.now()
  175. });
  176. }
  177. /**
  178. * 撤回消息
  179. */
  180. recallMessage(messageId) {
  181. this.send({
  182. type: 'recall',
  183. messageId: messageId,
  184. timestamp: Date.now()
  185. });
  186. }
  187. /**
  188. * 发送正在输入状态
  189. */
  190. sendTyping(toUserId) {
  191. this.send({
  192. type: 'typing',
  193. toUserId: toUserId,
  194. timestamp: Date.now()
  195. });
  196. }
  197. /**
  198. * 发送已读回执
  199. */
  200. sendReadReceipt(toUserId) {
  201. this.send({
  202. type: 'read',
  203. fromUserId: this.userId,
  204. toUserId: toUserId,
  205. timestamp: Date.now()
  206. });
  207. }
  208. /**
  209. * 发送数据到WebSocket
  210. */
  211. send(data) {
  212. if (!this.isConnected) {
  213. // 加入消息队列
  214. if (this.messageQueue.length < this.maxQueueSize) {
  215. this.messageQueue.push(data);
  216. }
  217. return false;
  218. }
  219. try {
  220. const jsonStr = JSON.stringify(data);
  221. uni.sendSocketMessage({
  222. data: jsonStr,
  223. success: () => {
  224. },
  225. fail: (err) => {
  226. console.error('❌ WebSocket消息发送失败', err);
  227. console.error(' 错误详情:', JSON.stringify(err));
  228. // 发送失败,加入队列
  229. if (this.messageQueue.length < this.maxQueueSize) {
  230. this.messageQueue.push(data);
  231. }
  232. }
  233. });
  234. return true;
  235. } catch (e) {
  236. console.error('❌ 发送消息异常', e);
  237. console.error(' 异常详情:', e.message);
  238. return false;
  239. }
  240. }
  241. /**
  242. * 发送队列中的消息
  243. */
  244. flushMessageQueue() {
  245. if (this.messageQueue.length === 0) {
  246. return;
  247. }
  248. while (this.messageQueue.length > 0) {
  249. const message = this.messageQueue.shift();
  250. this.send(message);
  251. }
  252. }
  253. /**
  254. * 启动心跳
  255. */
  256. startHeartbeat() {
  257. this.stopHeartbeat();
  258. this.heartbeatTimer = setInterval(() => {
  259. if (this.isConnected) {
  260. this.send({
  261. type: 'ping',
  262. timestamp: Date.now()
  263. });
  264. }
  265. }, this.heartbeatInterval);
  266. }
  267. /**
  268. * 停止心跳
  269. */
  270. stopHeartbeat() {
  271. if (this.heartbeatTimer) {
  272. clearInterval(this.heartbeatTimer);
  273. this.heartbeatTimer = null;
  274. }
  275. }
  276. /**
  277. * 断线重连
  278. */
  279. reconnect() {
  280. if (this.reconnectCount >= this.maxReconnectCount) {
  281. uni.showToast({
  282. title: '连接失败,请检查网络',
  283. icon: 'none'
  284. });
  285. return;
  286. }
  287. // 指数退避算法
  288. const delay = Math.min(
  289. this.reconnectDelay * Math.pow(2, this.reconnectCount),
  290. 30000 // 最大30秒
  291. );
  292. this.reconnectTimer = setTimeout(() => {
  293. this.reconnectCount++;
  294. this.connect(this.userId, this.url.split('/ws/chat')[0]);
  295. }, delay);
  296. }
  297. /**
  298. * 取消重连
  299. */
  300. cancelReconnect() {
  301. if (this.reconnectTimer) {
  302. clearTimeout(this.reconnectTimer);
  303. this.reconnectTimer = null;
  304. }
  305. }
  306. /**
  307. * 关闭连接
  308. */
  309. close() {
  310. this.cancelReconnect();
  311. this.stopHeartbeat();
  312. if (this.socket) {
  313. uni.closeSocket();
  314. this.socket = null;
  315. }
  316. this.isConnected = false;
  317. }
  318. /**
  319. * 错误处理
  320. */
  321. onError(error) {
  322. if (this.onErrorCallback) {
  323. this.onErrorCallback(error);
  324. }
  325. }
  326. /**
  327. * 生成消息ID
  328. */
  329. generateMessageId() {
  330. return `${this.userId}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
  331. }
  332. /**
  333. * 设置消息回调
  334. */
  335. onMessage(callback) {
  336. this.onMessageCallback = callback;
  337. }
  338. /**
  339. * 设置连接回调
  340. */
  341. onConnect(callback) {
  342. this.onConnectCallback = callback;
  343. }
  344. /**
  345. * 设置断开回调
  346. */
  347. onDisconnect(callback) {
  348. this.onDisconnectCallback = callback;
  349. }
  350. /**
  351. * 设置错误回调
  352. */
  353. onErrorHandler(callback) {
  354. this.onErrorCallback = callback;
  355. }
  356. }
  357. // 导出单例
  358. export default new WebSocketManager();