chore: replace hardcode sendEchoMessage method in js websocket client (#1557)

Co-authored-by: Adi-204 <adiboghawala@gmail.com>
Co-authored-by: Chan <bot+chan@asyncapi.io>

Author: Adi-204

packages/helpers/test/__fixtures__/asyncapi-websocket-query.yml

@@ -81,7 +81,7 @@ channels:
 
 operations:
   noMessage:
-    action: receive
+    action: send
     channel:
       $ref: '#/channels/marketDataV1'
     summary: Operation with no messages
@@ -112,7 +112,7 @@ operations:
       - $ref: '#/channels/marketDataV1/messages/multipleExamples'
 
   mixedMessageExamples:
-    action: receive
+    action: send
     channel:
       $ref: '#/channels/marketDataV1'
     summary: Mixed message example coverage
@@ -130,4 +130,4 @@ components:
       enum:
         - btcusd
         - ethbtc
-        - ethusd
+        - ethusd

packages/templates/clients/websocket/javascript/components/ClientClass.js

@@ -4,11 +4,11 @@ import { Connect } from './Connect';
 import { RegisterMessageHandler } from './RegisterMessageHandler';
 import { RegisterErrorHandler } from './RegisterErrorHandler';
 import { HandleMessage } from './HandleMessage';
-import { SendEchoMessage } from './SendEchoMessage';
+import { SendOperation } from './SendOperation';
 import { CloseConnection } from './CloseConnection';
 import { ModuleExport } from './ModuleExport';
 
-export function ClientClass({ clientName, serverUrl, title }) {
+export function ClientClass({ clientName, serverUrl, title, sendOperations}) {
   return (
     <Text>
       <Text newLines={2}>
@@ -19,7 +19,7 @@ export function ClientClass({ clientName, serverUrl, title }) {
       <RegisterMessageHandler />
       <RegisterErrorHandler />
       <HandleMessage />
-      <SendEchoMessage />
+      <SendOperation sendOperations={sendOperations} clientName={clientName} />
       <CloseConnection />
       <Text>
         {'}'}

packages/templates/clients/websocket/javascript/components/SendEchoMessage.js

@@ -0,0 +1,44 @@
+import { Text } from '@asyncapi/generator-react-sdk';
+
+export function SendOperation({ sendOperations, clientName }) {
+  if (!sendOperations || sendOperations.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {sendOperations.map((operation) => (
+        <Text newLines={2} indent={2}>
+          {`
+/**
+ * Sends a ${operation.id()} message over the WebSocket connection.
+ * 
+ * @param {Object} message - The message payload to send. Should match the schema defined in the AsyncAPI document.
+ * @param {WebSocket} [socket] - The WebSocket connection to use. If not provided, the client's own connection will be used.
+ * @throws {TypeError} If message cannot be stringified to JSON
+ * @throws {Error} If WebSocket connection is not in OPEN state
+ */
+static ${operation.id()}(message, socket) {
+  try {
+    socket.send(JSON.stringify(message));
+  } catch (error) {
+    console.error('Error sending ${operation.id()} message:', error);
+  }
+}
+/**
+ * Instance method version of ${operation.id()} that uses the client's own WebSocket connection.
+ * @param {Object} message - The message payload to send
+ * @throws {Error} If WebSocket connection is not established
+ */
+${operation.id()}(message){
+  if(!this.websocket){
+    throw new Error('WebSocket connection not established. Call connect() first.');
+  }
+  ${clientName}.${operation.id()}(message, this.websocket);
+}
+  `}
+        </Text>
+      ))}
+    </>
+  );
+}

packages/templates/clients/websocket/javascript/components/SendOperation.js

@@ -27,7 +27,7 @@ async function main() {
 
     while (true) {
       try {
-        await WSClient.sendEchoMessage(message, wsClient.websocket);
+        await wsClient.sendEchoMessage(message);
       } catch (error) {
         console.error('Error while sending message:', error);
       }

packages/templates/clients/websocket/javascript/example.js

@@ -10,14 +10,15 @@ export default function ({ asyncapi, params }) {
   const title = info.title();
   const clientName = getClientName(info, params.appendClientSuffix, params.customClientName);
   const serverUrl = getServerUrl(server);
+  const sendOperations = asyncapi.operations().filterBySend();
   return (
     <File name={params.clientFileName}>
       <FileHeaderInfo
         info={info}
         server={server}
       />
       <Requires />
-      <ClientClass clientName={clientName} serverUrl={serverUrl} title={title} />
+      <ClientClass clientName={clientName} serverUrl={serverUrl} title={title} sendOperations={sendOperations} />
     </File>
   );
 }

packages/templates/clients/websocket/javascript/template/client.js.js

@@ -93,17 +93,32 @@ class HoppscotchEchoWebSocketClient {
   }
 
   /**
-     * By default sends a message over a provided WebSocket connection.
-     * Useful when you already have an established WebSocket connection
-     * and want to send a message without creating a class instance.
-     *
-     * @param {Object} message - The message to send. It will be stringified to JSON.
-     * @param {WebSocket} socket - An existing WebSocket connection to use for sending the message.
-  */
+   * Sends a sendEchoMessage message over the WebSocket connection.
+   * 
+   * @param {Object} message - The message payload to send. Should match the schema defined in the AsyncAPI document.
+   * @param {WebSocket} [socket] - The WebSocket connection to use. If not provided, the client's own connection will be used.
+   * @throws {TypeError} If message cannot be stringified to JSON
+   * @throws {Error} If WebSocket connection is not in OPEN state
+   */
   static sendEchoMessage(message, socket) {
-    const websocket = socket || this.websocket;
-    websocket.send(JSON.stringify(message));
+    try {
+      socket.send(JSON.stringify(message));
+    } catch (error) {
+      console.error('Error sending sendEchoMessage message:', error);
+    }
+  }
+  /**
+   * Instance method version of sendEchoMessage that uses the client's own WebSocket connection.
+   * @param {Object} message - The message payload to send
+   * @throws {Error} If WebSocket connection is not established
+   */
+  sendEchoMessage(message){
+    if(!this.websocket){
+      throw new Error('WebSocket connection not established. Call connect() first.');
+    }
+    HoppscotchEchoWebSocketClient.sendEchoMessage(message, this.websocket);
   }
+  
 
   // Method to close the WebSocket connection
   close() {
@@ -211,17 +226,32 @@ class HoppscotchClient {
   }
 
   /**
-     * By default sends a message over a provided WebSocket connection.
-     * Useful when you already have an established WebSocket connection
-     * and want to send a message without creating a class instance.
-     *
-     * @param {Object} message - The message to send. It will be stringified to JSON.
-     * @param {WebSocket} socket - An existing WebSocket connection to use for sending the message.
-  */
+   * Sends a sendEchoMessage message over the WebSocket connection.
+   * 
+   * @param {Object} message - The message payload to send. Should match the schema defined in the AsyncAPI document.
+   * @param {WebSocket} [socket] - The WebSocket connection to use. If not provided, the client's own connection will be used.
+   * @throws {TypeError} If message cannot be stringified to JSON
+   * @throws {Error} If WebSocket connection is not in OPEN state
+   */
   static sendEchoMessage(message, socket) {
-    const websocket = socket || this.websocket;
-    websocket.send(JSON.stringify(message));
+    try {
+      socket.send(JSON.stringify(message));
+    } catch (error) {
+      console.error('Error sending sendEchoMessage message:', error);
+    }
   }
+  /**
+   * Instance method version of sendEchoMessage that uses the client's own WebSocket connection.
+   * @param {Object} message - The message payload to send
+   * @throws {Error} If WebSocket connection is not established
+   */
+  sendEchoMessage(message){
+    if(!this.websocket){
+      throw new Error('WebSocket connection not established. Call connect() first.');
+    }
+    HoppscotchClient.sendEchoMessage(message, this.websocket);
+  }
+  
 
   // Method to close the WebSocket connection
   close() {
@@ -330,17 +360,32 @@ class PostmanEchoWebSocketClientClient {
   }
 
   /**
-     * By default sends a message over a provided WebSocket connection.
-     * Useful when you already have an established WebSocket connection
-     * and want to send a message without creating a class instance.
-     *
-     * @param {Object} message - The message to send. It will be stringified to JSON.
-     * @param {WebSocket} socket - An existing WebSocket connection to use for sending the message.
-  */
+   * Sends a sendEchoMessage message over the WebSocket connection.
+   * 
+   * @param {Object} message - The message payload to send. Should match the schema defined in the AsyncAPI document.
+   * @param {WebSocket} [socket] - The WebSocket connection to use. If not provided, the client's own connection will be used.
+   * @throws {TypeError} If message cannot be stringified to JSON
+   * @throws {Error} If WebSocket connection is not in OPEN state
+   */
   static sendEchoMessage(message, socket) {
-    const websocket = socket || this.websocket;
-    websocket.send(JSON.stringify(message));
+    try {
+      socket.send(JSON.stringify(message));
+    } catch (error) {
+      console.error('Error sending sendEchoMessage message:', error);
+    }
+  }
+  /**
+   * Instance method version of sendEchoMessage that uses the client's own WebSocket connection.
+   * @param {Object} message - The message payload to send
+   * @throws {Error} If WebSocket connection is not established
+   */
+  sendEchoMessage(message){
+    if(!this.websocket){
+      throw new Error('WebSocket connection not established. Call connect() first.');
+    }
+    PostmanEchoWebSocketClientClient.sendEchoMessage(message, this.websocket);
   }
+  
 
   // Method to close the WebSocket connection
   close() {

packages/templates/clients/websocket/javascript/test/__snapshots__/integration.test.js.snap

@@ -0,0 +1,38 @@
+import path from 'path';
+import { render } from '@asyncapi/generator-react-sdk';
+import { Parser, fromFile } from '@asyncapi/parser';
+import { SendOperation } from '../../components/SendOperation';
+
+const parser = new Parser();
+const asyncapi_websocket_query = path.resolve(__dirname, '../../../../../../helpers/test/__fixtures__/asyncapi-websocket-query.yml');
+
+describe('Testing of SendOperation function', () => {
+  let parsedAsyncAPIDocument;
+
+  beforeAll(async () => {
+    const parseResult = await fromFile(parser, asyncapi_websocket_query).parse();
+    parsedAsyncAPIDocument = parseResult.document;
+  });
+
+  test('render websockets with send operations and client name', () => {
+    const result = render(
+      <SendOperation 
+        clientName='GeminiMarketDataWebsocketAPI'
+        sendOperations={parsedAsyncAPIDocument.operations().filterBySend()} 
+      />
+    );
+    const actual = result.trim();
+    expect(actual).toMatchSnapshot();
+  });
+
+  test('render websockets without send operations', () => {
+    const result = render(
+      <SendOperation 
+        clientName='GeminiMarketDataWebsocketAPI'
+        sendOperations={null} 
+      />
+    );
+    const actual = result.trim();
+    expect(actual).toMatchSnapshot();
+  });
+});

packages/templates/clients/websocket/javascript/test/components/SendOperation.test.js

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Testing of SendOperation function render websockets with send operations and client name 1`] = `
+"/**
+   * Sends a noMessage message over the WebSocket connection.
+   * 
+   * @param {Object} message - The message payload to send. Should match the schema defined in the AsyncAPI document.
+   * @param {WebSocket} [socket] - The WebSocket connection to use. If not provided, the client's own connection will be used.
+   * @throws {TypeError} If message cannot be stringified to JSON
+   * @throws {Error} If WebSocket connection is not in OPEN state
+   */
+  static noMessage(message, socket) {
+    try {
+      socket.send(JSON.stringify(message));
+    } catch (error) {
+      console.error('Error sending noMessage message:', error);
+    }
+  }
+  /**
+   * Instance method version of noMessage that uses the client's own WebSocket connection.
+   * @param {Object} message - The message payload to send
+   * @throws {Error} If WebSocket connection is not established
+   */
+  noMessage(message){
+    if(!this.websocket){
+      throw new Error('WebSocket connection not established. Call connect() first.');
+    }
+    GeminiMarketDataWebsocketAPI.noMessage(message, this.websocket);
+  }
+  
+
+  /**
+   * Sends a mixedMessageExamples message over the WebSocket connection.
+   * 
+   * @param {Object} message - The message payload to send. Should match the schema defined in the AsyncAPI document.
+   * @param {WebSocket} [socket] - The WebSocket connection to use. If not provided, the client's own connection will be used.
+   * @throws {TypeError} If message cannot be stringified to JSON
+   * @throws {Error} If WebSocket connection is not in OPEN state
+   */
+  static mixedMessageExamples(message, socket) {
+    try {
+      socket.send(JSON.stringify(message));
+    } catch (error) {
+      console.error('Error sending mixedMessageExamples message:', error);
+    }
+  }
+  /**
+   * Instance method version of mixedMessageExamples that uses the client's own WebSocket connection.
+   * @param {Object} message - The message payload to send
+   * @throws {Error} If WebSocket connection is not established
+   */
+  mixedMessageExamples(message){
+    if(!this.websocket){
+      throw new Error('WebSocket connection not established. Call connect() first.');
+    }
+    GeminiMarketDataWebsocketAPI.mixedMessageExamples(message, this.websocket);
+  }"
+`;
+
+exports[`Testing of SendOperation function render websockets without send operations 1`] = `""`;