simple interaction counter

main
km0 2 years ago
parent 103907fe4b
commit 4bce71579f

@ -0,0 +1,49 @@
<template>
<div class="touch-counter" @click="touch()">
<p v-if="context.msg" class="context">
{{ context.msg }}
</p>
<p class="coutner">{{ counter }}</p>
</div>
</template>
<script>
import connectWebsocket from '~/composables/connectWebsocket'
export default {
props: {
context: {
type: Object,
default: () => {},
},
},
setup() {
const { send, data } = connectWebsocket()
return {
data,
send,
}
},
data() {
return {
counter: 0,
}
},
methods: {
touch() {
this.counter++
this.send(
JSON.stringify({
type: 'ui_counter',
id: this.$store.state.auth.id,
value: this.counter,
})
)
},
},
}
</script>
<style>
</style>

@ -1,5 +1,6 @@
export default function ({ redirect, store }) {
const isAuthenticated = store.state.auth.user
// eslint-disable-next-line no-unneeded-ternary
const isAuthenticated = store.state.auth.user ? true : false
if (!isAuthenticated) {
redirect({ name: 'auth' })
}

@ -9,6 +9,7 @@ const messageProcessor = {
hello_v4: (ws, msg) => registerV4(ws),
new_user: (ws, msg) => newUser(ws, msg),
default: (ws, msg) => unknownMsg(msg),
ui_counter: (ws, msg) => uiCounter(msg),
}
const registerV4 = (ws, msg) => {
@ -34,6 +35,15 @@ const unknownMsg = (msg) => {
console.log(msg)
}
// Interaction messsages
const uiCounter = (msg) => {
console.log(` Counter Interaction: +1 from ${connections.get(msg.id).user}`)
if (vvvv?.readyState === WebSocket.OPEN) {
vvvv.send(JSON.stringify(msg))
}
}
// Websocket Events
wss.on('connection', (ws) => {

@ -0,0 +1,21 @@
<template>
<div>
<h1>About</h1>
<nuxt-link to="/">Home</nuxt-link>
<p>
Nisi veniam velit dolor elit proident. Amet ex amet dolor excepteur
consequat aliquip veniam minim quis Lorem culpa voluptate
reprehenderit excepteur. Commodo fugiat fugiat amet consectetur
consequat do culpa mollit fugiat excepteur. Ad enim quis nulla minim
quis. Irure sit duis aliqua incididunt aliquip occaecat eiusmod
aliquip Lorem dolore veniam exercitation ipsum.
</p>
</div>
</template>
<script>
export default {}
</script>
<style>
</style>

@ -1,7 +1,10 @@
<template>
<div>
{{ user.user }} <br />
{{ user.id }}
User: {{ user.user }} <br />
<nuxt-link to="about">About</nuxt-link>
<InteractionTouchCounter
:context="{ msg: 'Test test test ss a test' }"
></InteractionTouchCounter>
</div>
</template>
@ -9,7 +12,6 @@
export default {
name: 'IndexPage',
middleware: 'auth',
computed: {
user() {
return this.$store.state.auth

@ -1,32 +0,0 @@
<template>
<div>
{{ id }}
</div>
</template>
<script>
import { nanoid } from 'nanoid'
import { ref } from '@nuxtjs/composition-api'
import { tryOnMounted, useLocalStorage } from '@vueuse/core'
import connectWebsocket from '~/composables/connectWebsocket'
export default {
name: 'IndexPage',
setup() {
const { data, send, open } = connectWebsocket()
const id = ref(null)
tryOnMounted(() => {
open()
id.value = useLocalStorage('ooc_user_id', nanoid())
})
return {
send,
data,
open,
id,
}
},
}
</script>
Loading…
Cancel
Save