rodrigobertotti / flutter_chat_app_with_nodejs Goto Github PK

A Flutter Chat App that supports live video and audio calls streaming with WebRTC, built with Node.js, MySQL and WebSockets, without Firebase.

License: MIT License

Kotlin 0.04% Ruby 1.01% Swift 0.70% Objective-C 0.01% Dart 66.06% CMake 6.34% C++ 7.87% C 0.48% HTML 0.65% TypeScript 16.85%

flutter_chat_app_with_nodejs's Introduction

Flutter Chat App with Node.js, WebSockets and MySQL

A Flutter Chat App that supports live video and audio calls streaming with WebRTC, built with Node.js, MySQL, and WebSockets.

This is a Flutter Chat App without Firebase, but if it doesn't fit for you, it can still be an example of a template to build your Flutter Chat UI

The Node.js server uses Askless for streaming data changes to the Flutter App through WebSockets, so the Flutter widgets are updated in realtime.

Because this project uses TypeORM, you can easily change the database to make this a Flutter Chat App with PostgreSQL, rather than with MySQL

The text messages are also saved in the user device with Hive, so the user doesn't need to be connected to the internet to see his received messages.

commented_askless_example.mp4

^{🔊 The video above contains audio, click on the right side to turn it on}

Getting started

Go to nodejs_websocket_backend and install the dependencies by running npm install
The Node.js server uses TypeORM, TypeORM supports several databases like MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, SAP Hana and WebSQL. So the first step is to configure the database of your choice. Add your database configuration on nodejs_websocket_backend/src/environment/db.ts, don't commit this file to your repository
In nodejs_websocket_backend/src/environment/jwt-private.key, replace the JWT private key with your own random text, don't also commit this file to your repository
Start your node.js backend server by running the command npm run dev, it will print its URL in the console (local network).
Go to the App created with Flutter on flutter_app/lib/core/data/data_sources/connection_remote_ds.dart and replace the serverUrl with the URL and port that your node.js backend is running
Go to flutter_app/lib/environment.dart and replace the localStorageEncryptionKey with your own random text. don't commit this file to your repository as well.
Run flutter pub get to get the Flutter dependencies
Run the Flutter project on your device :)

WebRTC - STUN/TURN Servers

You can edit WebRTC configuration on the flutter_app/lib/core/data/data_sources/connection_remote_ds.dart file

Alternative

For the Firebase version of this Chat, click here

Issues

Feel free to open an issue about:

❔ questions
💡 suggestions
🐜 potential bugs

License

MIT

Contacting me

📧 [email protected]

flutter_chat_app_with_nodejs's People

Contributors

Stargazers

Watchers

flutter_chat_app_with_nodejs's Issues

Askless throwing errors

Hello, when running your original code Askless is runnig errors all the time (when running npm server + 2 flutter clients connected).

Additionally after loggin-in loggin-out on the flutter client ... messages "from today" dissapear and are not showing on both clients (although chat works)

No idea how to fix it. Would you also be so kind and add small doc how to change column names in database ?
Seems your code is havy "column name" dependend (all 3 packages npm server, askless library and flutter code).
For example changing "userId" in database to "Id" .. seems to be really heavy work.

Flutter app side errors

I/flutter (12514): listenToTypingSubscription CALLED
I/flutter (12514): Askless [ERROR]: (waitForAuthentication) Ops, this shouldn't happen, the App says it is authenticated but the server says is not authenticated
I/chatty (12514): uid=10173(com.wisetap.flutter_chat_app_with_mysql.flutter_chat_app_with_mysql) 1.ui identical 1 line
I/flutter (12514): Askless [ERROR]: (waitForAuthentication) Ops, this shouldn't happen, the App says it is authenticated but the server says is not authenticated

NPM server errors

onReceived MESSAGES:
notifyMessagesWereUpdated: {"receivedAt":"2023-10-12T11:41:26.274Z","senderHasOutdatedVersion":true}
info: onClientReceiveOutputWithSuccess being ignored for route messages-were-updated (listen)
onReceived messages callback: messages
senderReceivedMessagesUpdates is empty/null
warning: respondWithError: the client "(no ID)" could not perform the operation on (READ)askless-internal/call/receive, result is PENDING_AUTHENTICATION, authentication is "pending", did you handle the onUnauthenticatedListener on the App side? (initAndConnect)
error: listen: the error is "PENDING_AUTHENTICATION", calling stopListening...
{"code":"PENDING_AUTHENTICATION","description":"Could not perform the operation on (LISTEN) "askless-internal/call/receive" because authentication is required"}
error: onClientStartsListening not called
[READ/LISTEN] conversations-with-unreceived-messages has been called by the client
1": conversations-with-unreceived-messages" sending -> []
info: onClientReceiveOutputWithSuccess being ignored for route conversations-with-unreceived-messages (listen)
info: onClientReceiveOutputWithSuccess being ignored for route askless-internal/call/receive (listen)

