websoket.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. /*
  2. * @Author: your name
  3. * @Date: 2020-11-13 17:05:22
  4. * @LastEditTime: 2020-11-13 17:08:35
  5. * @LastEditors: Please set LastEditors
  6. * @Description: In User Settings Edit
  7. * @FilePath: \userCenter\src\utils\websoket.js
  8. */
  9. let Socket = ''
  10. let setIntervalWesocketPush = null
  11. /**
  12. * 建立websocket连接
  13. * @param {string} url ws地址
  14. */
  15. export const createSocket = url => {
  16. Socket && Socket.close()
  17. if (!Socket) {
  18. Socket = new WebSocket(url)
  19. console.log('建立websocket连接')
  20. Socket.onopen = onopenWS
  21. Socket.onmessage = onmessageWS
  22. Socket.onerror = onerrorWS
  23. Socket.onclose = oncloseWS
  24. } else {
  25. console.log('websocket已连接')
  26. }
  27. }
  28. /**打开WS之后发送心跳 */
  29. const onopenWS = () => {
  30. sendPing()
  31. }
  32. /**连接失败重连 */
  33. const onerrorWS = () => {
  34. Socket.close()
  35. clearInterval(setIntervalWesocketPush)
  36. console.log('连接失败重连中')
  37. if (Socket.readyState !== 3) {
  38. Socket = null
  39. createSocket()
  40. }
  41. }
  42. /**WS数据接收统一处理 */
  43. const onmessageWS = e => {
  44. window.dispatchEvent(new CustomEvent('onmessageWS', {
  45. detail: {
  46. data: e.data
  47. }
  48. }))
  49. }
  50. /**
  51. * 发送数据但连接未建立时进行处理等待重发
  52. * @param {any} message 需要发送的数据
  53. */
  54. const connecting = message => {
  55. setTimeout(() => {
  56. if (Socket.readyState === 0) {
  57. connecting(message)
  58. } else {
  59. Socket.send(JSON.stringify(message))
  60. }
  61. }, 1000)
  62. }
  63. /**
  64. * 发送数据
  65. * @param {any} message 需要发送的数据
  66. */
  67. export const sendWSPush = message => {
  68. if (Socket !== null && Socket.readyState === 3) {
  69. Socket.close()
  70. createSocket()
  71. } else if (Socket.readyState === 1) {
  72. Socket.send(JSON.stringify(message))
  73. } else if (Socket.readyState === 0) {
  74. connecting(message)
  75. }
  76. }
  77. /**断开重连 */
  78. const oncloseWS = () => {
  79. clearInterval(setIntervalWesocketPush)
  80. console.log('websocket已断开....正在尝试重连')
  81. if (Socket.readyState !== 2) {
  82. Socket = null
  83. createSocket()
  84. }
  85. }
  86. /**发送心跳
  87. * @param {number} time 心跳间隔毫秒 默认5000
  88. * @param {string} ping 心跳名称 默认字符串ping
  89. */
  90. export const sendPing = (time = 5000, ping = 'ping') => {
  91. clearInterval(setIntervalWesocketPush)
  92. Socket.send(ping)
  93. setIntervalWesocketPush = setInterval(() => {
  94. Socket.send(ping)
  95. }, time)
  96. }