Chat en la aplicación de Yii2 utilizando WebSocket

-

 1.-  Añadir en el composer.json:

"consik/yii2-websocket": "^1.0"

2.- Ejecutar el composer update en el cmd:

composer update --prefer-dist

WebSockets es una conexión bidereccional del navegador web  con el servidor. Una vez que la conexión de Websocket esta establecida se mantiene abierta hasta que el cliente o el servidor decide cerrarla. Con esta conexión abierta el cliente o el servidor puede enviar un mensaje en cualquier momento, esto hace que la programación web se vuelva enteramente conducida por eventos, no solo cuando el usuario la inicie.

Ratchet es una librería de PHP WebSocket  cuyos componentes pueden hacer que la aplicación soporte WebSockets en el lado del servidor.

Con este widget podemos utilizar la librería de Ratchet y hacer nuestro chat asi como graficos en tiempo real etc.

3.- Revisar la documentación:

https://github.com/consik/yii2-websocket

http://socketo.me/

4.- Vamos a crear una carpeta que le vamos a llamar daemons (siguiendo el ejemplo que el hace en la documentación), en este caso yo la voy a crear entro del backend y dentro vamos a crear el archivo de chat ChatServer.php :

<?php

namespace backend\daemons;


use consik\yii2websocket\events\WSClientEvent;

use consik\yii2websocket\WebSocketServer;

use Ratchet\ConnectionInterface;

use Yii;

class ChatServer extends WebSocketServer

{


    public function init()

    {

        parent::init();


        $this->on(self::EVENT_CLIENT_CONNECTED, function(WSClientEvent $e) {

            $e->client->name = null;

        });

    }



    protected function getCommand(ConnectionInterface $from, $msg)

    {

        $request = json_decode($msg, true);

        return !empty($request['action']) ? $request['action'] : parent::getCommand($from, $msg);

    }


    public function commandChat(ConnectionInterface $client, $msg  )

    {

        $request = json_decode($msg, true);

        $result = ['message' => ''];


        if (!$client->name) {

            $result['message'] = Yii::t('app', 'You need to be logged for chatting');

        } elseif (!empty($request['message']) && $message = trim($request['message']) ) {

            foreach ($this->clients as $chatClient) {

                $chatClient->send( json_encode([

                    'type' => 'chat',

                    'from' => $client->name,

                    'date' => date('Y-m-d H:i:s'),

                    'message' => $message

                ]) );

            }

        } else {

            $result['message'] =Yii::t('app', 'Enter a message');

        }


        $client->send( json_encode($result) );

    }


    public function commandSetName(ConnectionInterface $client, $msg)

    {

        $request = json_decode($msg, true);

        $result = ['message' =>Yii::t('app', 'User updated')];


        if (!empty($request['name']) && $name = trim($request['name'])) {

            $usernameFree = true;

            foreach ($this->clients as $chatClient) {

                if ($chatClient != $client && $chatClient->name == $name) {

                    $result['message'] = Yii::t('app', 'This user is logged in other computer and is chatting, you can´t use it');

                    $usernameFree = false;

                    break;

                }

            }


            if ($usernameFree) {

                $client->name = $name;

            }

        } else {

            $result['message'] = Yii::t('app', 'Invalid username');

        }


        $client->send( json_encode($result) );

    }


}


5.- De ahí vamos a ir a la carpeta de console/controllers y vamos a crear un archivo ServerController.php:

(La aplicación de console de Yii2 principalmente se usa para crear tareas de mantenimientos, esto nos ejecuta procesos desde el cmd, que desde el servidor con tareas programadas podemos ejecutar, en este caso la vamos a utilizar para que nos inicie la librería de ratchet que es la que permite el funcionamiento del websocket, básicamente que está allí escuchando hasta que ocurra algun evento, así lo entiendo yo)


<?php

namespace console\controllers;


use backend\daemons\ChatServer;

use consik\yii2websocket\WebSocketServer;

use yii\console\Controller;


class ServerController extends Controller

{

    public function actionStart($port = null)

    {

        $server = new ChatServer();

        if ($port) {

            $server->port = $port;

        }

        $server->start();

    }

}



