martes, 12 de noviembre de 2019

Vuejs websocket


Usando vuejs podemos crear una conexión a cualquier websocket de una forma fácil y rápida.

Para nuestro ejemplo vamos a usar un WebSocket gratuito que podemos obtener en este link http://www.websocket.org/echo.html

Lo primero que vamos hacer es una simple página web en html. Todo lo necesario para comunicarnos con el websocket lo tendremos en esta página.

Ahora en nuestra página web tenemos que importar la referencia de vuejs   <script src="https://cdn.jsdelivr.net/npm/vue"></script>

Esta referencia la vamos a agregar en el head de la página web. 


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Web Socket Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <div id="app">
        <input v-model="message"  />
        <button v-on:click="sendMessage()">Send Message</button>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                url: '',
                socket: WebSocket,
                message:''
            },
            created: function () {
                this.url = "ws://echo.websocket.org";
                this.connect();
                console.log(this.url);
            },
            methods: {
                connect: function () {
                    this.socket = new WebSocket(this.url);
                    this.socket.onopen = () => {
                        this.socket.onmessage = ({ data }) => {
                            console.log(data);
                        };
                    };
                },
                disconnect: function () {
                    console.log("socket close");
                    this.socket.close();
                },
                sendMessage: function () {
                    this.socket.send(this.message);
                }
            }
        });
    </script>
</body>
</html>

Primero crearemos un div con el id app ya que este será el nombre de nuestra app. Dentro del div vamos a tener un campo de texto que funcionara para escribir los mensajes que le queremos pasar al servidor. Junto con un botón para disparar el evento de enviar mensajes.

Lo siguiente es hacer un bloque de script para nuestro código. Declaramos nuestra app al inicio con vuejs. Podemos agregar algunas variables que necesitamos como el URL, el Socket con el que nos vamos a conectar y el message que vamos a enviar al servidor.

En el método created agregamos el URL y llamamos al método de connect para inicializar nuestro websocket.

Con el websocket listo ya estamos preparados para enviar y recibir mensajes. Ahora la función sendMessage se encarga de llamar la función send del objeto socket para poder enviar esta información al servidor.

Utilizando la función onmessage vamos a poder recibir cualquier cosa que el servidor nos este enviado como respuesta.

Finalmente tenemos una función disconnect que no estamos llamado, pero nos permite cerrar el websocket.

Ejemplo.

Etiquetas: , , , ,

entrada de JC @ noviembre 12, 2019   0 comentarios

jueves, 7 de noviembre de 2019

JQuery WebSocket



Con Jquery podemos usar WebSockets para interactuar con el servidor usando unas pocas líneas de código.

Para nuestro ejemplo vamos a usar un WebSocket gratuito que podemos obtener en este link http://www.websocket.org/echo.html

Para iniciar lo que tenemos que hacer es crear una página nueva de html. En esta pagina vamos a desarrollar nuestro código.

Con la pagina de html lista el siguiente paso es agregar la referencia a la librería de query. Podemos usar esta sin ningún problema http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
En el head vamos a agregar la referencia de jquery. Que nos permitirá hacer la conexión al websocket.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>WebSocket Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>

    <input type="text" id="message" />
    <button onclick="sendMessage()">Send Message</button>

    <script>
         var socket = new WebSocket("ws://echo.websocket.org");//we call the websocket service
        $(document).ready(function () {
           //this function will open the websocket 
            socket.onopen = function () {
                console.log("Server connected");

            }

            socket.onmessage = function (messageFromServer) {
                console.log(messageFromServer.data);//this will get the server message everytime it replays back.
            }
        });

        function sendMessage() {
            socket.send($("#message").val());//we get the input message and send it the server
        }
    </script>
</body>
</html>

Ahora vamos a crear una sección de script para agregar un document ready en el cual se va a inicializar la conexión del websocket. El cual creamos en la línea antes del document ready. El método onopen nos mostrara en el momento que estemos conectados.

Lo que tenemos que hacer ahora es crear una función para esperar los mensajes del servidor. Para esto usamos la función onmessage. Con esto podemos leer los resultados del servidor.

Finalmente, vamos a crear una función para poder enviar mensajes al servidor. Usando la función send del objeto socket que construimos al inicio. De esta manera tenemos listo nuestra pequeña aplicación.

 ejemplo

Etiquetas: , , ,

entrada de JC @ noviembre 07, 2019   0 comentarios