Dart/Flutter - HttpServer how to update image with websocket?

Viewed 198

I am streaming my display to webserver. My current code is very basic and I don't know exactly how websockets work.
Right now the user have to refresh the page to get a new image. I would like to refresh on new image arrival.
Do I need to create a JavaScript page or can I render everything server side?
Here is my current code

import 'dart:io';

import 'package:flutter/services.dart';

const EventChannel eventChannel = EventChannel('bla.bla.io/screenshotStream');
dynamic image;

void handleNewImage(dynamic imageData) {
  image = imageData;
}

registerScreenshotStreamSubscription() {
  eventChannel.receiveBroadcastStream().listen(handleNewImage);
}

Future webServer() async {
  registerScreenshotStreamSubscription();
  HttpServer.bind(InternetAddress.anyIPv6, 3000).then((server) {
    server.listen((HttpRequest request) async {
      request.response.headers.set('Content-Type', 'image/png');
      request.response.add(image);
      request.response.close();
    });
  });
}
0 Answers
Related