Kotlin Android WebSocket Ejemplos

WebSocket es un protocolo que permite abrir una sesión de comunicación interactiva bidireccional entre el cliente y el servidor. Proporciona un canal de comunicación full-duplex a través de una única conexión TCP.

Este protocolo define una API que establece una conexión "socket" entre un navegador web y un servidor. En lugar de un largo sondeo para obtener actualizaciones, por ejemplo, de una aplicación de livescore, se pueden utilizar websockets para crear una conexión persistente entre el cliente y el servidor. De este modo, la aplicación se actualiza automáticamente cada vez que hay nuevas actualizaciones disponibles.

Esto evita la sobrecarga de enviar una petición HTTP adicional para comprobar si hay nuevas actualizaciones.

Así, el cliente y el servidor sólo necesitan completar un apretón de manos, y se puede crear una conexión persistente directamente entre los dos, y llevar a cabo una transferencia de datos bidireccional.

Websocket utiliza el mismo puerto TCP que HTTP, lo que permite eludir la mayoría de las restricciones de los cortafuegos. Por defecto, el protocolo Websocket utiliza el puerto 80; cuando se ejecuta sobre TLS, se utiliza por defecto el puerto 443. Su identificador de protocolo es ws. Si se utiliza wss para el cifrado, la dirección web del servidor es la URL, como por ejemplo

ws://www.example.com/
wss://www.example.com/

Ventajas de Websocket

Menos sobrecarga de control: Una vez creada la conexión, cuando se intercambian datos entre el servidor y el cliente, la cabecera del paquete de datos utilizada para el control del protocolo es relativamente pequeña
Mayor rendimiento en tiempo real: Dado que el protocolo es full-duplex, el servidor puede enviar activamente datos al cliente en cualquier momento
Mantener el estado de la conexión: A diferencia de HTTP, Websocket necesita crear primero una conexión, lo que lo convierte en un protocolo con estado, y luego se puede omitir parte de la información de estado al comunicarse. La petición HTTP puede necesitar llevar información de estado en cada petición (como la autentificación de la identidad, etc.)
Mejor soporte binario: Websocket define tramas binarias, que pueden manejar contenido binario más fácilmente que HTTP
Mejor efecto de compresión: En comparación con la compresión HTTP, Websocket puede utilizar el contexto del contenido anterior con un soporte de extensión adecuado, y puede mejorar significativamente la tasa de compresión cuando se transfieren datos similares.

Ejemplo 1: Ejemplo de Android WebSockets

En este tutorial aprenderás a usar websockets usando OkHTTP. La url(ws://echo.websocket.org) se utiliza para configurar websockets.

Paso 1: Instalar Okhttp

En tu build.gradle a nivel de aplicación añade la siguiente declaración de implementación:

implementation 'com.squareup.okhttp3:okhttp:3.6.0'

Paso 2: Añadir el permiso de Internet

En tu manifiesto android, añade el permiso de internet de la siguiente manera:

    <uses-permission android:name="android.permission.INTERNET"/>

Paso 3: Diseñar el layout

Crea un layout con un textview y un botón. El textview mostrará el resultado del servidor. El botón por otro lado iniciará la conexión:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/buttonSend"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="SEND"
        android:layout_marginTop="60dp"
        android:textSize="20sp"/>
    <TextView
        android:id="@+id/textResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/buttonSend"
        android:layout_centerHorizontal="true"
        android:textSize="18sp"
        android:layout_marginTop="40dp"/>
</RelativeLayout>

Paso 4: Escribir el código

Comience por crear un método de ayuda para imprimir el resultado del servidor en un textview. Esto se hace en el hilo de la UI:

    private void print(final String message) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                textResult.setText(textResult.getText().toString() + "\n" + message);
            }
        });
    }

Cree un EchoWebListener como clase interna. Esta clase extenderá el WebSocketListener:

    private final class EchoWebSocketListener extends WebSocketListener {
        private static final int CLOSE_STATUS = 1000;
        @Override
        public void onOpen(WebSocket webSocket, Response response) {
            webSocket.send("What's up ?");
            webSocket.send(ByteString.decodeHex("abcd"));
            webSocket.close(CLOSE_STATUS, "Socket Closed !!");
        }
        @Override
        public void onMessage(WebSocket webSocket, String message) {
            print("Receive Message: " + message);
        }
        @Override
        public void onMessage(WebSocket webSocket, ByteString bytes) {
            print("Receive Bytes : " + bytes.hex());
        }
        @Override
        public void onClosing(WebSocket webSocket, int code, String reason) {
            webSocket.close(CLOSE_STATUS, null);
            print("Closing Socket : " + code + " / " + reason);
        }
        @Override
        public void onFailure(WebSocket webSocket, Throwable throwable, Response response) {
            print("Error : " + throwable.getMessage());
        }
    }

