Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Web sockets #29

Merged
merged 11 commits into from
Apr 6, 2023
Merged

Web sockets #29

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e8437ab
Merge branch 'dev' of https://github.com/oslabs-beta/CloudShift into dev
mjhuff Apr 5, 2023
02556ff
Added basic websocket functionality
mjhuff Apr 6, 2023
65183d7
Added relevant client state for sockets
mjhuff Apr 6, 2023
9a4810c
Basic websocket logic finished for progress bar
mjhuff Apr 6, 2023
09bb508
Merge branch 'dev' of https://github.com/oslabs-beta/CloudShift into dev
mjhuff Apr 6, 2023
29a106d
Solved merge conflicts
mjhuff Apr 6, 2023
dd8522d
Working progress bar
mjhuff Apr 6, 2023
eac2dc0
Merge branch 'dev' of https://github.com/oslabs-beta/CloudShift into dev
mjhuff Apr 6, 2023
fe16ff9
solved merge conflicts
mjhuff Apr 6, 2023
160e75a
Reverted migrating state back to false
mjhuff Apr 6, 2023
30c4b75
Minor CSS changes
mjhuff Apr 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Added basic websocket functionality
  • Loading branch information
@mjhuff
mjhuff committed Apr 6, 2023
commit 02556ffb17af435c33583931446d7db8001ceb78
35 changes: 31 additions & 4 deletions client/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,47 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RemoteContainer } from './components/RemoteContainer';
import MigrationButton from './components/MigrationButton';
import Overlay from './components/Overlay';
import { socket } from './socket';
//import styles if necessary
//may need to import functions from slices here

const App = (props) => {
const { isMigrating, origin, destination } = useSelector(
(state) => state.GUI
);
return (
<>

const [isConnected, setIsConnected] = useState(socket.connected);
const [fooEvents, setFooEvents] = useState([]);

//Basic client socket.io connection.
useEffect(() => {
function onConnect() {
setIsConnected(true);
}

function onDisconnect() {
setIsConnected(false);
}

function onFooEvent(value) {
setFooEvents((previous) => [...previous, value]);
}

socket.on('connect', onConnect);
socket.on('disconnect', onDisconnect);
socket.on('foo', onFooEvent);

return () => {
socket.off('connect', onConnect);
socket.off('disconnect', onDisconnect);
socket.off('foo', onFooEvent);
};
}, []);

return (
<>
<div className="nav flex items-center justify-between mr-36 ml-20 p-6 text-xl ">
<div>CloudShift</div>
<div>
Expand All @@ -25,7 +53,6 @@ const App = (props) => {
<MigrationButton></MigrationButton>
)}
{isMigrating && <Overlay></Overlay>}

</>
);
};
Expand Down
24 changes: 12 additions & 12 deletions client/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cloud Shift</title>
<link rel="stylesheet" href="output.css" />
<!-- not sure about stylesheet include with tailwind <link rel="stylesheet" href="style.scss" /> -->
</head>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cloud Shift</title>
<link rel="stylesheet" href="output.css" />
<!-- not sure about stylesheet include with tailwind <link rel="stylesheet" href="style.scss" /> -->
</head>

<body class="bg-gradient-to-br from-emerald-100 to-purple-300 bg-no-repeat h-full w-full">
<body class="">


<div id="root"></div>
<div id="portal"></div>
</body>
<div id="root"></div>
<div id="portal"></div>
</body>

</html>
3 changes: 3 additions & 0 deletions client/socket.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { io } from 'socket.io-client';

export const socket = io('http:https://localhost:3000');
Loading