websocket.ts 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. /**
  2. * @module initWebSocket 初始化
  3. * @module websocketonopen 连接成功
  4. * @module websocketonerror 连接失败
  5. * @module websocketclose 断开连接
  6. * @module resetHeart 重置心跳
  7. * @module sendSocketHeart 心跳发送
  8. * @module reconnect 重连
  9. * @module sendMsg 发送数据
  10. * @module websocketonmessage 接收数据
  11. * @module test 测试收到消息传递
  12. * @description socket 通信
  13. * @param {any} url socket地址
  14. * @param {any} websocket websocket 实例
  15. * @param {any} heartTime 心跳定时器实例
  16. * @param {number} socketHeart 心跳次数
  17. * @param {number} HeartTimeOut 心跳超时时间
  18. * @param {number} socketError 错误次数
  19. */
  20. import { getToken } from '@/utils/auth';
  21. import useNoticeStore from '@/store/modules/notice';
  22. const { addNotice } = useNoticeStore();
  23. let socketUrl: any = ''; // socket地址
  24. let websocket: any = null; // websocket 实例
  25. let heartTime: any = null; // 心跳定时器实例
  26. let socketHeart = 0 as number; // 心跳次数
  27. const HeartTimeOut = 10000; // 心跳超时时间 10000 = 10s
  28. let socketError = 0 as number; // 错误次数
  29. // 初始化socket
  30. export const initWebSocket = (url: any) => {
  31. socketUrl = url;
  32. // 初始化 websocket
  33. websocket = new WebSocket(url + '?Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID);
  34. websocketonopen();
  35. websocketonmessage();
  36. websocketonerror();
  37. websocketclose();
  38. sendSocketHeart();
  39. return websocket;
  40. };
  41. // socket 连接成功
  42. export const websocketonopen = () => {
  43. websocket.onopen = function () {
  44. console.log('连接 websocket 成功');
  45. resetHeart();
  46. };
  47. };
  48. // socket 连接失败
  49. export const websocketonerror = () => {
  50. websocket.onerror = function (e: any) {
  51. console.log('连接 websocket 失败', e);
  52. };
  53. };
  54. // socket 断开链接
  55. export const websocketclose = () => {
  56. websocket.onclose = function (e: any) {
  57. console.log('断开连接', e);
  58. };
  59. };
  60. // socket 重置心跳
  61. export const resetHeart = () => {
  62. socketHeart = 0;
  63. socketError = 0;
  64. clearInterval(heartTime);
  65. sendSocketHeart();
  66. };
  67. // socket心跳发送
  68. export const sendSocketHeart = () => {
  69. heartTime = setInterval(() => {
  70. // 如果连接正常则发送心跳
  71. if (websocket.readyState == 1) {
  72. // if (socketHeart <= 30) {
  73. websocket.send(
  74. JSON.stringify({
  75. type: 'ping'
  76. })
  77. );
  78. socketHeart = socketHeart + 1;
  79. } else {
  80. // 重连
  81. reconnect();
  82. }
  83. }, HeartTimeOut);
  84. };
  85. // socket重连
  86. export const reconnect = () => {
  87. if (socketError <= 2) {
  88. clearInterval(heartTime);
  89. initWebSocket(socketUrl);
  90. socketError = socketError + 1;
  91. // eslint-disable-next-line prettier/prettier
  92. console.log('socket重连', socketError);
  93. } else {
  94. // eslint-disable-next-line prettier/prettier
  95. console.log('重试次数已用完');
  96. clearInterval(heartTime);
  97. }
  98. };
  99. // socket 发送数据
  100. export const sendMsg = (data: any) => {
  101. websocket.send(data);
  102. };
  103. // socket 接收数据
  104. export const websocketonmessage = () => {
  105. websocket.onmessage = function (e: any) {
  106. if (e.data.indexOf('heartbeat') > 0) {
  107. resetHeart();
  108. }
  109. if (e.data.indexOf('ping') > 0) {
  110. return;
  111. }
  112. addNotice({
  113. message: e.data,
  114. read: false,
  115. time: new Date().toLocaleString()
  116. });
  117. ElNotification({
  118. title: '消息',
  119. message: e.data,
  120. type: 'success',
  121. duration: 3000
  122. })
  123. return e.data;
  124. };
  125. };