5.1 Añadir en el main de console/config en components:


  'i18n' => [

            'translations' => [

               'app' => [

                    'class' => 'yii\i18n\PhpMessageSource',

                    'basePath' => '@common/messages',

                    'sourceLanguage' => 'en-US',

                ],

                'yii' => [

                    'class' => 'yii\i18n\PhpMessageSource',

                    'basePath' => '@common/messages',

                    'sourceLanguage' => 'en-US',

                ],

                'yii2mod.rbac' => [

                    'class' => 'yii\i18n\PhpMessageSource',

                    'basePath' => '@common/messages',

                    'sourceLanguage' => 'en-US',

                ],

                

            ],

        ],



6.- Vamos a la carpeta del proyecto y abrimos el cmd y ejecutamos:

Esto tenemos que programarlo en el servidor para que siempre se este ejecutando y asi la parte del servidor de  nuestro websocket se inicia

php yii server/start


7.- Vamos a crear una vista en backend/views/site chat.php:


<div class="card card-primary card-outline direct-chat direct-chat-primary">

    <div class="card-header">

    <h3 class="card-title"><?= Yii::t('app', 'Chat') ?></h3>


    <div class="card-tools">

      <button type="button" class="btn btn-tool" data-card-widget="collapse">

          <i class="fas fa-minus"></i>

      </button>

    </div>

    </div>

    <!-- /.card-header -->

    <div class="card-body">

    <!-- Conversations are loaded here -->

    <div class="direct-chat-messages" id="chat">

        <!-- /.direct-chat-msg -->

    </div>

      <!-- /.direct-chat-pane -->

    </div>

    <!-- /.card-body -->

    <div class="card-footer">

      <div class="input-group">

        <input type="text" id="message" name="message" placeholder="<?= Yii::t('app', 'Type Message ...') ?>" class="form-control">

        <span class="input-group-append">

          <button  id="btnSend" class="btn btn-primary"><?= Yii::t('app', 'Send') ?></button>

        </span>

      </div>

    </div>

    <!-- /.card-footer-->

</div>

