websocketStore.js 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. Vue.use(Vuex)
  4. const store = new Vuex.Store({
  5. state: {
  6. socketTask: null,
  7. websocketData: {}, // 存放从后端接收到的websocket数据
  8. },
  9. mutations: {
  10. setWebsocketData(state, data) {
  11. state.websocketData = data
  12. }
  13. },
  14. actions: {
  15. websocketInit({
  16. state,
  17. dispatch
  18. }, url) {
  19. state.socketTask = uni.connectSocket({
  20. url, // url是websocket连接ip
  21. success: () => {
  22. console.log('WebSocket连接成功!')
  23. },
  24. fail: e => {
  25. console.log('连接失败' + e)
  26. }
  27. })
  28. state.socketTask.onOpen(() => dispatch('websocketOnOpen'))
  29. state.socketTask.onMessage(res => dispatch('websocketOnMessage', res))
  30. state.socketTask.onClose(e => dispatch('websocketOnClose'))
  31. state.socketTask.onError(e => dispatch('websocketOnError'))
  32. },
  33. websocketOnOpen({
  34. commit
  35. }) {
  36. console.log('WebSocket连接正常打开中...!')
  37. },
  38. // 收到数据
  39. websocketOnMessage({
  40. commit
  41. }, res) {
  42. let data;
  43. try {
  44. data = JSON.parse(res.data)
  45. } catch {
  46. data = {
  47. content: res.data
  48. }
  49. }
  50. commit('setWebsocketData', data);
  51. },
  52. websocketOnClose({
  53. commit,
  54. dispatch
  55. }) {
  56. console.log('WebSocket连接关闭')
  57. },
  58. websocketOnError({
  59. commit,
  60. dispatch
  61. }) {
  62. console.log('WebSocket连接错误')
  63. },
  64. websocketClose({
  65. state
  66. }) {
  67. if (!state.socketTask) return
  68. state.socketTast.close({
  69. success(res) {
  70. console.log('关闭成功', res)
  71. },
  72. fail(err) {
  73. console.log('关闭失败', err)
  74. }
  75. })
  76. },
  77. // 发送数据
  78. websocketSend({
  79. state
  80. }, data) {
  81. uni.sendSocketMessage({
  82. data,
  83. success: res => {
  84. console.log('发送成功', res)
  85. },
  86. fail: e => {
  87. console.log('发送失败', e)
  88. }
  89. })
  90. }
  91. }
  92. })
  93. export default store