Just Get the Chat Part

Hello, I just discovered your package, installed it and found that it works very well. But I need your opinion to make an edit. I am making a new application, the general parts of the application are ready, I just want to use your package for the messaging part. I have my own membership system and database. How can I remove the login and registration section in your package and integrate my own member list? Which are the fields where I can change UserId and other parts?

Messages not appearing properly

Dear Rodrigo,

Sorry to bother you again but i have another problem that you may help me more because it is more related to your source code, in the
danny filo issue "Askless throwing errors" there is a part that said
"Additionally after loggin-in loggin-out on the flutter client ... messages "from today" dissapear and are not showing on both clients (although chat works)"

i assume this meant if i were to log out of one of the phone and login the messages going to disappear
i got a similar situation and i didnt touch the code for this part aside from some UI changes and add a few extra parameter

i have 2 phone
phone A is physical
phone B is emulator

i can send messages fine between the two (aside from the occastional server freeze or st but thats for later)
i can see msg phone A sent and msg from phone B
the problem arise when i log out of phone A and relogin, the msg are only from phone B while all the msg from phone A are gone
the way i got it back was that if i then logout of phone B and then relogin (not even go into the chat), Phone A will auto update and get all of the message as normal

and if i log out both of the device and relogin, both will lose their own sent msg

i would like to know how would you deal with this on YOUR source code, which part did you handle it so i can compare and fix it myself

sincerely
Hieunt

Video not stream using cellular data

I tried using cellular data to make a video call, but the video was not displayed, only a black screen appeared

Chat room got disconnected

Dear Rodrigo,

i current stumble upon your project that is very similar to a project i wanted to created so i decided to use your code as a base to build mine and plan to expand on it to the future, though i got a few problem and i hope you can help me with it.

chat room got disconnected, iirc i saw this question being asked before but from my reading there hasnt been a answer to it yet ?, it i run one emulator phone and one physical phone, if i were to chat either consistently or just leave it there, the chat will be disconnected and i have to turn off nodejs and restart it to continue using it again

1.1 my problem also start from the one above too as i have my own project that also based on your code and i managed to send message between user just fine until either is due to disconnect or something im missing i got the error

vlance_sharpshooter

mobile_server\node_modules\typeorm\src\driver\mysql\MysqlQueryRunner.ts:222
new QueryFailedError(query, parameters, err),
^
QueryFailedError: ER_TRUNCATED_WRONG_VALUE: Truncated incorrect DOUBLE value: '9970338569027054653L04117968'
at Query. (mobile_server\node_modules\typeorm\src\driver\mysql\MysqlQueryRunner.ts:222:33)
at Query. (mobile_server\node_modules\mysql\lib\Connection.js:526:10)
at Query._callback (mobile_server\node_modules\mysql\lib\Connection.js:488:16)
at Query.Sequence.end (mobile_server\node_modules\mysql\lib\protocol\sequences\Sequence.js:83:24)
at Query.ErrorPacket (mobile_server\node_modules\mysql\lib\protocol\sequences\Query.js:92:8)
at Protocol._parsePacket (mobile_server\node_modules\mysql\lib\protocol\Protocol.js:291:23)
at Parser._parsePacket (mobile_server\node_modules\mysql\lib\protocol\Parser.js:433:10)
at Parser.write (mobile_server\node_modules\mysql\lib\protocol\Parser.js:43:10)
at Protocol.write (mobile_server\node_modules\mysql\lib\protocol\Protocol.js:38:16)
at Socket. (mobile_server\node_modules\mysql\lib\Connection.js:88:28) {
query: 'UPDATE message SET received_at = ?, sender_has_outdated_version = ?, updated_at = CURRENT_TIMESTAMP WHERE id IN (?)',
parameters: [ 2024-05-16T06:50:25.603Z, 1, '9970338569027054653L04117968' ],
driverError: Error: ER_TRUNCATED_WRONG_VALUE: Truncated incorrect DOUBLE value: '9970338569027054653L04117968'
at Query.Sequence._packetToError (mobile_server\node_modules\mysql\lib\protocol\sequences\Sequence.js:47:14)
at Query.ErrorPacket (mobile_server\node_modules\mysql\lib\protocol\sequences\Query.js:79:18)
at Protocol._parsePacket (mobile_server\node_modules\mysql\lib\protocol\Protocol.js:291:23)
at Parser._parsePacket (mobile_server\node_modules\mysql\lib\protocol\Parser.js:433:10)
at Parser.write (mobile_server\node_modules\mysql\lib\protocol\Parser.js:43:10)
at Protocol.write (mobile_server\node_modules\mysql\lib\protocol\Protocol.js:38:16)
at Socket. (mobile_server\node_modules\mysql\lib\Connection.js:88:28)
at Socket. (mobile_server\node_modules\mysql\lib\Connection.js:526:10)
at Socket.emit (node:events:519:28)
at Socket.emit (node:domain:488:12)
--------------------
at Protocol._enqueue (mobile_server\node_modules\mysql\lib\protocol\Protocol.js:144:48)
at PoolConnection.query (mobile_server\node_modules\mysql\lib\Connection.js:198:25)
at mobile_server\node_modules\typeorm\src\driver\mysql\MysqlQueryRunner.ts:194:36
at processTicksAndRejections (node:internal/process/task_queues:95:5) {
code: 'ER_TRUNCATED_WRONG_VALUE',
errno: 1292,
sqlMessage: "Truncated incorrect DOUBLE value: '9970338569027054653L04117968'",
sqlState: '22007',
index: 0,
sql: "UPDATE message SET received_at = '2024-05-16 13:50:25.603', sender_has_outdated_version = 1, updated_at = CURRENT_TIMESTAMP WHERE id IN ('9970338569027054653L04117968')"
},
code: 'ER_TRUNCATED_WRONG_VALUE',
errno: 1292,
sqlMessage: "Truncated incorrect DOUBLE value: '9970338569027054653L04117968'",
sqlState: '22007',
index: 0,
sql: "UPDATE message SET received_at = '2024-05-16 13:50:25.603', sender_has_outdated_version = 1, updated_at = CURRENT_TIMESTAMP WHERE id IN ('9970338569027054653L04117968')"
}

