In Cognigy

In order to set up a test environment, one has to create an example agent in Cognigy. For this approach, two resources are needed:

1. Flow
2. Socket Endpoint

In the Flow, a simple SAY Node is enough to show the functionality of the connection. In order to expose this to the world, one has to create the endpoint and choose the defined Flow as the source of the logic. Finally, the Endpoint URL and URL Token need to be stored since it will be used in the app.

In Flutter

For this short guide, the Cognigy part is finished. Now the application has to connect to the provided socket. Thereafter, one can send messages to Cognigy and wait for incoming responses, such as text or images e.g. gallery views.

The following steps are required to set up the connection in the Flutter application:

1. Follow this Flutter Socket Tutorial
2. Create a socket service that handles incoming and outgoing Cognigy messages
3. Display the messages in the application

After reading the tutorial, the application should be ready to connect to any socket. Now, create a new Dart file called config.dart and paste the following code into it:

final String socketUrl = <Endpoint URL>;
final String urlToken = <URL Token>;

Paste in your Endpoint URL and URL Token.

After that, create another file called socket_service.dart. This file will contain the two methods createSocketConnection() and sendMessage(). The first one connects the app to Cognigy, while the second one sends a user message to our Conversational AI:

import 'package:socket_io_client/socket_io_client.dart' as IO 
// Add this package to your pubspec.yaml import 
'package:uuid/uuid.dart';
import 'package:cognigy_flutter_client/cognigy/config.dart' as config;

class SocketService { 
  IO.Socket socket; 
  bool connected = false;
  final sessionId = Uuid().v1(); 

  // time-based 
  final userId = Uuid().v4(); 
 
  sendMessage(String text, dynamic data) { 
    if (connected) { 
      socket.emit('processInput', { 
        'URLToken': config.urlToken, 
        'text': text,
        'userId': userId,
        'sessionId': sessionId,
        'channel': 'flutter',
        'data': data,
        'source': 'device'
      });
    } else { 
      print('[SocketClient] Unable to directly send your message since we are not connected.');
    }
  } 

  createSocketConnection() {
    print("[SocketClient] try to connect to Cognigy.AI");

    socket = IO.io(config.socketUrl, <String, dynamic>{ 
      'transports': ['websocket'],
      'extraHeaders': { 
        'URLToken': config.urlToken 
      }
    }); 

    this.socket.on("connect", (_) { 
      print("[SocketClient] connection established");
      
      connected = true; 
    }); 

    this.socket.on("disconnect", (_) => print("[SocketClient] disconnected"));
  }
}

In the main.dart file, one is now able to use the SocketService class as soon as the widget starts initializing:

// Initialize SocketService to access the socket connection
final SocketService socketService = injector.get<SocketService>();@override
void initState() {
  
  // ...  // connect to Cognigy
  socketService.createSocketConnection();  // wait for AI messages
  socketService.socket.on('output', (response) {
    // ...
  }));  // ...  super.initState();
}

Now all incoming messages can be handled in the initState() method. For example, to add them to a list of messages and display them in the app. However, outgoing messages must be handled as well. Therefore, a button can be added and a text field where the value of this field will be sent to Cognigy as soon as the button is pressed.

TextEditingController textController;TextField(
  controller: textController, 
  onChanged: (value) {
    setState(() { textController.text = value;});
  }
)FlatButton(
  onPressed: () {
    if (textController.text.isNotEmpty) {     // send the message to Cognigy 
     socketService.sendMessage(textController.text, null);
    
      // clear the text field
      textController.text = '';      // add the sent message to the displayed chat
      // ...
    }
  }
  ...
)

→ No more steps are needed to send and receive simple text messages. ←