diff --git a/src/components/forms/render_websocket/renderSingleImage.js b/src/components/forms/render_websocket/renderSingleImage.js index 6cd894d..5499e73 100644 --- a/src/components/forms/render_websocket/renderSingleImage.js +++ b/src/components/forms/render_websocket/renderSingleImage.js @@ -4,7 +4,9 @@ import { useSelector, useDispatch } from 'react-redux' import { userAuthSelector } from '../../../redux/slices/userAuthSlice' import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice' import { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice' -import renderWebsocketAsyncThunk from '../../../redux/asyncThunks/renderWebsocketAsyncThunk' + +import { connect, saveMessage, disconnect } from '../../../redux/slices/renderWebsocketSlice' + import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk' import FormGenerator from '../formGenerator' @@ -137,16 +139,20 @@ const RenderSingleImageForm = () => { } if ( web_socket === null && address === '' && room_uuid === '') { - dispatch( renderWebsocketAsyncThunk.fetchConnect( 'image' ) ) + connect( + { + address: '/single/image/' + } + ) } - if ( address !== '' ) { - web_socket.onmessage = (event) => { - dispatch( - renderWebsocketAsyncThunk.fetchSaveMessage( - JSON.parse( event.data ) - ) - ) + if ( address !== '' && web_socket !== null ) { + web_socket.onmessage = (event) => { + saveMessage( + { + message: JSON.parse( event.data ) + } + ) } } diff --git a/src/redux/asyncThunks/abstracts/abstractAddress.js b/src/redux/asyncThunks/abstracts/abstractAddress.js index 164c1a8..2e6fffa 100644 --- a/src/redux/asyncThunks/abstracts/abstractAddress.js +++ b/src/redux/asyncThunks/abstracts/abstractAddress.js @@ -1 +1,3 @@ -export const GeneralAddress = 'http://localhost:9090' \ No newline at end of file +const API = 'localhost:9090' +export const GeneralAddress = 'http://' + API +export const GeneralAddressWS = 'ws://' + API \ No newline at end of file diff --git a/src/redux/slices/renderWebsocketSlice.js b/src/redux/slices/renderWebsocketSlice.js index eed01f0..ed8ebad 100644 --- a/src/redux/slices/renderWebsocketSlice.js +++ b/src/redux/slices/renderWebsocketSlice.js @@ -1,6 +1,19 @@ import { createSlice } from '@reduxjs/toolkit' import renderWebsocketAsyncThunk from '../asyncThunks/renderWebsocketAsyncThunk' +import GeneralAddressWS from '../asyncThunks/abstracts/abstractAddress' + +const __uuidv4 = () => { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace( + /[xy]/g, + (c) => { + var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); + return v.toString(16); + } + ) +} + + const renderWebsocketSlice = createSlice( { name: 'render/async', @@ -11,32 +24,34 @@ const renderWebsocketSlice = createSlice( messages: [], connected: false }, - reducers: {}, - extraReducers: { - [renderWebsocketAsyncThunk.fetchConnect.fulfilled.type]: (state, action) => { - state.web_socket = action.web_socket - state.address = action.address - state.room_uuid = action.room_uuid + reducers: { + connect(state, action) { + state.room_uuid = __uuidv4() + state.address = GeneralAddressWS + action.payload.address + state.web_socket = new WebSocket( state.address + state.room_uuid ) state.messages = [] state.connected = true }, - [renderWebsocketAsyncThunk.fetchSaveMessage.fulfilled.type]: (state, action) => { + saveMessage(state, action) { state.messages = [ ...state.messages, - action.message + action.payload.message ] }, - [renderWebsocketAsyncThunk.fetchDisconnect.fulfilled.type]: (state, action) => { - state.web_socket = action.web_socket + disconnect(state) { + state.web_socket = null state.address = '' state.room_uuid = '' state.messages = [] state.connected = false } - } + }, + extraReducers: {} } ) export const renderWebsocketReducer = renderWebsocketSlice.reducer +export const { connect, saveMessage, disconnect } = renderWebsocketSlice.actions + export const renderWebsocketSelector = state => state.renderWebsocketReducer \ No newline at end of file