tbs093a
/
render.app.frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

React -> upgrade websocket & fix redux (delete websocket from redux because its crashed as shit)

feature/2_forms
TBS093A 2021-02-19 02:54:34 +01:00
parent 0c14883489
commit 89f047a39a
3 changed files with 97 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/forms/render_websocket/renderSingleImage.js
View File

@ -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
?
<button onClick={ (event) => handleDisconnect(event) }>
Disconnect
</button>
:
<button onClick={ (event) => handleConnect(event) }>
Connect
</button>
}
{
messages.map( (item) => {
return (

4
src/redux/asyncThunks/abstracts/abstractAddress.js
View File

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

22
src/redux/slices/renderWebsocketSlice.js
View File

@ -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 = []