A new feature was introduced by Xano team - Realtime connections. I was wondering if it is possible to connect somehow it to FF.
I have tried it myself but come into the issue that the WebSocket url has to start with 'wss://' but Xano uses "https://".
My code:
// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'package:web_socket_channel/web_socket_channel.dart'; // Importing the WebSocket package
import 'package:web_socket_channel/status.dart' as status;
Future<void> websocket(BuildContext context) async {
final String connectionHash = 'hash';
final String channelName = 'pinging';
try {
final channel = WebSocketChannel.connect(
Uri.parse(
'URL/?hash=$connectionHash&channel=$channelName'),
);
channel.stream.listen(
(message) {
// Handle real-time messages here
print('Received message: $message');
// You can update the state or UI using FlutterFlow's built-in functions
// For example, to show a snack bar with the message:
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Received message: $message')),
);
// Or update a global state:
FFAppState().update(() {
FFAppState().realTimeData = message;
});
},
onError: (error) {
// Handle errors
print('WebSocket error: $error');
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('WebSocket error: $error')),
);
},
onDone: () {
// Handle WebSocket closure
print('WebSocket closed');
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('WebSocket closed')),
);
},
);
// To send a message through the WebSocket, use:
// channel.sink.add('Your message here');
// Example of sending a message (you can remove or modify this as needed):
// channel.sink.add('Hello from FlutterFlow!');
// To close the WebSocket connection, use:
// channel.sink.close(status.goingAway);
} catch (e) {
// Handle connection errors
print('Failed to connect to WebSocket: $e');
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Failed to connect to WebSocket: $e')),
);
}
}
// Add this to your FlutterFlow actions and call it from your widget tree