Skip to content

buehren/websocket-client-flutter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WebSocket Client in Flutter

Introduction

This simple WebSocket client connects to a given WebSocket URL and sends texts when pressing the button. Received data is printed. (Requires Flutter.)

Sending messages via Websocket from the app does not work in Flutter for Android/Linux/Windows when connecting to a Websocket server running on Google Cloud Run.

It works when using a server outside Google Cloud Run or when using Flutter for Web.

✓ Server echo.websocket.org

First run flutter devices to list the available emulators and connected Android devices. Note the device id (printed in the second column).

Then start the app on a device or emulator as shown below (replace DEVICEID with your device id) and click the send button multiple times.

You can see that the app is sending messages via the WebSocket and receives the same messages as echoes:

> flutter run \
     --no-sound-null-safety \
     -d DEVICEID \
     --dart-define="WS_URL=wss://echo.websocket.org/"


Launching lib/main.dart on EML L29 in debug mode...
...
Running with unsound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety
D/AwareBitmapCacher(17743): handleInit switch not opened pid=17743
W/Settings(17743): Setting device_provisioned has moved from android.provider.Settings.Secure to android.provider.Settings.Global.
V/HiTouch_HiTouchSensor(17743): User setup is finished.
I/flutter (17743): Sending message #1 to WebSocket sink
V/AudioManager(17743): querySoundEffectsEnabled...
I/flutter (17743): Received data: Message #1 from Flutter to WebSocket
I/flutter (17743): Sending message #2 to WebSocket sink
V/AudioManager(17743): querySoundEffectsEnabled...
I/flutter (17743): Received data: Message #2 from Flutter to WebSocket
I/flutter (17743): Sending message #3 to WebSocket sink
V/AudioManager(17743): querySoundEffectsEnabled...
I/flutter (17743): Received data: Message #3 from Flutter to WebSocket
I/flutter (17743): Sending message #4 to WebSocket sink
V/AudioManager(17743): querySoundEffectsEnabled...
I/flutter (17743): Received data: Message #4 from Flutter to WebSocket

Servers on Google Cloud Run

To launch servers on Google Cloud Run, click "Run on Google Cloud" on these pages:

Note the URLs displayed after Your application is now live here.

✗ Flutter for Android

Java (Quarkus) WebSocket echo server

Start the app on a device or emulator as shown below (replace DEVICEID with your device id and xxxxxxxxxx-xx.x with the corresponding part of the Java/Quarkus Cloud Run URL) and click the send button multiple times.

You can see that the WebSocket connection is closed immediately ("done") when trying to send a message in Flutter for Android:

> flutter run \
      --no-sound-null-safety \
      -d DEVICEID \
      --dart-define="WS_URL=wss://websocket-echo-server-quarkus-xxxxxxxxxx-xx.x.run.app/websocket"


Running with unsound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety
D/AwareBitmapCacher(15321): handleInit switch not opened pid=15321

I/flutter (15321): Sending message #1 to WebSocket sink
V/AudioManager(15321): querySoundEffectsEnabled...

I/flutter (15321): 2021-03-08 17:41:02.680826 Connection done

I/flutter (15321): 2021-03-08 17:41:06.691836 Starting connection attempt to wss://websocket-echo-server-quarkus-xxxxxxxxxx-xx.x.run.app/websocket ...
I/flutter (15321): Sending message #2 to WebSocket sink
V/AudioManager(15321): querySoundEffectsEnabled...
I/flutter (15321): 2021-03-08 17:41:15.884124 Connection done
I/flutter (15321): 2021-03-08 17:41:19.890023 Starting connection attempt to wss://websocket-echo-server-quarkus-xxxxxxxxxx-xx.x.run.app/websocket ...
Application finished.

Python WebSocket echo server

The same happens when using a Websocket echo server implemented in Python on Google Cloud Run:

> flutter run \
      --no-sound-null-safety \
      -d DEVICEID \
      --dart-define="WS_URL=wss://websocket-echo-server-python-xxxxxxxxxx-xx.x.run.app/"


Running with unsound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety
I/flutter (22975): 2021-03-08 18:32:27.541871 Starting connection attempt to wss://websocket-echo-server-python-vsv4xsncya-ey.a.run.app/ ...
I/flutter (22975): 2021-03-08 18:32:52.829201 Connection done
I/flutter (22975): 2021-03-08 18:32:56.836798 Starting connection attempt to wss://websocket-echo-server-python-vsv4xsncya-ey.a.run.app/ ...
D/ZrHung.AppEyeUiProbe(22975): restart watching
D/mali_winsys(22975): EGLint new_window_surface(egl_winsys_display *, void *, EGLSurface, EGLConfig, egl_winsys_surface **, EGLBoolean) returns 0x3000
D/mali_winsys(22975): EGLint new_window_surface(egl_winsys_display *, void *, EGLSurface, EGLConfig, egl_winsys_surface **, EGLBoolean) returns 0x3000
W/Gralloc3(22975): mapper 3.x is not supported
E/        (22975): APS:IFLoad:importExternalFunctions, search function createNewHwApsUtils failed, dlsym err:undefined symbol: createNewHwApsUtils
D/        (22975): APS:importExternalFunctions OK
I/HwViewRootImpl(22975): removeInvalidNode jank list is null