this happen if i send a msg from user1 to user 2, user1 is fine, but if i logged into user2, there will be no more conversations, and it would stuck on loading,

i would love to be help with this and i will send more infomation if you needed, for example i created my own stream to list out the conversation now, maybe i missed something?, and if so why did it not work only after a bunch of message has been sent and it would seem only the receiver account got affected?

thank you in advance

WSS not connected

my web socket secure not connected in askless, but connect in another app, what is wrong?

Video Call Blank (Showing Black Screen)

Hello, when running your original code is running normal

I tried to use the video call feature with 2 Android emulators on the PC but only a black screen appeared on the recipient's screen (although chat works, and all features are normal except video calls)

No idea how to fix it.

Flutter app
I/org.webrtc.Logging( 6775): CameraStatistics: Camera fps: 12.
I/org.webrtc.Logging( 6775): CameraStatistics: Camera fps: 12.
I/org.webrtc.Logging( 6775): EglRenderer: Duration: 4003 ms. Frames received: 45. Dropped: 0. Rendered: 45. Render fps: 11.2. Average render time: 677 us. Average swapBuffer time: 473 us.
I/org.webrtc.Logging( 6775): EglRenderer: Duration: 4004 ms. Frames received: 0. Dropped: 0. Rendered: 0. Render fps: .0. Average render time: NA. Average swapBuffer time: NA.
I/org.webrtc.Logging( 6775): EglRenderer: Duration: 4002 ms. Frames received: 0. Dropped: 0. Rendered: 0. Render fps: .0. Average render time: NA. Average swapBuffer time: NA.
I/org.webrtc.Logging( 6775): CameraStatistics: Camera fps:
I/org.webrtc.Logging( 6775): CameraStatistics: Camera fps: 12.
I/org.webrtc.Logging( 6775): EglRenderer: Duration: 4001 ms. Frames received: 46. Dropped: 0. Rendered: 46. Render fps: 11.5. Average render time: 672 us. Average swapBuffer time: 431 us.
I/org.webrtc.Logging( 6775): EglRenderer: Duration: 4003 ms. Frames received: 0. Dropped: 0. Rendered: 0. Render fps: .0. Average render time: NA. Average swapBuffer time: NA.

NPM server

info: onClientReceiveOutputWithSuccess being ignored for route askless-internal/call/listen-for-a-call (listen)
info: onClientReceiveOutputWithSuccess being ignored for route askless-internal/call/listen-for-a-call (listen)
info: onClientReceiveOutputWithSuccess being ignored for route askless-internal/call/ice-candidate-list (listen)