Computación Diversa: 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: Javascript, Página web, vuejs, web, websocket