Skip to content

M
Menteur
Unverified Commit fe4f7dc4 by PLN (Algolia)
Options

refactor(sockets): Bootstrap buttons

parent 9739e214
Showing with 61 additions and 59 deletions
client/src/Sockets.vue
<template> <template>
<div> <div>
<p v-if="isConnected">We're connected to the server!</p> <b-button-group class="mt-lg-3">
<p v-if="!isConnected">We're not connected yet...</p> <b-button @click="pingServer()" variant="warning" size="sm">Ping Server</b-button>
<b-button @click="logOn()" variant="success" size="lg">LogOn</b-button>
<b-button @click="logOff()" size="lg">LogOff</b-button>
</b-button-group>
<p v-if="isConnected">We're connected to the server!</p>
<p v-if="!isConnected">We're not connected yet...</p>
<div v-if="socketMessages.length >= 1"> <div v-if="socketMessages.length >= 1">
<p>Messages from server"</p> <p>Messages from server"</p>
<ul id="messages"> <ul id="messages">
<li v-for="message in socketMessages.slice(-20)" :key="message"> <li v-for="message in socketMessages.slice(-20)" :key="message">
{{ message }} {{ message }}
</li> </li>
</ul> </ul>
</div>
<button @click="pingServer()">Ping Server</button>
<button @click="logOn()">LogOn</button>
<button @click="logOff()">LogOff</button>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
isConnected: false, isConnected: false,
socketMessages: [] socketMessages: []
} };
}, },
sockets: { sockets: {
connect() { connect() {
// Fired when the socket connects. // Fired when the socket connects.
this.isConnected = true; this.isConnected = true;
console.log("login"); console.log("login");
}, },
disconnect() { disconnect() {
this.isConnected = false; this.isConnected = false;
console.log("logoff"); console.log("logoff");
this.socketMessages = []; this.socketMessages = [];
}, },
// Fired when the server sends something on the "messageChannel" channel. // Fired when the server sends something on the "messageChannel" channel.
messageChannel(data) { messageChannel(data) {
this.socketMessages.push(data); this.socketMessages.push(data);
console.log("Message received:", data, "!"); console.log("Message received:", data, "!");
} }
}, },
methods: { methods: {
pingServer() { pingServer() {
// Send the "pingServer" event to the server. // Send the "pingServer" event to the server.
if (this.isConnected) { if (this.isConnected) {
this.sendMessage("Ping!"); this.sendMessage("Ping!");
console.log("Ping sent!"); console.log("Ping sent!");
} }
}, },
sendMessage(message) { sendMessage(message) {
this.$socket.emit('pingServer', message); this.$socket.emit("pingServer", message);
console.log("Message sent:", message); console.log("Message sent:", message);
}, },
logOn() { logOn() {
this.$socket.onconnect(); this.$socket.onconnect();
}, },
logOff() { logOff() {
this.$socket.ondisconnect(); this.$socket.ondisconnect();
this.socketMessage = []; this.socketMessage = [];
}
}
} }
}
};
</script> </script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment