Building an App to Send and Receive Messages Over a Local Network

Written by altynberg | Published 2021/05/08
Tech Story Tags: flutter-app-development | flutter-tutorial | flutter | http | wifi | messaging-system | messaging-app | programming

TLDR The task is to build an app that can send and receive messages over a local network. We can do it using sockets, but today we are going to create a simple app that uses an HTTP server for communication. The app has a simple HTTP server to send a message: Get my local IP address to send messages and to create an HttpServer instance. To check if it works you can go to the link:http://{your local IP: http://://{local IP:8080?msg=message&ip=ip.via the TL;DR App

The task is to build an app that can send and receive messages over a local network. We can do it using sockets, but today we are going to create a simple app that uses an HTTP server for communication.
The idea is very simple:
The app has a simple HTTP server to send a message:
  1. Get my local IP address 
  2. Try to send message to every local IP like:
        GET xxx.xxx.xxx.1/?msg=message
        GET xxx.xxx.xxx.2/?msg= message
        ...
        GET xxx.xxx.xxx.254/?msg= message

Local IP address

We need to get the local IP address to send messages and to create an HttpServer instance. I created a simple method for this:
It returns an IP address something like this:
192.168.0.107
We will use the leading three octets to send a request to every local IP:
192.168.0.xxx

HttpServer

To able to receive requests we need to create an instance of
HttpServer
using our local IP and any port from 1024 to 65353.
We return ‘Ok’ when we receive a request. To check if it works you can go to the link
http://{your local IP}:8080
and you should see the ‘Ok’ message.
Before checking on iOS or Android you need to add permissions.
Add to iOS info.plist file:
<key>NSAppTransportSecurity</key>
<dict><key>NSAllowsArbitraryLoads</key><true/></dict>
Add to AndroidManifest.xml file:
<uses-permission android:name="android.permission.INTERNET" />

Handling requests

To make it simple we will use the GET method and use query parameters to send a message like this:
http://{local IP}:8080?msg=message&ip=ip
If the request has the parameters like
msg
and
ip
we add those values to our message list and call the
setState
or notify to show that list on the screen:
To get the full source, check the Github project below.

Sending messages

We have to send the message to every local IP. We can use our local IP address to get the leading three octets and, from that, build the list of local IP addresses:
In this example, it sends messages only to IP addresses from
x.x.x.1
to
x.x.x.199
but theoretically, we can send it from 1 to 255.

Result

We can now send messages to active local devices. In the image below the left one is a physical iOS device and the right one is a macOS desktop App. As you can see they can send messages to each other and they have different local IP addresses.
You can find the working example here: https://github.com/usenbekov/local-network-comm

Written by altynberg | Software Engineer
Published by HackerNoon on 2021/05/08