<?php $this->registerJs('

    $(function() {

        var chat = new WebSocket("ws://localhost:8080");

        chat.onmessage = function(e) {

            var response = JSON.parse(e.data);

            if (response.type && response.type == "chat") {

                if(response.from == "'.Yii::$app->user->identity->username .'" ){

                      

                    $("#chat").append("<div class=\"direct-chat-msg\"><div class=\"direct-chat-infos clearfix\"><span class=\"direct-chat-name float-left\">"+response.from+" </span><span class=\"direct-chat-timestamp float-right\">"+response.date+"</span></div><i class=\"direct-chat-img fas fa-user-circle\" style=\"font-size:40px\"></i><div class=\"direct-chat-text\">"+response.message+"</div></div>");

                         

                }else{

                    $("#chat").append("<div class=\"direct-chat-msg right\"><div class=\"direct-chat-infos clearfix\"><span class=\"direct-chat-name float-right\">"+response.from+" </span><span class=\"direct-chat-timestamp float-left\">"+response.date+"</span></div><i class=\"direct-chat-img fas fa-user-circle\" style=\"font-size:40px\"></i><div class=\"direct-chat-text\">"+response.message+"</div></div>");

                }


            } else if (response.message) {

                console.log(response.message);

            }

        };

        chat.onopen = function(e) {

            console.log("Connection established! Please, set your username.");

            chat.send( JSON.stringify({"action" : "setName", "name" : "'. Yii::$app->user->identity->username .'"}) );

        };

        $("#btnSend").click(function() {

            if ($("#message").val()) {

                chat.send( JSON.stringify({"action" : "chat", "message" : $("#message").val()}) );

                $("#message").val("");

                console.log(chat);

            } else {

                alert("'.Yii::t('app', 'Enter the message').'");

            }

        });


           

       

        

        

    })

', \yii\web\View::POS_END); ?>


8.- Vamos a crear el actionChat en el SiteController.php:


public function actionChat()

{

    return $this->render('chat');

}


8.1.- Sustituir el behavior del site controller o añadir la actionchat


   public function behaviors()

    {

        return [

            'verbs' => [

                'class' => VerbFilter::className(),

                'actions' => [

                    'delete' => ['POST'],

                ],

            ],

        ];

    }


    public function behaviors()

    {

        return [

            'access' => [

                'class' => AccessControl::className(),

                'rules' => [

                    [

                        'actions' => ['login', 'error'],

                        'allow' => true,

                    ],

                    [

                        'actions' => ['logout', 'index','chat'],

                        'allow' => true,

                        'roles' => ['@'],

                    ],

                ],

            ],

            'verbs' => [

                'class' => VerbFilter::className(),

                'actions' => [

                    'logout' => ['post'],

                ],

            ],

        ];

    }


9.- Revisar en site/chat


10.- Abrir 2 ventanas del navegador y revisar con usuarios diferentes











Comentarios

  1. CarDek11 de enero de 2021, 23:08

    He visto todos tus videos y debo confesar que son excelentes todos. Eres muy organizada y domina este framework, que para mí es uno de los mejores, con un talento especial. He visto muchos videos de yii2 pero ninguno se compara con estos. Gracias por compartir tus conocimientos y espero nos siga brindando explicaciones con ese maravilloso talento. Felicitaciones.

    ResponderEliminar
  2. Aprendiendo Yii212 de enero de 2021, 20:50

    Muchas gracias por tu comentario, espero poder hacer más videos y que te sigan pareciendo igual de buenos.

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

AdminLTE3 integración Yii2

-
Imagen
 Aquí les muestro como hacer la integración con otro widget (extensión) que permite la integración con AdminLTE3: AdminLTE3 es una plantilla de administración, en una entrada anterior les mostré como instalar el AdminLTE2, esta es una versión superior, utiliza Bootstrap4, lo cual está muy bueno, pero hay que tener en cuenta que una que otra extensión nos puede fallar si no está con Bootstrap4. También los css tienen uno que otro cambio, entonces si vemos que el sistema se comporta con tamaños de fuentes diferentes probablemente sea alguna incompatibilidad. Importante revisar la documentación de Bootstrap 4 para que no nos coja de sorpresa, sobre todo si queremos migrar:  https://getbootstrap.com/docs/4.4/getting-started/introduction/ 1.- Explorar la plantilla de adminlte3 para ver todo lo que tiene que ofrecer: https://adminlte.io/themes/v3/index3.html Vamos a ver que el AdminLTE3 varía bastante en cuanto a la versión 2, los bordes más redondeados, una gama de colores mucho mayor, mas
Leer más

RBAC Yii2 utilizando la extensión "yii2mod/yii2-rbac": "*"

-
Les muestro como hacer la configuración del módulo de RBAC en Yii2 utilizando una extensión que nos va a facilitar mucho la creación de los permisos y roles.  1.- Colocar en el composer.json      "yii2mod/yii2-rbac": "*" 2.- Ejecutar en el cmd de la carpeta del proyecto      composer update --prefer-dist  3.- Añadir en el common/config/main.php dentro de modules         'rbac' => [             'class' => 'yii2mod\rbac\Module',         ], 4.- En el common/config/main.php dentro de components:           'authManager' => [             'class' => 'yii\rbac\DbManager',             'defaultRoles' => ['guest', 'user'],         ],   5.-Ejecutar en el cmd de la carpeta del proyecto: php yii migrate/up --migrationPath=@yii/rbac/migrations ** Este código nos va a añadir las tablas a la base de datos, importante no tener creada las tablas auth_item auth_item_child auth_assignment auth_rule 6.
Leer más

Instalación de Yii2 (Windows)

-
Imagen
Yii2 es un framework de PHP que nos facilita el proceso de desarrollo, en esta entrada pretendo explicarles como comenzar a utilizarlo. Con este Framework puedes comenzar a fabricar aplicaciones de todos los tamaños, en este caso explico como instalar la avanzada que realmente la prefiero pues ya me trae la creación de usuarios desarrollada y además me parece mucho más organizada para colocar el código, trae separado el frontend del backend y una carpeta common para los archivos comunes. Con unos sencillos pasos podemos instalar el proyecto de Yii2 en Windows: 1.- Instala composer en tu computadora, te lo puedes descargar  https://getcomposer.org/   El composer es una herramienta (un sistema de gestión de paquetes para programar en PHP) que nos va a permitir instalar todas o casi todas las extensiones y librerías de Yii2, es fundamental para utilizar Yii2. La instalación es bien fácil en Windows solo tienes que descargarte y seguir los pasos que te aparecen en el instalador, prácticame
Leer más