{"id":6134,"date":"2021-03-22T08:46:45","date_gmt":"2021-03-22T08:46:45","guid":{"rendered":"https:\/\/uhp.digital\/?p=6134"},"modified":"2021-03-22T08:46:50","modified_gmt":"2021-03-22T08:46:50","slug":"empfangen-von-messages-laravel-echo-socket-io-backends-android","status":"publish","type":"post","link":"https:\/\/uhp.digital\/en\/blog\/empfangen-von-messages-laravel-echo-socket-io-backends-android\/","title":{"rendered":"Receiving Messages From Laravel Echo Socket IO Backend in Android Application"},"content":{"rendered":"

Laravel framework provides a very nice way of subscribing to channels and listening to events. In this article, we will explore how we can receive broadcasted events from the Laravel web app in android applications, all while using WebSockets. <\/p>\n\n\n\n

\"\"
Laravel Echo Web & Android App Sample<\/figcaption><\/figure>\n\n\n\n

The first section of this article will describe Laravel web application setup and the second section will describe how we can integrate Socket IO in an android application. <\/p>\n\n\n\n

If you are interested in the Android part of the article, you can skip the web setup section. At the end of the article are the links to the source code of both applications, so you can test the whole setup. <\/p>\n\n\n\n

Laravel Web Application Setup<\/strong> <\/h4>\n\n\n\n

The main purpose of the Laravel web application is to create\/broadcast messages to available clients. In our web application we\u2019ll use Redis broadcaster with Socket.IO server. In this section, we\u2019ll show all the steps required for the Laravel web application to send broadcasted messages via WebSocket. <\/p>\n\n\n\n

The Redis broadcaster will broadcast messages from our MessagesController<\/em> (that we\u2019ll create later) using pub\/sub feature. We\u2019ll pair it with a Socket IO server so we can receive messages from Redis and broadcast them to Socket IO channels.<\/p>\n\n\n\n

So, the very first thing is to install Laravel Echo:<\/p>\n\n\n\n

npm install --save laravel-echo<\/pre>\n\n\n\n
and Redis, via composer:<\/p>\n\n\n\n
composer require predis\/predis<\/pre>\n\n\n\n
Don\u2019t forget to set Redis as broadcast driver in .env<\/em>file:<\/p>\n\n\n\n
BROADCAST_DRIVER=redis<\/pre>\n\n\n\n
And specify Redis properties: <\/p>\n\n\n\n
REDIS_CLIENT=predis\nREDIS_PREFIX=\"\"<\/pre>\n\n\n\n
Next, we are going to pair Redis broadcaster with Socket.IO server. Because we want to receive and send messages in web application (and also in android application), we\u2019ll need to install the appropriate Javascript library:<\/p>\n\n\n\n
npm install \u2014 save socket.io-client <\/pre>\n\n\n\n
After installing Socket.IO Javascript client, we need to instantiate global Echo object with Socket.IO as broadcaster (in resources\/js\/bootstrap.js<\/em>). <\/p>\n\n\n\n
import Echo from 'laravel-echo';\n\nwindow.io = require('socket.io-client');\n\nwindow.Echo = new Echo({\n    broadcaster: 'socket.io',\n    host: window.location.hostname + ':6001'\n});<\/pre>\n\n\n\n
After specifying Echo object, we need to execute the following command in order to include it in our app.js<\/em> (that we are going to use later) for listening of Echo events in our web app:<\/p>\n\n\n\n
npm install
npm run dev<\/pre>\n\n\n\n
Now we are very close to the finishing of Laravel dependencies configuration process. The very last thing is to install Socket.IO server. Because Laravel doesn\u2019t come with the Socket.IO server included, we\u2019ll use the community driven Socket.IO server: https:\/\/github.com\/tlaverdure\/laravel-echo-server\nIn order to install the laravel-echo-server<\/em> we need to execute the following command: <\/p>\n\n\n\n
npm install -g laravel-echo-server<\/pre>\n\n\n\n
After installing, we need to initialize the laravel-echo-server<\/em> by executing the following command:<\/p>\n\n\n\n
laravel-echo-server init<\/pre>\n\n\n\n
and when the echo server configuration is done, we can start it by running the following command: <\/p>\n\n\n\n
laravel-echo-server start<\/pre>\n\n\n\n
If the server is successfully started, you\u2019ll get the following output: <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
By completing the laravel-echo-server<\/em> installation, we have preconfigured everything that is important on our Laravel web application side in order to send messages via Laravel Echo. So, in the next step we are going to make a controller that will send Laravel Echo messages. Before creating a controller that will send our messages, let us explain a little bit about how those messages can be sent. <\/p>\n\n\n\n
Events that Laravel app will send are broadcasted over channels, which can be public or private. In our sample we\u2019ll use a public channel, but if you want to prevent unauthorized users from listening channel events, you can register for a private channel. \nLet us now create an event called MessageCreated class<\/em> in app\/Events folder<\/em>), that will be sent when we want to send a Laravel Echo message to our subscribers (web app and android app): <\/p>\n\n\n\n
<?php \n\nnamespace App\\Events;\n\nuse Illuminate\\Broadcasting\\Channel;\nuse Illuminate\\Contracts\\Broadcasting\\ShouldBroadcast;\n\nclass MessageCreated implements ShouldBroadcast\n{\n    public $message;\n\n    public function __construct($message) \n    {\n        $this->message = $message;\n    }\n\n    public function broadcastOn()\n    {\n        return new Channel('messages');\n    }\n}\n<\/pre>\n\n\n\n
In constructor, we are specifying the message that will be sent to all the clients, while the broadcastOn<\/em> method specifies the channel name which will be receiving those messages.\nThe next step is to finally create our MessagesController<\/em>that will use the MessageCreated event that we created previously. MessageCreated class<\/em>event that we created previously. <\/p>\n\n\n\n
<?php\n\nnamespace App\\Http\\Controllers;\n\nuse App\\Http\\Controllers\\Controller;\nuse Illuminate\\Http\\Request;\nuse App\\Events\\MessageCreated;\n\nclass MessagesController extends Controller\n{\n    protected function index() \n    {\n        return view('messages');\n    }\n\n    protected function sendMessage(Request $request)\n    {\n        $message = $request->message;\n        broadcast(new MessageCreated($message));\n        return response()->json([\n            'status' => 'message is sent successfuly!'\n        ]);\n    }\n} <\/pre>\n\n\n\n
We should add the route to method sendMessage()<\/em> in web.php<\/em> .<\/p>\n\n\n\n
Route::post('messages', 'MessagesController@sendMessage');<\/pre>\n\n\n\n
In order to display a form to user where the user can specify the message that will be sent to clients, we need to make an appropriate viewmessages.blade.php<\/em>). <\/p>\n\n\n\n
<form id="newMessageForm" action="">\n  <div class="form-group">\n      <label for="messageInput">Message<\/label>\n      <input type="text" class="form-control" id="messageInput" placeholder="Enter some message">\n  <\/div>\n  <button id="submitButton" type="submit" class="btn btn-primary">Submit<\/button>\n  <br\/><br\/>\n  <div class="form-group">\n    <label for="messagesList">Received messages:<\/label>\n    <ul id="messagesList" class="list-group">\n    <\/ul>\n  <\/div>\n<input type="hidden" name="trp-form-language" value="en"\/><\/form><\/pre>\n\n\n\n
Our form consists of an input field where the user can write a message, a submit button and a container for received messages (since the web application is also a client that can receive messages).\nIn the messages view, we need to add some methods for listening Echo events and methods for sending messages: <\/p>\n\n\n\n
    <script src=\"\/\/{{ Request::getHost() }}:6001\/socket.io\/socket.io.js\"><\/script>\n    <script src=\"{{ asset('\/js\/app.js') }}\"><\/script>\n    <script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"><\/script>   \n    <script>\n      $(\"#newMessageForm\").submit(function(event) {\n        event.preventDefault();\n        const message = $(\"#messageInput\").val();\n        if (message === \"\") {\n          alert(\"Please add some message!\");\n          return;\n        }\n        postMessageToBackend(message);\n      });\n      \n      function postMessageToBackend(message) {\n        $.post(\"messages\", {\n          \"_token\": \"{{ csrf_token() }}\",\n          \"message\": message \n        }).fail(function() {\n          alert(\"Error occurred during sending the data. Please retry again later.\");\n        })\n      }\n\n      window.Echo.channel('messages').listen('MessageCreated', (e) => {\n        addMessageToList(e.message);\n      });\n      \n      function addMessageToList(message) {\n        const newLi = `<li class=\"list-group-item\">${message}<\/li>`;\n        $(\"#messagesList\").prepend(newLi);\n      }\n    <\/script> <\/pre>\n\n\n\n
A very important part of code listing from above is the line<\/p>\n\n\n\n
window.Echo.channel(\u2018messages\u2019)<\/pre>\n\n\n\n
where our web application is listening for MessageCreated event in the messages channel. Method postMessageToBackend()<\/em> is executing asynchronous POST request and it creates new message broadcast. It\u2019s invoked when user clicks on the submit button.\nRoute to the MessagesController, specified in web.php: <\/p>\n\n\n\n
Route::get(\u2018messages\u2019, \u2018MessagesController@index\u2019);<\/pre>\n\n\n\n
Now is the time to start our web application: <\/p>\n\n\n\n
php artisan serve<\/pre>\n\n\n\n
and by browsing the following url, we can see our messages form: <\/p>\n\n\n\n
http:\/\/localhost:8000\/messages<\/a><\/p>\n\n\n\n
Now we are finished with the simple Laravel Application, so we can start with the Android application implementation. <\/p>\n\n\n\n
Android Socket.IO Client Setup<\/strong> <\/h4>\n\n\n\n
The Android application will establish the connection with the Laravel Echo server, receive broadcasted messages, and display them on the screen.\nThe main screen will have a simple layout - only one TextView<\/em>that will show all received messages:<\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".MainActivity\">\n\n    <TextView\n        android:id=\"@+id\/text_message\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:textSize=\"20sp\"\n        tools:text=\"Message\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintLeft_toLeftOf=\"parent\"\n        app:layout_constraintRight_toRightOf=\"parent\"\n        app:layout_constraintTop_toTopOf=\"parent\" \/>\n\n<\/androidx.constraintlayout.widget.ConstraintLayout> <\/pre>\n\n\n\n
In order to make the socket connection to our Laravel Echo server, we need to import an appropriate library in the Android project: <\/p>\n\n\n\n
implementation \u2018com.github.MrBin99:LaravelEchoAndroid:1.03\u2019<\/pre>\n\n\n\n
This library will allow us to connect to the socket server and to receive messages sent from the server.\nWe are going to create a BaseActivity,<\/em> a class that will be our base class containing all the required functionality for connecting to the echo server: <\/p>\n\n\n\n
const val SERVER_URL = \"http:\/\/10.0.2.2:6001\"\nconst val CHANNEL_MESSAGES = \"messages\"\nconst val EVENT_MESSAGE_CREATED = \"MessageCreated\"\nconst val TAG = \"msg\"\n\nopen class BaseSocketActivity : AppCompatActivity() {\n\n    private var _receivedEvent = MutableLiveData<Any>()\n    var receivedEvent = _receivedEvent\n\n    private var echo: Echo? = null\n\n    protected fun connectToSocket() {\n        val options = EchoOptions()\n        options.host = SERVER_URL\n\n        echo = Echo(options)\n        echo?.connect(object : EchoCallback {\n            override fun call(vararg args: Any?) {\n                log(\"successful connect\")\n                listenForEvents()\n            }\n        }, object : EchoCallback {\n            override fun call(vararg args: Any?) {\n                log(\"error while connecting: \" + args.toString())\n            }\n        })\n    }\n\n    protected fun listenForEvents() {\n        echo?.let {\n            it.channel(CHANNEL_MESSAGES)\n                .listen(EVENT_MESSAGE_CREATED) {\n                    val newEvent = MessageCreated.parseFrom(it)\n                    displayNewEvent(newEvent)\n                }\n        }\n    }\n\n    protected fun disconnectFromSocket() {\n        echo?.disconnect()\n    }\n\n    private fun log(message: String) {\n        Log.i(TAG, message)\n    }\n\n    private fun displayNewEvent(event: MessageCreated?) {\n        log(\"new event \" + event?.message)\n        _receivedEvent.postValue(event)\n    }\n}<\/pre>\n\n\n\n
In the code above, we can see that we have a few socket-related methods. Methods connectToSocket()<\/em> and disconnectFromSocket()<\/em> are methods that are responsible for connecting or disconnecting from WebSocket. Method listenForEvents()<\/em> is method that is called after we have established a successful socket connection and its main job is to \u2018listen\u2019 for events that are broadcasted from our socket backend.<\/p>\n\n\n\n
In order to receive the socket broadcast, we must specify the same \u2018channel\u2019 and \u2018message\u2019 as it is defined in backend configuration. After we have received a socket broadcast message, we have to parse its content. For that, we are using the parseFrom()<\/em>method from a companion object of MessageCreated class<\/em>.<\/p>\n\n\n\n
class MessageCreated(\n    val message: String\n) {\n\n    companion object {\n        fun parseFrom(value: Array<Any>): MessageCreated? {\n            val messageData = value[1] as org.json.JSONObject\n            try {\n                return Gson().fromJson(messageData.toString(), MessageCreated::class.java)\n            } catch (e: Exception) {\n                e.printStackTrace()\n            }\n            return null\n        }\n    }\n\n}<\/pre>\n\n\n\n
In order to parse the received message, we are going to use Gson library, so we need to import it in our app\/build.gradle file: <\/p>\n\n\n\n
implementation \u2018com.google.code.gson:gson:2.8.6\u2019<\/pre>\n\n\n\n
We also need to add an appropriate repository location, from which this library will be fetched, in the project level build.gradle<\/em> file: <\/p>\n\n\n\n
allprojects {\n    repositories {\n        maven { url 'https:\/\/jitpack.io' }\n    }\n}<\/pre>\n\n\n\n
After we have created a BaseSocketActivity<\/em> we can set our MainActivity<\/em> to inherit the BaseSocketActivity<\/em> and call the appropriate methods for establishing and destroying the socket connection:<\/p>\n\n\n\n
class MainActivity : BaseSocketActivity() {\n\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContentView(R.layout.activity_main)\n        connectToSocket()\n        initLiveDataListener()\n    }\n\n    override fun onDestroy() {\n        super.onDestroy()\n        disconnectFromSocket()\n    }\n\n    private fun initLiveDataListener() {\n        receivedEvent.observe(this, Observer {\n            displayEventData(it)\n        })\n    }\n\n    private fun displayEventData(event: Any) {\n        if (event is MessageCreated) {\n            text_message.apply {\n                val newText = event.message + \"\\n\" + this.text.toString()\n                text = newText\n            }\n        }\n    }\n}<\/pre>\n\n\n\n
Since the cleartext HTTP traffic is not explicitly permitted, we need to specify that in the network security configuration res\/xml\/network_security_config.xml<\/em>): <\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<network-security-config>\n    <domain-config cleartextTrafficPermitted=\"true\">\n        <domain includeSubdomains=\"true\">10.0.2.2<\/domain>\n    <\/domain-config>\n<\/network-security-config> <\/pre>\n\n\n\n
and include this file as an application tag property of our manifest, like: <\/p>\n\n\n\n
android:networkSecurityConfig=\"@xml\/network_security_config\"<\/pre>\n\n\n\n
Finally, don\u2019t forget to set the internet permission in manifest: <\/p>\n\n\n\n
<uses-permission android:name=\"android.permission.INTERNET\" \/><\/pre>\n\n\n\n
Now you can test everything in an android emulator. It is important to specify the socket backend url as: <\/p>\n\n\n\n
http:\/\/10.0.2.2:6001<\/a><\/p>\n\n\n\n
so we can connect to our Socket IO server on our local computer. <\/p>\n\n\n\n
Links to web\/android application sample code:<\/p>\n\n\n\n