I/flutter (22975): Sending message #1 to WebSocket sink
V/AudioManager(22975): querySoundEffectsEnabled...
I/flutter (22975): 2021-03-08 18:33:14.174709 Connection done

I/flutter (22975): 2021-03-08 18:33:18.178244 Starting connection attempt to wss://websocket-echo-server-python-vsv4xsncya-ey.a.run.app/ ...

I/flutter (22975): Sending message #2 to WebSocket sink
V/AudioManager(22975): querySoundEffectsEnabled...
I/flutter (22975): 2021-03-08 18:33:21.990575 Connection done

I/flutter (22975): 2021-03-08 18:33:25.998400 Starting connection attempt to wss://websocket-echo-server-python-vsv4xsncya-ey.a.run.app/ ...
Application finished.

Another WebSocket server

The actual Websocket server of our project sends a message before receiving anything. You can see that the server’s message is received by the app.

But again the WebSocket connection is closed immediately ("done") when trying to send a message to the server running on Google Cloud Run:

I/flutter (15724): 2021-03-08 17:43:40.124222 Starting connection attempt to wss://event-statistics-xxxxxxxxxx-xx.x.run.app/stats/... ...
I/flutter (15724): Received data: [{"name": ...}]

I/flutter (15724): Sending message #1 to WebSocket sink
V/AudioManager(15724): querySoundEffectsEnabled...

I/flutter (15724): 2021-03-08 17:43:48.146008 Connection done

I/flutter (15724): 2021-03-08 17:43:52.159407 Starting connection attempt to wss://event-statistics-xxxxxxxxxx-xx.x.run.app/stats/... ...
I/flutter (15724): Received data: [{"name": ...}]
I/flutter (10072): connect
I/flutter (10072): 2021-03-08 17:44:01.442469 Starting connection attempt to wss://event-statistics-xxxxxxxxxx-xx.x.run.app/stats/... ...
I/flutter (10072): Received data: [{"name": ...}]

✗ Flutter for Linux

Run flutter config --enable-linux-desktop to enable Linux executable support in Flutter if required.

Start the app as Linux executable as shown below (replace xxxxxxxxxx-xx.x with the corresponding part of the Java/Quarkus Cloud Run URL) and click the send button multiple times.

You can see that the WebSocket connection is closed immediately ("done") when trying to send a message in Flutter for Linux:

> flutter run \
      --verbose \
      -d linux \
      --dart-define="WS_URL=wss://websocket-echo-server-quarkus-vsv4xsncya-ey.a.run.app/websocket"


[+4008 ms] flutter: 2021-03-09 15:01:03.141445 Starting connection attempt to
wss://websocket-echo-server-quarkus-vsv4xsncya-ey.a.run.app/websocket ...
[+302273 ms] flutter: 2021-03-09 15:06:05.414310 Connection done
[+4012 ms] flutter: 2021-03-09 15:06:09.427479 Starting connection attempt to
wss://websocket-echo-server-quarkus-vsv4xsncya-ey.a.run.app/websocket ...
[+300953 ms] flutter: Sending message #1 to WebSocket sink
[  +56 ms] flutter: 2021-03-09 15:11:10.437721 Connection done
[ +906 ms] flutter: Sending message #2 to WebSocket sink
[+3106 ms] flutter: 2021-03-09 15:11:14.450520 Starting connection attempt to
wss://websocket-echo-server-quarkus-vsv4xsncya-ey.a.run.app/websocket ...
[+3324 ms] flutter: Sending message #3 to WebSocket sink
[  +64 ms] flutter: 2021-03-09 15:11:17.839670 Connection done
[+4021 ms] flutter: 2021-03-09 15:11:21.858995 Starting connection attempt to
wss://websocket-echo-server-quarkus-vsv4xsncya-ey.a.run.app/websocket ...
[+13589 ms] flutter: Sending message #4 to WebSocket sink
[ +151 ms] flutter: 2021-03-09 15:11:35.597968 Connection done
[+4009 ms] flutter: 2021-03-09 15:11:39.612284 Starting connection attempt to
wss://websocket-echo-server-quarkus-vsv4xsncya-ey.a.run.app/websocket ...

✗ Flutter for Windows

Run flutter config --enable-windows-desktop to enable Windows executable support in Flutter if required.

In Windows --dart-define did not work for me. To start the app as Windows executable, replace the default value for WS_URL in lib/main.dart with wss://websocket-echo-server-quarkus-xxxxxxxxxx-xx.x.run.app/websocket (use the corresponding part of your Java/Quarkus Cloud Run URL).

