How to write a WebSocket App with Scarlet in 3 minutes

In mobile applications, the data layer is the source of truth for what is displayed on the screen. However, when the WebSocket API was integrated in Tinder earlier this year, maintaining it became a headache. To make WebSocket integration easier on Android, Scarlet was created.

WebSocket is one of the options for implementing the data layer in Android applications, especially when the application needs to update data in real time, such as chat, online multiplayer games, and real-time feeds. It establishes a two-way connection between the client and the server. When the connection is open, they can send text and binary messages back and forth with low overhead. This article will teach you how to quickly implement WebSocket in your Android application.

set up

To implement Scarlet, first add it to your app/build.gradle file.

 dependencies {
 ...
 // scarlet
    implementation 'com.tinder.scarlet:scarlet:0.1.12'  
 }

In the example provided by Scarlet, RxJava is used to help manage the flow of data sent by the web socket. Implement it in app/build.gradle.

 dependencies {
 // rx
     implementation 'io.reactivex.rxjava2:rxjava:2.2.21'  
     implementation 'io.reactivex.rxjava2:rxandroid:2.1.1'  
     implementation 'io.reactivex.rxjava2:rxkotlin:2.4.0'  
 }

If you are curious about Coroutine and Kotlin Flow support, see here: https://github.com/Tinder/Scarlet/issues/114

Now the important part of our setup is the service. We can test our WebSocket using websocket-echo (wss://websocket-echo.glitch.me);

Create interface function

Next, create an interface to define the functions for communicating with the WebSocket.

 interface EchoService { 
 
 @Receive
    fun observeConnection(): Flowable<WebSocket.Event> 
 
 @Send
    fun sendMessage(param: String)
 }

As shown above, the service interface looks very similar to Retrofit. You can use the @Receive annotation to observe the data stream from the WebSocket and use @Send to send or subscribe to data to the WebSocket.

With the service set up, we can move on to implementing the service in our activity; in this case, I didn’t use any architecture and just implemented the service in the Activity.

 class MainActivity : AppCompatActivity() {
 ...
    private fun setupWebSocketService() {
        webSocketService = provideWebSocketService(
            scarlet = provideScarlet(
                client = provideOkhttp(),
                lifecycle = provideLifeCycle(),
                streamAdapterFactory = provideStreamAdapterFactory(),
 )
 )
 } 
     
    private fun provideWebSocketService(scarlet: Scarlet) = scarlet. create (EchoService::class.java) 
     
    private fun provideScarlet(
 client: OkHttpClient,
 lifecycle: Lifecycle,
        streamAdapterFactory: StreamAdapter.Factory,
 ) =
 Scarlet.Builder()
            .webSocketFactory(client.newWebSocketFactory(ECHO_URL))
            .lifecycle(lifecycle)
            .addStreamAdapterFactory(streamAdapterFactory)
 .build() 
             
    private fun provideOkhttp() =
        OkHttpClient.Builder()
            .addInterceptor(HttpLoggingInterceptor().setLevel(HttpLoggingInterceptor. Level .BASIC))
 .build() 
             
    private fun provideLifeCycle() = AndroidLifecycle.ofApplicationForeground(application) 
     
    private fun provideStreamAdapterFactory() = RxJava2StreamAdapterFactory()
 ...
 }

test

Now we can test the code by sending something to the WebSocket. The WebSocket will send the same messages as they were received.

 class MainActivity : AppCompatActivity() {
 ... 
   
    private fun sendMessage(message: String) {
        webSocketService.sendMessage(message)
        adapter.addItem(Message(message = message, isFromSender = true ))
 } 
     
    @SuppressLint( "CheckResult" )
    private fun observeConnection() {
        webSocketService.observeConnection()
            .observeOn(AndroidSchedulers.mainThread())
            .subscribe({ response ->
                Log.d( "observeConnection" , response.toString())
                onReceiveResponseConnection(response)
 }, { error ->
                Log.e( "observeConnection" , error.message.orEmpty())
                Snackbar.make(binding.root, error.message.orEmpty(), Snackbar.LENGTH_SHORT).show()
 })
 } 
 
    private fun onReceiveResponseConnection(response: WebSocket.Event) {
 when (response) {
 is OnConnectionOpened<*> -> changeToolbarTitle( "connection opened" )
 is OnConnectionClosed -> changeToolbarTitle( "connection closed" )
 is OnConnectionClosing -> changeToolbarTitle( "closing connection.." )
 is OnConnectionFailed -> changeToolbarTitle( "connection failed" )
 is OnMessageReceived -> handleOnMessageReceived(response.message)
 }
 } 
 
    private fun handleOnMessageReceived(message: MessageScarlet) {
        adapter.addItem(Message(message.toValue(), false ))
        binding.etMessage.setText( "" )
 } 
 
    private fun MessageScarlet.toValue(): String {
 return   when (this) {
 is Text -> value
 is Bytes -> value.toString()
 }
 } 
     
 ...
 }

Summarize

That’s all for this article. Scarlet is a great library that gives you access to implementing WebSockets in your Android app. You can easily set up Scarlet for your app with the tutorial above, especially if you’re already familiar with tools like Retrofit.