Merge pull request #14 from oslabs-beta/paul-anthony/http1-sse

Paul anthony/http1 sse

Author: prheee

main.js

@@ -138,7 +138,7 @@ function createWindow() {
     webPreferences: {
       "nodeIntegration": true,
       "sandbox": false,
-      webSecurity: false,
+      webSecurity: true,
     },
     icon: `${__dirname}/src/assets/icons/64x64.png`
   })
@@ -285,22 +285,26 @@ ipcMain.on('http1-fetch-message', (event, arg) => {
     .then((response) => {
       const headers = response.headers.raw();
       // check if the endpoint sends SSE
-      if (headers['content-type'][0].includes('stream')) {
-        event.sender.send('http1-fetch-reply', { headers, body: { error: 'This Is An SSE endpoint' } })
-      } else {
         // add status code for regular http requests in the response header
-        headers[':status'] = response.status;
-
-        const receivedCookie = headers['set-cookie'];
-        headers.cookies = receivedCookie;
-
-        const contents = /json/.test(response.headers.get('content-type')) ? response.json() : response.text();
-        contents
-          .then(body => {
-            event.sender.send('http1-fetch-reply', { headers, body })
-          })
-          .catch(error => console.log('ERROR', error))
-      }
+        
+        if (headers['content-type'][0].includes('stream')) {
+          // invoke another func that fetches to SSE and reads stream
+          // params: method, headers, body
+          event.sender.send('http1-fetch-reply', { headers, body: { error: 'This Is An SSE endpoint' } })
+         }
+        else {
+          headers[':status'] = response.status;
+  
+          const receivedCookie = headers['set-cookie'];
+          headers.cookies = receivedCookie;
+  
+          const contents = /json/.test(response.headers.get('content-type')) ? response.json() : response.text();
+          contents
+            .then(body => {
+              event.sender.send('http1-fetch-reply', { headers, body })
+            })
+            .catch(error => console.log('ERROR', error))
+        }
     })
     .catch(error => console.log(error))
 })

src/client/actions/actionTypes.js

@@ -18,6 +18,7 @@ export const SET_NEW_REQUEST_FIELDS = "SET_NEW_REQUEST_FIELDS";
 export const SET_NEW_REQUEST_HEADERS = "SET_NEW_REQUEST_HEADERS";
 export const SET_NEW_REQUEST_BODY = "SET_NEW_REQUEST_BODY";
 export const SET_NEW_REQUEST_COOKIES = "SET_NEW_REQUEST_COOKIES";
+export const SET_NEW_REQUEST_SSE = "SET_NEW_REQUEST_SSE";
 
 export const SET_CURRENT_TAB = "SET_CURRENT_TAB";
 

src/client/actions/actions.js

@@ -76,6 +76,11 @@ export const setNewRequestCookies = (cookies) => ({
   payload : cookies
 });
 
