From f0cdf5823bc5c709d8b925e726cff962dc7fe43a Mon Sep 17 00:00:00 2001 From: TBS093A Date: Fri, 19 Feb 2021 02:54:34 +0100 Subject: [PATCH] React -> upgrade websocket & fix redux (delete websocket from redux because its crashed as shit) --- .../render_websocket/renderSingleImage.js | 109 +++++++++++++----- .../asyncThunks/abstracts/abstractAddress.js | 4 +- src/redux/slices/renderWebsocketSlice.js | 22 ++-- 3 files changed, 97 insertions(+), 38 deletions(-) diff --git a/src/components/forms/render_websocket/renderSingleImage.js b/src/components/forms/render_websocket/renderSingleImage.js index 5499e73..9e21844 100644 --- a/src/components/forms/render_websocket/renderSingleImage.js +++ b/src/components/forms/render_websocket/renderSingleImage.js @@ -1,10 +1,10 @@ -import React, { useState, useEffect } from 'react' +import React, { useState, useEffect, useCallback } from 'react' 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 { renderWebsocketSelector } from '../../../redux/slices/renderWebsocketSlice' import { connect, saveMessage, disconnect } from '../../../redux/slices/renderWebsocketSlice' import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk' @@ -14,7 +14,10 @@ import FormGenerator from '../formGenerator' const RenderSingleImageForm = () => { + let web_socket = null + const dispatch = useDispatch() + const stableDispatch = useCallback(dispatch, []) const choiceListing = React.createRef() const setIdRange = React.createRef() @@ -24,7 +27,7 @@ const RenderSingleImageForm = () => { const resolutionYRange = React.createRef() const { - web_socket, + web_socket_address, address, room_uuid, messages, @@ -104,13 +107,34 @@ const RenderSingleImageForm = () => { }, ] + const handleConnect = ( event ) => { + + event.preventDefault() + + if ( web_socket === null && address === '' && room_uuid === '') { + stableDispatch( + connect( + { + address: '/single/image/' + } + ) + ) + if (web_socket_address !== '') { + web_socket = new WebSocket( web_socket_address ) + } + } + + console.log('connect') + + } + const handleSendMessage = ( refs ) => { let rotate_conv = refs[2].current.value / 62 // on backend 0.1 - 6.2 value let body = { // fileName: refs[0].current.value, - fileName: 'testHand.blend', + fileName: 'testHand', setID: refs[1].current.value, rotate: rotate_conv, nameSeries: 0, // index render picture in set (useless on the front & disable) @@ -119,11 +143,51 @@ const RenderSingleImageForm = () => { resolutionY: refs[5].current.value } console.log( body ) - web_socket.send( - JSON.stringify( - body + try { + web_socket.send( + JSON.stringify( + body + ) ) - ) + } catch (error) { + web_socket.close() + stableDispatch( + disconnect() + ) + console.log(error) + } + } + + const handleDisconnect = ( event ) => { + + event.preventDefault() + + if ( address !== '' && room_uuid !== '') { + try { + web_socket.close() + stableDispatch( + disconnect() + ) + } catch (error) { + console.log(error) + } + } + + console.log('disconnect') + + } + + if ( connected === true && address !== '' && web_socket !== null ) { + web_socket.onmessage = (event) => { + console.log( event.data ) + // stableDispatch( + // saveMessage( + // { + // message: JSON.parse( event.data ) + // } + // ) + // ) + } } let blocker = false @@ -137,24 +201,6 @@ const RenderSingleImageForm = () => { blocker = true } } - - if ( web_socket === null && address === '' && room_uuid === '') { - connect( - { - address: '/single/image/' - } - ) - } - - if ( address !== '' && web_socket !== null ) { - web_socket.onmessage = (event) => { - saveMessage( - { - message: JSON.parse( event.data ) - } - ) - } - } } ) @@ -166,6 +212,17 @@ const RenderSingleImageForm = () => { refList={ refList } action={ handleSendMessage } /> + { + connected + ? + + : + + } { messages.map( (item) => { return ( diff --git a/src/redux/asyncThunks/abstracts/abstractAddress.js b/src/redux/asyncThunks/abstracts/abstractAddress.js index 2e6fffa..0bd6cb8 100644 --- a/src/redux/asyncThunks/abstracts/abstractAddress.js +++ b/src/redux/asyncThunks/abstracts/abstractAddress.js @@ -1,3 +1,3 @@ -const API = 'localhost:9090' +let API = 'localhost:9090' export const GeneralAddress = 'http://' + API -export const GeneralAddressWS = 'ws://' + API \ No newline at end of file +export const GeneralAddressWS = 'ws://' + API + '/render' \ No newline at end of file diff --git a/src/redux/slices/renderWebsocketSlice.js b/src/redux/slices/renderWebsocketSlice.js index ed8ebad..093a2ff 100644 --- a/src/redux/slices/renderWebsocketSlice.js +++ b/src/redux/slices/renderWebsocketSlice.js @@ -1,7 +1,8 @@ import { createSlice } from '@reduxjs/toolkit' import renderWebsocketAsyncThunk from '../asyncThunks/renderWebsocketAsyncThunk' -import GeneralAddressWS from '../asyncThunks/abstracts/abstractAddress' +import { GeneralAddressWS } from '../asyncThunks/abstracts/abstractAddress' + const __uuidv4 = () => { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace( @@ -13,22 +14,23 @@ const __uuidv4 = () => { ) } +const initialState = { + web_socket_address: '', + address: '', + room_uuid: '', + messages: [], + connected: false +} const renderWebsocketSlice = createSlice( { name: 'render/async', - initialState: { - web_socket: null, - address: '', - room_uuid: '', - messages: [], - connected: false - }, + initialState, 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.web_socket_address = state.address + state.room_uuid state.messages = [] state.connected = true }, @@ -39,7 +41,7 @@ const renderWebsocketSlice = createSlice( ] }, disconnect(state) { - state.web_socket = null + state.web_socket_address = '' state.address = '' state.room_uuid = '' state.messages = []