You can see that the WebSocket connection is closed immediately ("done") when trying to send a message in Flutter for Windows:

> flutter run --verbose -d windows


[ +105 ms] flutter: 2021-03-09 16:40:25.711306 Starting connection attempt to wss://websocket-echo-server-quarkus-vsv4xsncya-ey.a.run.app/websocket ...
[        ]  Running with sound null safety

[+6803 ms] flutter: Sending message #1 to WebSocket sink
[  +42 ms] flutter: 2021-03-09 16:40:33.345528 Connection done

[+4003 ms] flutter: 2021-03-09 16:40:37.348427 Starting connection attempt to wss://websocket-echo-server-quarkus-vsv4xsncya-ey.a.run.app/websocket ...

[+9008 ms] flutter: Sending message #2 to WebSocket sink
[  +46 ms] flutter: 2021-03-09 16:40:46.404390 Connection done

[+4001 ms] flutter: 2021-03-09 16:40:50.404752 Starting connection attempt to wss://websocket-echo-server-quarkus-vsv4xsncya-ey.a.run.app/websocket ...

[+5531 ms] flutter: Sending message #3 to WebSocket sink
[  +44 ms] flutter: 2021-03-09 16:40:55.980917 Connection done

[+4001 ms] flutter: 2021-03-09 16:40:59.983745 Starting connection attempt to wss://websocket-echo-server-quarkus-vsv4xsncya-ey.a.run.app/websocket ...

✓ Flutter for Web

Start the app in a web server as shown below (replace xxxxxxxxxx-xx.x with the corresponding part of the Java/Quarkus Cloud Run URL).

Then open http://127.0.0.1:8089/ in your browser and click the app’s send button multiple times.

You can see that the app can send messages to the WebSocket on Google Cloud Run in Flutter for web without any problem:

> flutter run \
      --no-sound-null-safety \
      -d web-server \
      --web-port 8089 \
      --observatory-port 9099 \
      --web-hostname 0.0.0.0 \
      --dart-define="WS_URL=wss://websocket-echo-server-quarkus-xxxxxxxxxx-xx.x.run.app/websocket"


2021-03-08 16:35:26.517 Starting connection attempt to wss://websocket-echo-server-quarkus-xxxxxxxxxx-xx.x.run.app/websocket ...
js_primitives.dart:30 Sending message #1 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #1 from Flutter to WebSocket
js_primitives.dart:30 Sending message #2 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #2 from Flutter to WebSocket
js_primitives.dart:30 Sending message #3 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #3 from Flutter to WebSocket
js_primitives.dart:30 Sending message #4 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #4 from Flutter to WebSocket
js_primitives.dart:30 Sending message #5 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #5 from Flutter to WebSocket
js_primitives.dart:30 Sending message #6 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #6 from Flutter to WebSocket
js_primitives.dart:30 Sending message #7 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #7 from Flutter to WebSocket
js_primitives.dart:30 Sending message #8 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #8 from Flutter to WebSocket
js_primitives.dart:30 Sending message #9 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #9 from Flutter to WebSocket

It also works when running in Google Chrome debug mode:

> flutter run \
      --no-sound-null-safety \
      -d chrome \
      --dart-define="WS_URL=wss://websocket-echo-server-quarkus-xxxxxxxxxx-xx.x.run.app/websocket"


This app is linked to the debug service: ws://127.0.0.1:36879/uWO01OhB8Z4=/ws
js_primitives.dart:30 2021-03-08 16:36:58.749 Starting connection attempt to wss://websocket-echo-server-quarkus-xxxxxxxxxx-xx.x.run.app/websocket ...
js_primitives.dart:30 Sending message #1 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #1 from Flutter to WebSocket
js_primitives.dart:30 Sending message #2 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #2 from Flutter to WebSocket
js_primitives.dart:30 Sending message #3 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #3 from Flutter to WebSocket
js_primitives.dart:30 Sending message #4 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #4 from Flutter to WebSocket
js_primitives.dart:30 Sending message #5 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #5 from Flutter to WebSocket
js_primitives.dart:30 Sending message #6 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #6 from Flutter to WebSocket
js_primitives.dart:30 Sending message #7 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #7 from Flutter to WebSocket
js_primitives.dart:30 Sending message #8 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #8 from Flutter to WebSocket
js_primitives.dart:30 Sending message #9 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #9 from Flutter to WebSocket
js_primitives.dart:30 Sending message #10 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #10 from Flutter to WebSocket
js_primitives.dart:30 Sending message #11 to WebSocket sink
js_primitives.dart:30 Received data: echo of Message #11 from Flutter to WebSocket

Issue: WebSocket connection fails with server on Google Cloud Run

About

WebSocket Client in Flutter

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published