So finally got round to implementing the socket connection. I've provided my code those interested in web socket / socketIO connection. I used socket_io_client as it's a little easier that web socket.

The code I've implemented is more or less based on this tutorial (https://www.youtube.com/watch?v=K7IOro1fWYU&t=540s) except modified to use the socketIO connection. So all no code build details can be found on the youtube tutorial and you can swap out with the code I'll provide below. PLEASE NOTE: this does not work on web debug mode, the Javascript blocks the .setExtraHeader parameter - I've not tested without that .setExtraHeader. So if you plan on implementing this, make sure to download the code and test with emulator - works for me. Serge Middendorf Daniel Meza if you know how to get this to work with the web debug that would be great. The FF team tutorial connecting with HTTP has the same issue.

I've split the code into opening the connection (and listening/parsing responses) and sending messages. I'm connecting to my own server, so the payloads are different and will need to be modified to your use case. Make sure to create an app State variable for the socket connection - I used dynamic globalSocket. Lastly any feedback, improvements or bug fixes would be great! I'm new to FF and F.

//init_socket_connection\n\n// Automatic FlutterFlow imports\nimport '/backend/backend.dart';\nimport '/backend/schema/structs/index.dart';\nimport '/flutter_flow/flutter_flow_theme.dart';\nimport '/flutter_flow/flutter_flow_util.dart';\nimport 'index.dart'; // Imports other custom actions\nimport '/flutter_flow/custom_functions.dart'; // Imports custom functions\nimport 'package:flutter/material.dart';\n// Begin custom action code\n// DO NOT REMOVE OR MODIFY THE CODE ABOVE!\n\nimport 'package:socket_io_client/socket_io_client.dart' as IO;\nimport 'dart:convert';\n\nFuture initSocketConnection(\n  String endpoint,\n  String userId,\n  Future<dynamic> Function() callbackAction,\n) async {\n  print('Connecting to socket');\n\n  IO.Socket socket = IO.io(\n      endpoint,\n      IO.OptionBuilder().setTransports(['websocket']).setExtraHeaders(\n          {'user_id': userId}).build());\n\n  FFAppState().globalSocket = socket;\n\n  socket.connect();\n\n  socket.onConnect((_) {\n    print('connected to socket');\n  });\n\n  // I'm using 3 listeners so adjust to your use case\n\n  socket.on('system_message', (message) {\n    print('*** system_message: $message');\n  });\n\n  socket.on('stream', (message) {\n    print(\"*** stream: $message\");\n    addToChatHistory(message, callbackAction);\n  });\n\n  socket.on('chat', (message) {\n    print(\"*** chat: $message\");\n  });\n}\n\nvoid addToChatHistory(Map<String, dynamic> message, callbackAction) {\n  IncomingMessage incomingMessage = IncomingMessage.fromJson(message);\n  // My stream msg body has {token: string/null, complete: true/false}, so adjust to your msg body.\n\n  if (incomingMessage.token != null) {\n    String? token = incomingMessage.token;\n    FFAppState().updateChatHistoryAtIndex(\n      FFAppState().chatHistory.length - 1,\n      (e) {\n        return e..content = \"${e.content}$token\";\n      },\n    );\n  }\n\n  callbackAction();\n}\n\nclass IncomingMessage {\n  String? token;\n  bool? complete;\n\n  IncomingMessage({this.token, this.complete});\n\n  IncomingMessage.fromJson(Map<String, dynamic> json) {\n    token = json['token'];\n    complete = json['complete'];\n  }\n\n  Map<String, dynamic> toJson() {\n    final Map<String, dynamic> data = {};\n    if (token != null) {\n      data['token'] = this.token;\n    }\n    data['complete'] = this.complete;\n    return data;\n  }\n}\n

// sendMessage\n\n// Automatic FlutterFlow imports\nimport '/backend/backend.dart';\nimport '/backend/schema/structs/index.dart';\nimport '/flutter_flow/flutter_flow_theme.dart';\nimport '/flutter_flow/flutter_flow_util.dart';\nimport 'index.dart'; // Imports other custom actions\nimport '/flutter_flow/custom_functions.dart'; // Imports custom functions\nimport 'package:flutter/material.dart';\n// Begin custom action code\n// DO NOT REMOVE OR MODIFY THE CODE ABOVE!\n\nimport 'dart:async';\nimport 'dart:convert';\nimport 'package:socket_io_client/socket_io_client.dart' as IO;\n\nFuture sendMessage(\n  String text,\n  double user,\n  dynamic globalSocket,\n) async {\n  if (globalSocket == null || !(globalSocket is IO.Socket)) {\n    print('Socket is not initialized or not of the correct type');\n    return;\n  }\n  IO.Socket socket = globalSocket as IO.Socket;\n\n  print('*** sendMessage Debug: Is Socket Connected? - ${socket.connected}');\n  print('*** sendMessage Debug: Socket ID - ${socket.id}');\n\n  FFAppState().addToChatHistory(ChatResponseStruct(\n    author: \"assistant\",\n    content: \"\",\n  ));\n\n  // I'm sending to the 'chat' channel, but that's my use case, make sure to adjust to whatever you're sending to. My outgoing msg body is very basic {content: String}\n  if (text != '') {\n    var message = {'content': text};\n    print('*** sendMessage: $message');\n    socket.emit('chat', message);\n  }\n}\n

WebSockets and Live Streaming Support in FlutterFlow: Compatibility with OpenAI's ChatGPT Streaming Feature?