El siguiente método iniciará la conexión del websocket. La clase OkHTTP Request es instanciada y la url es pasada al método url(). Luego se instanciará un EchoWebSocketListener y se pasará tanto el objeto Request como la instancia EchoWebListener al método newWebSocket().

Este es el método completo:

    private void start() {
        Request request = new Request.Builder().url("ws://echo.websocket.org").build();
        EchoWebSocketListener listener = new EchoWebSocketListener();
        WebSocket webSocket = mClient.newWebSocket(request, listener);
        mClient.dispatcher().executorService().shutdown();
    }

Aquí está el código completo:

MainActivity.java


import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;
import okhttp3.WebSocket;
import okhttp3.WebSocketListener;
import okio.ByteString;

public class MainActivity extends AppCompatActivity {

    private Button buttonSend;
    private TextView textResult;
    private OkHttpClient mClient;

    private final class EchoWebSocketListener extends WebSocketListener {
        private static final int CLOSE_STATUS = 1000;
        @Override
        public void onOpen(WebSocket webSocket, Response response) {
            webSocket.send("What's up ?");
            webSocket.send(ByteString.decodeHex("abcd"));
            webSocket.close(CLOSE_STATUS, "Socket Closed !!");
        }
        @Override
        public void onMessage(WebSocket webSocket, String message) {
            print("Receive Message: " + message);
        }
        @Override
        public void onMessage(WebSocket webSocket, ByteString bytes) {
            print("Receive Bytes : " + bytes.hex());
        }
        @Override
        public void onClosing(WebSocket webSocket, int code, String reason) {
            webSocket.close(CLOSE_STATUS, null);
            print("Closing Socket : " + code + " / " + reason);
        }
        @Override
        public void onFailure(WebSocket webSocket, Throwable throwable, Response response) {
            print("Error : " + throwable.getMessage());
        }
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        buttonSend = (Button) findViewById(R.id.buttonSend);
        textResult = (TextView) findViewById(R.id.textResult);
        mClient = new OkHttpClient();
        buttonSend.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                start();
            }
        });
    }
    private void start() {
        Request request = new Request.Builder().url("ws://echo.websocket.org").build();
        EchoWebSocketListener listener = new EchoWebSocketListener();
        WebSocket webSocket = mClient.newWebSocket(request, listener);
        mClient.dispatcher().executorService().shutdown();
    }
    private void print(final String message) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                textResult.setText(textResult.getText().toString() + "\n" + message);
            }
        });
    }
}

Referencia

A continuación se muestra el enlace de descarga.

No.	Enlace
1.	Descargar código
2.	Seguir autor del código

Ejemplo 2: Kotlin Android Websocket Ejemplo con Okhttp

Aquí tenemos otro ejemplo de websocket androide pero esta vez escrito en Kotlin. Sigue utilizando OkHttp como librería de red.

Paso 1: Crear el proyecto

Comienza creando un proyecto vacío de Android Studio.

Paso 2: Dependencias

Instalaremos dos librerías OkHttp:

    implementation 'com.squareup.okhttp3:okhttp:3.12.6'
    implementation 'com.squareup.okhttp3:mockwebserver:3.12.1'

Añade estas en tu app/build.gradle y sincroniza.

Paso 3: Diseño

En el diseño de tu MainActivity añade varios botones y un edittext como se muestra a continuación:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/connectBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="20dp"
        android:layout_marginRight="20dp"
        android : text = " Connect "
        app:layout_constraintRight_toLeftOf="@+id/clientSendBtn"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/clientSendBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android : text = " Send from the client "
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/closeConnectionBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android : text = " Client is closed "
        app:layout_constraintLeft_toRightOf="@+id/clientSendBtn"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/contentEt"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorGray"
        android:enabled="false"
        android:gravity="top"
        android:padding="5dp"
        android:textColor="@color/colorWhite"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/clientSendBtn"
        app:layout_constraintVertical_weight="1" />

</androidx.constraintlayout.widget.ConstraintLayout>

Paso 4: Crear un Message Listener

Será una interfaz con varias llamadas de retorno en función del estado de la conexión, por ejemplo cuando se conecta con éxito, se cierra, falla, etc:

MessageListener.kt

interface MessageListener {
    fun  onConnectSuccess () // successfully connected
    fun  onConnectFailed () // connection failed
    fun  onClose () // close
    fun onMessage(text: String?)
}

Paso 5: Crear un gestor de Websocket

Crea un WebSocketManager.kt y empieza añadiendo las siguientes importaciones:

import  android.util.Log
import okhttp3.*
import okio.ByteString
import  java.util.concurrent.TimeUnit

Crea una clase de objeto WebSocketManager con los siguientes campos privados;

object  WebSocketManager {
    private val TAG = WebSocketManager::class.java.simpleName
    private  const  val  MAX_NUM  =  5  // Maximum number of reconnections
    private  const  val  MILLIS  =  5000  // Reconnection interval, milliseconds
    private lateinit var client: OkHttpClient
    private lateinit var request: Request
    private lateinit var messageListener: MessageListener
    private lateinit var mWebSocket: WebSocket
    private var isConnect = false
    private var connectNum = 0

Luego la función init, pasa la url así como el MessageListener. Aquí se inicializa el cliente OkHTTP:

    fun init(url: String, _messageListener: MessageListener) {
        client = OkHttpClient.Builder()
            .writeTimeout(5, TimeUnit.SECONDS)
            .readTimeout(5, TimeUnit.SECONDS)
            .connectTimeout(10, TimeUnit.SECONDS)
            .build()
        request = Request.Builder().url(url).build()
        messageListener = _messageListener
    }

Ahora crea una función para conectar:`

    fun connect() {
        if (isConnect()) {
            Log.i(TAG, "web socket connected")
            return
        }
        client.newWebSocket(request, createListener())
    }

También crea una función para reconectarse:

    fun reconnect() {
        if (connectNum <= MAX_NUM) {
            try {
                Thread.sleep(MILLIS.toLong())
                connect()
                connectNum++
            } catch (e: InterruptedException) {
                e.printStackTrace ()
            }
        } else {
            Log.i(
                TAG,
                "reconnect over $MAX_NUM,please check url or network"
            )
        }
    }

También tendremos funciones para enviar un mensaje:

    fun sendMessage(text: String): Boolean {
        return if (!isConnect()) false else mWebSocket.send(text)
    }
    fun sendMessage(byteString: ByteString): Boolean {
        return if (!isConnect()) false else mWebSocket.send(byteString)
    }

Y una función para cerrar la conexión:

    fun close() {
        if (isConnect()) {
            mWebSocket.cancel()
            mWebSocket.close( 1001 , "The client actively closes the connection " )
        }
    }

Aquí está el código completo:

WebSocketManager.kt

import  android.util.Log
import okhttp3.*
import okio.ByteString
import  java.util.concurrent.TimeUnit

object  WebSocketManager {
    private val TAG = WebSocketManager::class.java.simpleName
    private  const  val  MAX_NUM  =  5  // Maximum number of reconnections
    private  const  val  MILLIS  =  5000  // Reconnection interval, milliseconds
    private lateinit var client: OkHttpClient
    private lateinit var request: Request
    private lateinit var messageListener: MessageListener
    private lateinit var mWebSocket: WebSocket
    private var isConnect = false
    private var connectNum = 0
    fun init(url: String, _messageListener: MessageListener) {
        client = OkHttpClient.Builder()
            .writeTimeout(5, TimeUnit.SECONDS)
            .readTimeout(5, TimeUnit.SECONDS)
            .connectTimeout(10, TimeUnit.SECONDS)
            .build()
        request = Request.Builder().url(url).build()
        messageListener = _messageListener
    }

    /**
     * connect
     */
    fun connect() {
        if (isConnect()) {
            Log.i(TAG, "web socket connected")
            return
        }
        client.newWebSocket(request, createListener())
    }

    /**
     * Reconnection
     */
    fun reconnect() {
        if (connectNum <= MAX_NUM) {
            try {
                Thread.sleep(MILLIS.toLong())
                connect()
                connectNum++
            } catch (e: InterruptedException) {
                e.printStackTrace ()
            }
        } else {
            Log.i(
                TAG,
                "reconnect over $MAX_NUM,please check url or network"
            )
        }
    }

    /**
     * Whether to connect
     */
    fun isConnect(): Boolean {
        return isConnect
    }

    /**
     * send messages
     *
     * @param text string
     * @return boolean
     */
    fun sendMessage(text: String): Boolean {
        return if (!isConnect()) false else mWebSocket.send(text)
    }

    /**
     * send messages
     *
     * @param byteString character set
     * @return boolean
     */
    fun sendMessage(byteString: ByteString): Boolean {
        return if (!isConnect()) false else mWebSocket.send(byteString)
    }

    /**
     * Close connection
     */
    fun close() {
        if (isConnect()) {
            mWebSocket.cancel()
            mWebSocket.close( 1001 , "The client actively closes the connection " )
        }
    }

    private fun createListener(): WebSocketListener {
        return object : WebSocketListener() {
            override fun onOpen(
                webSocket: WebSocket,
                response: Response
            ) {
                super.onOpen(webSocket, response)
                Log.d(TAG, "open:$response")
                mWebSocket = webSocket
                isConnect = response.code() == 101
                if (!isConnect) {
                    reconnect()
                } else {
                    Log.i(TAG, "connect success.")
                    messageListener.onConnectSuccess()
                }
            }

            override fun onMessage(webSocket: WebSocket, text: String) {
                super.onMessage(webSocket, text)
                messageListener.onMessage(text)
            }

            override fun onMessage(webSocket: WebSocket, bytes: ByteString) {
                super.onMessage(webSocket, bytes)
                messageListener.onMessage(bytes.base64())
            }

            override fun onClosing(
                webSocket: WebSocket,
                code: Int,
                reason: String
            ) {
                super.onClosing(webSocket, code, reason)
                isConnect = false
                messageListener.onClose()
            }

            override fun onClosed(
                webSocket: WebSocket,
                code: Int,
                reason: String
            ) {
                super.onClosed(webSocket, code, reason)
                isConnect = false
                messageListener.onClose()
            }

            override fun onFailure(
                webSocket: WebSocket,
                t: Throwable,
                response: Response?
            ) {
                super.onFailure(webSocket, t, response)
                if (response != null) {
                    Log.i(
                        TAG,
                        "connect failed：" + response.message()
                    )
                }
                Log.i(
                    TAG,
                    "connect failed throwable：" + t.message
                )
                isConnect = false
                messageListener.onConnectFailed()
                reconnect()
            }
        }
    }
}

Paso 6: Escribir el código de la MainActivity

Aquí está el código completo para la MainActivity:

MainActivity.kt

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
import kotlin.concurrent.thread

class MainActivity : AppCompatActivity(), MessageListener {
    private val serverUrl = "ws://192.168.18.145:8086/socketServer/abc"
    override fun onCreate(savedInstanceState: Bundle?) {
        super .onCreate (savedInstanceState)
        setContentView(R.layout.activity_main)
        WebSocketManager.init(serverUrl, this)
        connectBtn.setOnClickListener {
            thread {
                kotlin.run {
                    WebSocketManager.connect()
                }
            }
        }
        clientSendBtn.setOnClickListener {
            if ( WebSocketManager .sendMessage( " Client send " )) {
                addText( " Send from the client \n " )
            }
        }
        closeConnectionBtn.setOnClickListener {
            WebSocketManager.close()
        }
    }

    override fun onConnectSuccess() {
        addText( " Connected successfully \n " )
    }

    override fun onConnectFailed() {
        addText( " Connection failed \n " )
    }

    override fun onClose() {
        addText( " Closed successfully \n " )
    }

    override fun onMessage(text: String?) {
        addText( " Receive message: $text \n " )
    }

    private fun addText(text: String?) {
        runOnUiThread {
            contentEt.text.append(text)
        }
    }

    override fun onDestroy() {
        super .onDestroy ()
        WebSocketManager.close()
    }
}

Ejecutar

Copia el código o descárgalo en el siguiente enlace, construye y ejecuta.

Referencia

Aquí están los enlaces de referencia:

Número	Enlace
1.	Descargar Ejemplo
2.	Seguir autor del código

Categorizado en:

Spanish TCP

Kotlin Android WebSocket Ejemplos

Ventajas de Websocket

Ejemplo 1: Ejemplo de Android WebSockets

Paso 1: Instalar Okhttp

Paso 2: Añadir el permiso de Internet

Paso 3: Diseñar el layout

Paso 4: Escribir el código

Referencia

Ejemplo 2: Kotlin Android Websocket Ejemplo con Okhttp

Paso 1: Crear el proyecto

Paso 2: Dependencias

Paso 3: Diseño

Paso 4: Crear un Message Listener

Paso 5: Crear un gestor de Websocket

Paso 6: Escribir el código de la MainActivity

Ejecutar

Referencia

Oclemy

Otras Historias

Kotlin Android – Ejemplo de Fragmentos

Android ContentProvider Ejemplo

Presiona ESC para cerrar

O revisa nuestras Categorías más Populares...

Ventajas de Websocket

Ejemplo 1: Ejemplo de Android WebSockets

Paso 1: Instalar Okhttp

Paso 2: Añadir el permiso de Internet

Paso 3: Diseñar el layout

Paso 4: Escribir el código

Referencia

Ejemplo 2: Kotlin Android Websocket Ejemplo con Okhttp

Paso 1: Crear el proyecto

Paso 2: Dependencias

Paso 3: Diseño

Paso 4: Crear un Message Listener

Paso 5: Crear un gestor de Websocket

Paso 6: Escribir el código de la MainActivity

Ejecutar

Referencia

Oclemy

Artículos Relacionados

Ejemplos de Account y AccountManager en Android

Kotlin Android Nested RecyclerView Ejemplo

Kotlin Android StateFlow Ejemplo

Kotlin Android Text To Speech y Speech To Text Ejemplo

Otras Historias

Kotlin Android – Ejemplo de Fragmentos

Android ContentProvider Ejemplo