useWebSocket.js 3.1 KB

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