React -> upgrade websockets

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 !== '' ) {
+            if ( address !== '' && web_socket !== null ) {
-                web_socket.onmessage = (event) => {
+                web_socket.onmessage = (event) => { 
-                    dispatch( 
+                    saveMessage( 
-                        renderWebsocketAsyncThunk.fetchSaveMessage(
+                        {
-                            JSON.parse( event.data )
+                            message: JSON.parse( event.data ) 
-                        ) 
+                        }
-                    )
+                    ) 
                 }
             }
         

src/redux/asyncThunks/abstracts/abstractAddress.js

@@ -1 +1,3 @@
-export const GeneralAddress = 'http://localhost:9090'
+const API = 'localhost:9090'
+export const GeneralAddress = 'http://' + API
+export const GeneralAddressWS = 'ws://' + API

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: {},
+        reducers: {
-        extraReducers: {
+            connect(state, action) {
-            [renderWebsocketAsyncThunk.fetchConnect.fulfilled.type]: (state, action) => {
+                state.room_uuid = __uuidv4()
-                state.web_socket = action.web_socket
+                state.address = GeneralAddressWS + action.payload.address 
-                state.address = action.address
+                state.web_socket = new WebSocket( state.address + state.room_uuid )
-                state.room_uuid = action.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) => {
+            disconnect(state) {
-                state.web_socket = action.web_socket
+                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