console: Use the events WebSocket API

CHANGELOG.md

@@ -13,6 +13,8 @@ For details about compatibility between different releases, see the **Commitment
 
 ### Changed
 
+- Server side events replaced with single socket connection using the native WebSocket API.
+
 ### Deprecated
 
 ### Removed

config/webpack.config.babel.js

@@ -175,6 +175,7 @@ export default {
         target: WEBPACK_DEV_SERVER_USE_TLS ? 'https://localhost:8885' : 'http://localhost:1885',
         changeOrigin: true,
         secure: false,
+        ws: true,
       },
     ],
     historyApiFallback: true,

pkg/webui/console/store/middleware/logics/events.js

@@ -133,14 +133,14 @@ const createEventsConnectLogics = (reducerName, entityName, onEventsStart) => {
         try {
           channel = await onEventsStart([id], filterRegExp, EVENT_TAIL, after)
 
-          channel.on('start', () => dispatch(startEventsSuccess(id, { silent })))
-          channel.on('chunk', message => dispatch(getEventSuccess(id, message)))
+          channel.on('open', () => dispatch(startEventsSuccess(id, { silent })))
+          channel.on('message', message => dispatch(getEventSuccess(id, message)))
           channel.on('error', error => dispatch(getEventFailure(id, error)))
           channel.on('close', wasClientRequest =>
             dispatch(closeEvents(id, { silent: wasClientRequest })),
           )
 
-          channel.open()
+          channel.on('open', () => dispatch(startEventsSuccess(id, { silent })))
         } catch (error) {
           if (isUnauthenticatedError(error)) {
             // The user is no longer authenticated; reinitiate the auth flow

sdk/js/src/api/http.js

@@ -24,8 +24,6 @@ import {
   RATE_LIMIT_RETRIES,
 } from '../util/constants'
 
-import stream from './stream/stream-node'
-
 /**
  * Http Class is a connector for the API that uses the HTTP bridge to connect.
  */
@@ -87,7 +85,7 @@ class Http {
     }
   }
 
-  async handleRequest(method, endpoint, component, payload = {}, isStream) {
+  async handleRequest(method, endpoint, component, payload = {}) {
     const parsedComponent = component || this._parseStackComponent(endpoint)
     if (!this._stackConfig.isComponentAvailable(parsedComponent)) {
       // If the component has not been defined in The Things Stack config, make no
@@ -98,11 +96,6 @@ class Http {
     }
 
     try {
-      if (isStream) {
-        const url = this._stackConfig.getComponentUrlByName(parsedComponent) + endpoint
-        return stream(payload, url)
-      }
-
       const config = {
         method,
         url: endpoint,

sdk/js/src/api/index.js

@@ -62,13 +62,12 @@ Signature tried: ${paramSignature}`)
           }
 
           let route = endpoint.pattern
-          const isStream = Boolean(endpoint.stream)
 
           for (const parameter of endpoint.parameters) {
             route = route.replace(`{${parameter}}`, routeParams[parameter])
           }
 
-          return connector.handleRequest(endpoint.method, route, component, payload, isStream)
+          return connector.handleRequest(endpoint.method, route, component, payload)
         }
 
         this[serviceName][`${rpcName}AllowedFieldMaskPaths`] = rpc.allowedFieldMaskPaths

sdk/js/src/api/index.test.js

@@ -92,7 +92,6 @@ describe('API class', () => {
       '/users/test/applications',
       undefined,
       { name: 'test-name' },
-      false,
     )
   })
 
@@ -106,25 +105,9 @@ describe('API class', () => {
     api.ApplicationRegistry.List(undefined, { limit: 2, page: 1 })
 
     expect(api._connector.handleRequest).toHaveBeenCalledTimes(1)
-    expect(api._connector.handleRequest).toHaveBeenCalledWith(
-      'get',
-      '/applications',
-      undefined,
-      { limit: 2, page: 1 },
-      false,
-    )
-  })
-
-  it('sets stream value to true for streaming endpoints', () => {
-    api.ApplicationRegistry.Events()
-
-    expect(api._connector.handleRequest).toHaveBeenCalledTimes(1)
-    expect(api._connector.handleRequest).toHaveBeenCalledWith(
-      'get',
-      '/events',
-      undefined,
-      undefined,
-      true,
-    )
+    expect(api._connector.handleRequest).toHaveBeenCalledWith('get', '/applications', undefined, {
+      limit: 2,
+      page: 1,
+    })
   })
 })

sdk/js/src/api/stream/shared.js

@@ -19,8 +19,15 @@ export const notify = (listener, ...args) => {
 }
 
 export const EVENTS = Object.freeze({
-  START: 'start',
-  CHUNK: 'chunk',
+  OPEN: 'open',
+  MESSAGE: 'message',
   ERROR: 'error',
   CLOSE: 'close',
 })
+
+export const MESSAGE_TYPES = Object.freeze({
+  SUBSCRIBE: 'subscribe',
+  UNSUBSCRIBE: 'unsubscribe',
+  PUBLISH: 'publish',
+  ERROR: 'error',
+})