socketReducer.js 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import {createSlice } from '@reduxjs/toolkit';
  2. import {io} from 'socket.io-client';
  3. import { store } from '../store';
  4. import { removeToken } from './userDataReducer';
  5. const initialState = {
  6. socketStatus: 'idle',
  7. socket: null,
  8. socketUserData: {},
  9. usersOnline: [],
  10. startMessages: [],
  11. allUsers: []
  12. }
  13. const SOCKET_URL = process.env.REACT_APP_SERVER_URL || 'http://localhost:5000';
  14. const connectToSocket = (event) => {
  15. try {
  16. const token = localStorage.getItem('token');
  17. if(token){
  18. const socket = io.connect(
  19. SOCKET_URL,
  20. {auth: {token}})
  21. socket.on('connected', data => {
  22. store.dispatch(getUser(data));
  23. })
  24. .on(event, (data) => {
  25. switch (event){
  26. case 'allmessages':
  27. store.dispatch(getAllMessages(data));
  28. break;
  29. case 'usersOnline':
  30. console.log(data)
  31. store.dispatch(getUsersOnline(data));
  32. break;
  33. case 'allDbUsers':
  34. store.dispatch(getAllUsers(data));
  35. break;
  36. }
  37. })
  38. .on('newmessage', (data) => {
  39. store.dispatch(addNewMessage(data))
  40. })
  41. .on('disconnect', (data) => {
  42. if(data === 'io server disconnect') {
  43. socket.disconnect();
  44. store.dispatch(removeToken());
  45. }
  46. })
  47. .on('error', e => {console.log('On connected', e)});
  48. return socket;
  49. }
  50. } catch (error) {
  51. console.log('error connecting to socket ', error)
  52. }
  53. };
  54. export const getUserSocketSlice = createSlice({
  55. name: 'userSocket',
  56. initialState,
  57. reducers: {
  58. removeSocket: state => {
  59. state.socket = null
  60. state.socketStatus = 'disconnected'},
  61. getSocket: (state, action) => {
  62. state.socket = connectToSocket(action.payload);
  63. state.socketStatus = 'connected';
  64. },
  65. getUser: (state, action) => {state.socketUserData = action.payload},
  66. getAllMessages: (state, action) => {state.startMessages = action.payload},
  67. getUsersOnline: (state, action) => {state.usersOnline = action.payload},
  68. getAllUsers: (state, action) => {state.allUsers = action.payload},
  69. addNewMessage: (state, action) => {state.startMessages.push(action.payload)}
  70. }
  71. }
  72. );
  73. const {actions, reducer} = getUserSocketSlice;
  74. const getUserSocketReducer = reducer;
  75. export default getUserSocketReducer;
  76. export const {
  77. removeSocket,
  78. getSocket,
  79. getUser,
  80. getAllMessages,
  81. getUsersOnline,
  82. addNewMessage,
  83. getAllUsers
  84. } = actions;