Sockets.vue 2.01 KB
Newer Older
1 2 3 4
<template>
    <div>
        <p v-if="isConnected">We're connected to the server!</p>
        <p v-if="!isConnected">We're not connected yet...</p>
5 6 7 8 9 10 11 12

        <div v-if="socketMessages.length >= 1">
            <p>Messages from server"</p>
            <ul id="messages">
                <li v-for="message in socketMessages.slice(-20)" :key="message">
                    {{ message }}
                </li>
            </ul>
PLN (Algolia) committed
13
        </div>
14

15 16 17 18 19 20 21 22 23 24 25
        <button @click="pingServer()">Ping Server</button>
        <button @click="logOn()">LogOn</button>
        <button @click="logOff()">LogOff</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isConnected: false,
26
                socketMessages: []
27 28 29 30 31 32 33 34 35 36 37 38
            }
        },

        sockets: {
            connect() {
                // Fired when the socket connects.
                this.isConnected = true;
                console.log("login");
            },
            disconnect() {
                this.isConnected = false;
                console.log("logoff");
39
                this.socketMessages = [];
40 41 42
            },
            // Fired when the server sends something on the "messageChannel" channel.
            messageChannel(data) {
43
                this.socketMessages.push(data);
44 45 46 47 48 49 50
                console.log("Message received:", data, "!");
            }
        },

        methods: {
            pingServer() {
                // Send the "pingServer" event to the server.
PLN (Algolia) committed
51
                if (this.isConnected) {
52
                    this.sendMessage("Ping!");
PLN (Algolia) committed
53 54
                    console.log("Ping sent!");
                }
55
            },
56 57 58 59 60
            sendMessage(message) {
                this.$socket.emit('pingServer', message);
                console.log("Message sent:", message);

            },
61 62 63 64 65
            logOn() {
                this.$socket.onconnect();
            },
            logOff() {
                this.$socket.ondisconnect();
66
                this.socketMessage = [];
67 68 69 70
            }
        }
    }
</script>