+export const setNewRequestSSE = (SSEBool) => ({
+  type: types.SET_NEW_REQUEST_SSE,
+  payload : SSEBool
+});
+
 export const setCurrentTab = (tab) => ({
   type: types.SET_CURRENT_TAB,
   payload: tab,

src/client/components/composer/ComposerContainer.jsx

@@ -12,8 +12,9 @@ const mapStateToProps = store => ({
   newRequestHeaders: store.business.newRequestHeaders,
   newRequestBody: store.business.newRequestBody,
   newRequestCookies: store.business.newRequestCookies,
+  newRequestSSE: store.business.newRequestSSE,
   currentTab: store.business.currentTab,
-  warningMessage: store.business.warningMessage,
+  warningMessage: store.business.warningMessage
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -24,6 +25,7 @@ const mapDispatchToProps = dispatch => ({
   setNewRequestFields: (requestFields) => { dispatch(actions.setNewRequestFields(requestFields)) },
   setNewRequestBody: (requestBodyObj) => { dispatch(actions.setNewRequestBody(requestBodyObj)) },
   setNewRequestCookies: (requestCookiesObj) => { dispatch(actions.setNewRequestCookies(requestCookiesObj)) },
+  setNewRequestSSE: (requestSSEBool) => { dispatch(actions.setNewRequestSSE(requestSSEBool)) }
 });
 
 class ComposerContainer extends Component {
@@ -56,6 +58,7 @@ class ComposerContainer extends Component {
           newRequestHeaders={this.props.newRequestHeaders}
           newRequestCookies={this.props.newRequestCookies}
           newRequestBody={this.props.newRequestBody}
+          newRequestSSE={this.props.newRequestSSE}
           currentTab={this.props.currentTab}
 
           reqResAdd={this.props.reqResAdd}
@@ -67,6 +70,7 @@ class ComposerContainer extends Component {
           setNewRequestHeaders={this.props.setNewRequestHeaders}
           setNewRequestCookies={this.props.setNewRequestCookies}
           setNewRequestBody={this.props.setNewRequestBody}
+          setNewRequestSSE={this.props.setNewRequestSSE}
         />;
         break;
       }

src/client/components/composer/NewRequest/ComposerNewRequest.jsx

@@ -6,11 +6,20 @@ import GraphQLBodyEntryForm from "./GraphQLBodyEntryForm.jsx";
 import FieldEntryForm from "./FieldEntryForm.jsx";
 import CookieEntryForm from './CookieEntryForm.jsx';
 import historyController from '../../../controllers/historyController'
+import { CLIENT_RENEG_LIMIT } from 'tls';
+
 
 class ComposerNewRequest extends Component {
   constructor(props) {
     super(props);
+    
     this.addNewRequest = this.addNewRequest.bind(this);
+    this.handleSSEPayload = this.handleSSEPayload.bind(this);
+  }
+
+  componentDidMount(){
+    console.log('this.props.newRequestSSE.isSSE: ', this.props.newRequestSSE.isSSE);
+
   }
 
   requestValidationCheck() {
@@ -35,6 +44,10 @@ class ComposerNewRequest extends Component {
     return validationMessage || true;
   }
 
+  handleSSEPayload(e){
+    this.props.setNewRequestSSE(e.target.checked);
+  }
+
   addNewRequest() {
     const validated = this.requestValidationCheck();
 
@@ -61,6 +74,8 @@ class ComposerNewRequest extends Component {
         let historyBodyVariables;
         if (document.querySelector('#gqlVariableEntryTextArea')) { historyBodyVariables = document.querySelector('#gqlVariableEntryTextArea').value } //grabs the input value in case tab was last key pressed
         else historyBodyVariables = '';
+        // console.log('in add new request, this.props.newRequestSSE: ', this.props.newRequestSSE)
+
         reqRes = {
 
           id: uuid(),
@@ -83,7 +98,8 @@ class ComposerNewRequest extends Component {
             body: historyBodyContent,
             bodyType: this.props.newRequestBody.bodyType,
             bodyVariables: historyBodyVariables,
-            rawType: this.props.newRequestBody.rawType
+            rawType: this.props.newRequestBody.rawType,
+            isSSE: this.props.newRequestSSE.isSSE,
           },
           response: {
             headers: null,
@@ -199,7 +215,8 @@ class ComposerNewRequest extends Component {
         protocol: '',
         url: '',
         graphQL: false
-      })
+      });
+      this.props.setNewRequestSSE(false);
     }
     else {
       this.props.setComposerWarningMessage(validated);
@@ -269,6 +286,14 @@ class ComposerNewRequest extends Component {
           />
         }
 
+        {/* SSE CHeckbox, update newRequestSSE in store */}
+        {
+          !this.props.newRequestFields.graphQL
+          && !/wss?:\/\//.test(this.props.newRequestFields.protocol)
+          && 
+          <div>Server Sent Event: <input type="checkbox" onChange={this.handleSSEPayload} checked={this.props.newRequestSSE.isSSE}/></div>
+        }
+
         <button className={SubmitButtonClassName} onClick={this.addNewRequest} type="button">
           Add New Request
         </button>

src/client/components/composer/NewRequest/HeaderEntryForm.jsx

@@ -160,8 +160,8 @@ class HeaderEntryForm extends Component {
       />
     ));
 
-    const arrowClass = this.state.show ? 'composer_subtitle_arrow-open' : 'composer_subtitle_arrow-closed';
-    const headersContainerClass = this.state.show ? 'composer_headers_container-open' : 'composer_headers_container-closed'
+    const arrowClass = this.state.show ? 'composer_subtitle_arrow-closed' : 'composer_subtitle_arrow-open';
+    const headersContainerClass = this.state.show ? 'composer_headers_container-closed' : 'composer_headers_container-open'
 
     return <div style={this.props.stylesObj}>
       <div

src/client/controllers/httpController.js

@@ -34,6 +34,7 @@ const httpController = {
     /*
      * TRY TO CONNECT AS HTTP2 FIRST IF HTTPS. If error, fallback to HTTP1.1 (WebAPI fetch)
      */
+    console.log('Inside openHTTPconnection in controller, reqResObj.request: ', reqResObj);
     if (reqResObj.protocol === 'https://' || reqResObj.protocol === 'http://') {
       console.log('HTTPS, TRYING HTTP2');
       httpController.establishHTTP2Connection(reqResObj, connectionArray);
@@ -281,50 +282,34 @@ const httpController = {
     //--------------------------------------------------------------------------------------------------------------
     // Check if the URL provided is a stream
     //--------------------------------------------------------------------------------------------------------------
-
+    
+    // if isSSE is true, then node-fetch to stream,
+    if (reqResObj.request.isSSE) {
+      // invoke another func that fetches to SSE and reads stream
+      // params: method, headers, body
+      const { method, headers, body } = options;
+
+      fetch2(headers.url, { method, headers, body })
+        .then(response => {
+          const heads = {};
+          for (const entry of response.headers.entries()) {
+            heads[entry[0].toLowerCase()] = entry[1];
+          }
+          reqResObj.response.headers = heads;
+          this.handleSSE(response, reqResObj, heads);
+        })
+    }
+    // if not SSE, talk to main to fetch data and receive
+    else {
     // send information to the NODE side to do the fetch request
     this.sendToMainForFetch({ options })
       .then((response) => {
-        console.log('response from main fetch', response.headers);
+        console.log('Response from main fetch:', response.headers);
 
         // Parse response headers now to decide if SSE or not.
         const heads = response.headers;
-
         reqResObj.response.headers = heads;
 
-        // store extracted headers in heads object
-        // check if the content-type header contains the word stream
-        let isStream = false;
-
-        if (heads['content-type'] && heads['content-type'].includes('stream')) isStream = true;
-
-        if (isStream) { // if url is sse... //! <REVISIT>
-          const http1Sesh = session.defaultSession;
-          let domain = reqResObj.host.split('//');
-          domain.shift();
-          [domain] = domain.join('').split('.').splice(-2).join('.')
-            .split(':');
-
-          http1Sesh.cookies.get({ domain }, (err, cookies) => {
-            if (cookies) {
-              reqResObj.response.cookies = cookies;
-              store.default.dispatch(actions.reqResUpdate(reqResObj));
-              cookies.forEach((cook) => {
-                let url = '';
-                url += cook.secure ? 'https://' : 'http://';
-                url += cook.domain.charAt(0) === '.' ? 'www' : '';
-                url += cook.domain;
-                url += cook.path;
-
-                http1Sesh.cookies.remove(url, cook.name, x => console.log(x));
-              });
-            }
-            this.handleSSE(response, reqResObj, heads);
-          });
-        }
-
-        else { // if url is not not sse ...
-
           reqResObj.timeSent = Date.now();
           store.default.dispatch(actions.reqResUpdate(reqResObj));
 
@@ -339,12 +324,12 @@ const httpController = {
             store.default.dispatch(actions.reqResUpdate(reqResObj));
             this.handleSingleEvent(body, reqResObj, theResponseHeaders);
           }
-        }
       })
       .catch((err) => {
         reqResObj.connection = 'error';
         store.default.dispatch(actions.reqResUpdate(reqResObj));
       });
+    }
   },
 
   // ----------------------------------------------------------------------------
@@ -402,7 +387,6 @@ const httpController = {
   /* handle SSE Streams for HTTP1.1 */
   handleSSE(response, originalObj, headers) {
     const reader = response.body.getReader();
-
     let data = '';
     read();
 

src/client/reducers/business.js

@@ -29,6 +29,9 @@ const initialState = {
     rawType: 'Text (text/plain)',
     JSONFormatted: true,
   },
+  newRequestSSE: {
+    isSSE: false
+  }
 };
 
 const businessReducer = (state = initialState, action) => {
@@ -201,6 +204,14 @@ const businessReducer = (state = initialState, action) => {
       };
     }
 
+    case types.SET_NEW_REQUEST_SSE: {
+      console.log('action.payload',action.payload)
+      return {
+        ...state,
+        newRequestSSE: {isSSE: action.payload},
+      };
+    }
+
     case types.SET_CURRENT_TAB: {
       return {
         ...state,