simple interaction counter

components/interaction/TouchCounter.vue

@@ -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>

middleware/auth.js

@@ -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' })
   }

modules/ws-server.js

@@ -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) => {

pages/about.vue

@@ -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>

pages/index.vue

@@ -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

pages/index_old.vue

@@ -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>