dart - How to send image over socket connection?

Question

I have been trying to send image over socket connection from client to server which will be saved on the server.

The socket connection works fine for string messages but when I try to send an image, it is not transmitted correctly. Please give me a clue on what's the right way to do it.

Server-side code:

import 'dart:io';
import 'dart:typed_data';

void main() async {
  Uint8List bytes= await File('1.jpg').readAsBytes();
  
  
  final socket = await Socket.connect('localhost', 8000);
  print('Connected to: ${socket.remoteAddress.address}:${socket.remotePort}');

  // listen for responses from the server
  socket.listen(

    // handle data from the server
    (Uint8List data) {
      final serverResponse = String.fromCharCodes(data);
      print('Server: $serverResponse');
    },

    // handle errors
    onError: (error) {
      print(error);
      socket.destroy();
    },

    // handle server ending connection
    onDone: () {
      print('Server left.');
      socket.destroy();
    },
  );

  // send some messages to the server
  await sendMessage(socket, bytes);
  
}

Future<void> sendMessage(Socket socket, Uint8List message) async {
  print('Client: $message');
  socket.write(message);
}

Client-side code:

import 'dart:convert';
import 'dart:io';
import 'dart:typed_data';
import 'package:image/image.dart';
void main() async {
  // bind the socket server to an address and port
  final server = await ServerSocket.bind('127.0.0.1', 8000);

  // listen for clent connections to the server
  server.listen((client) {
    handleConnection(client);
  });
}

void handleConnection(Socket client) {
  print('Connection from'
      ' ${client.remoteAddress.address}:${client.remotePort}');

  // listen for events from the client
  client.listen(

    // handle data from the client
    (Uint8List data) async {
      // final message = String.fromCharCodes(data);
 
      print(data);
      await File('new.jpg').writeAsBytes(data);
    },

    // handle errors
    onError: (error) {
      print(error);
      client.close();
    },

    // handle the client closing the connection
    onDone: () {
      print('Client left');
      client.close();
    },
  );
}

Faulty image on server-side:

Answer 1

Just change socket.write(message) to socket.add(message) at the client-side and you are good to go

Future<void> sendMessage(Socket socket, Uint8List message) async {
 print('Client: $message');
 socket.add(message);
 }

because socket.write(object) Converts object to a String by invoking Object.toString. have a nice day:)