useWebSocket.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. import { reactive, ref, unref } from 'vue';
  2. import sheep from '@/sheep';
  3. // import chat from '@/sheep/api/chat';
  4. import dayjs from 'dayjs';
  5. import io from '@hyoga/uni-socket.io';
  6. import { baseUrl, websocketPath } from '@/sheep/config';
  7. export function useWebSocket() {
  8. const SocketIo = ref(null)
  9. // chat状态数据
  10. const state = reactive({
  11. socketState: {
  12. isConnect: true, //是否连接成功
  13. isConnecting: false, //重连中,不允许新的socket开启。
  14. tip: '',
  15. },
  16. chatConfig: {}, // 配置信息
  17. });
  18. /**
  19. * 连接初始化
  20. * @param {Object} config - 配置信息
  21. * @param {Function} callBack -回调函数,有新消息接入,保持底部
  22. */
  23. const socketInit = (config, callBack) => {
  24. state.chatConfig = config;
  25. if (SocketIo.value && SocketIo.value.connected) return; // 如果socket已经连接,返回false
  26. if (state.socketState.isConnecting) return; // 重连中,返回false
  27. // 启动初始化
  28. SocketIo.value = io(baseUrl + websocketPath, {
  29. path:websocketPath,
  30. query:{
  31. token: getAccessToken()
  32. },
  33. reconnection: true, // 默认 true 是否断线重连
  34. reconnectionAttempts: 5, // 默认无限次 断线尝试次数
  35. reconnectionDelay: 1000, // 默认 1000,进行下一次重连的间隔。
  36. reconnectionDelayMax: 5000, // 默认 5000, 重新连接等待的最长时间 默认 5000
  37. randomizationFactor: 0.5, // 默认 0.5 [0-1],随机重连延迟时间
  38. timeout: 20000, // 默认 20s
  39. transports: ['websocket', 'polling'], // websocket | polling,
  40. ...config,
  41. });
  42. // 监听连接
  43. SocketIo.value.on('connect', async (res) => {
  44. console.log('socket:connect');
  45. // 消息返回
  46. callBack && callBack(res)
  47. });
  48. // 监听错误 error
  49. SocketIo.value.on('error', (error) => {
  50. console.log('error:', error);
  51. });
  52. // 重连失败 connect_error
  53. SocketIo.value.on('connect_error', (error) => {
  54. console.log('connect_error');
  55. });
  56. // 连接上,但无反应 connect_timeout
  57. SocketIo.value.on('connect_timeout', (error) => {
  58. console.log(error, 'connect_timeout');
  59. });
  60. // 服务进程销毁 disconnect
  61. SocketIo.value.on('disconnect', (error) => {
  62. console.log(error, 'disconnect');
  63. });
  64. // 服务重启重连上reconnect
  65. SocketIo.value.on('reconnect', (error) => {
  66. console.log(error, 'reconnect');
  67. });
  68. // 开始重连reconnect_attempt
  69. SocketIo.value.on('reconnect_attempt', (error) => {
  70. state.socketState.isConnect = false;
  71. state.socketState.isConnecting = true;
  72. console.log(error, 'reconnect_attempt');
  73. });
  74. // 重新连接中reconnecting
  75. SocketIo.value.on('reconnecting', (error) => {
  76. console.log(error, 'reconnecting');
  77. });
  78. // 重新连接错误reconnect_error
  79. SocketIo.value.on('reconnect_error', (error) => {
  80. console.log('reconnect_error');
  81. });
  82. // 重新连接失败reconnect_failed
  83. SocketIo.value.on('reconnect_failed', (error) => {
  84. state.socketState.isConnecting = false;
  85. console.log(error, 'reconnect_failed');
  86. });
  87. };
  88. // 获取token
  89. const getAccessToken = () => {
  90. return uni.getStorageSync('token');
  91. };
  92. return {
  93. state,
  94. socketInit
  95. }
  96. }