Quei Posts - Answer Overflow

Quei

Explore posts from servers

•Created by Quei on 10/14/2024 in #❓・help

Reusable websocket component

Hi Community and @manniL / TheAlexLichter i found the super helpfull small guide on YT: https://www.youtube.com/watch?v=OfY7JcrqkPg&t=33s It works like a charm! Now I'm wondering how I can create a reusable component for sending messages. The idea is to have a central "channel" for updates across the web app. For example, I've written a mail client, and when this client receives a new email, it should send a message to the channel. Based on this message, a component refresh should be triggered. But I'm having trouble implementing this. The main idea is to have a function that I can import anywhere on the server side to send messages to this channel.

server\api\websocket.ts
export default defineWebSocketHandler({
    open(peer) {
        logger.warn('WebSocket opened:', peer)
    },
    close(peer) {
        logger.warn('WebSocket closed:', peer)
    },
    error(peer, error) {
        logger.error('WebSocket error:', error)
    },
    message(peer, message) {
        logger.warn('WebSocket message:', peer, message)
    }
})

server\api\websocket.ts
export default defineWebSocketHandler({
    open(peer) {
        logger.warn('WebSocket opened:', peer)
    },
    close(peer) {
        logger.warn('WebSocket closed:', peer)
    },
    error(peer, error) {
        logger.error('WebSocket error:', error)
    },
    message(peer, message) {
        logger.warn('WebSocket message:', peer, message)
    }
})

49 replies

NNuxt

•Created by Quei on 12/20/2022 in #❓・help

NuxtLink issue?

Hi All I have a strange issue in my project. I have started some days ago with the project. Well, in the beginning, i thought all works fine but after some clicking around it seems that the NuxtLinks does not really work reliable. i have attached a video which shows the behaviour better. it looks like i stress the page too much but this happens regularly. if changing the links slower, it happens too. if i should upload my code its not a problem. here are some extracts: packages/store/layouts/default.vue

<template>
  <v-app id="inspire">
    <v-app-bar class="px-3" color="white" flat density="compact">
      <v-avatar color="grey-darken-1" size="32"> <MainSetTheme /> </v-avatar>

      <v-spacer></v-spacer>

      <v-tabs centered color="grey-darken-2">
        <MainTopBar />
      </v-tabs>
      <v-spacer></v-spacer>

      <v-avatar color="grey-darken-1" size="32">
        <FormLogin
          :fromActionName="'Login'"
          :formIcon="'fa:fas fa-right-to-bracket'"
        />
      </v-avatar>
    </v-app-bar>
    <v-main class="bg-grey-lighten-3">
      <v-container>
        <v-row>
          <MainLeftMenu />
          <v-col cols="12" sm="10">
            <v-sheet min-height="70vh" rounded="lg" class="pa-3">
              <slot />
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import {useTheme} from 'vuetify'
</script>

<template>
  <v-app id="inspire">
    <v-app-bar class="px-3" color="white" flat density="compact">
      <v-avatar color="grey-darken-1" size="32"> <MainSetTheme /> </v-avatar>

      <v-spacer></v-spacer>

      <v-tabs centered color="grey-darken-2">
        <MainTopBar />
      </v-tabs>
      <v-spacer></v-spacer>

      <v-avatar color="grey-darken-1" size="32">
        <FormLogin
          :fromActionName="'Login'"
          :formIcon="'fa:fas fa-right-to-bracket'"
        />
      </v-avatar>
    </v-app-bar>
    <v-main class="bg-grey-lighten-3">
      <v-container>
        <v-row>
          <MainLeftMenu />
          <v-col cols="12" sm="10">
            <v-sheet min-height="70vh" rounded="lg" class="pa-3">
              <slot />
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import {useTheme} from 'vuetify'
</script>

packages/store/components/Main/TopBar.vue

<template>
  <div>
    <v-tab>
      <NuxtLink :to="'/'"> Shop </NuxtLink>
    </v-tab>
    <v-tab>
      <NuxtLink :to="'/article/list'"> Artikel </NuxtLink>
    </v-tab>
    <v-tab>
      <NuxtLink :to="'/sale/list'"> Verkauf </NuxtLink>
    </v-tab>
    <v-tab>
      <NuxtLink :to="'/user/list'"> Benutzer </NuxtLink>
    </v-tab>
  </div>
</template>

<script setup lang="ts"></script>

<template>
  <div>
    <v-tab>
      <NuxtLink :to="'/'"> Shop </NuxtLink>
    </v-tab>
    <v-tab>
      <NuxtLink :to="'/article/list'"> Artikel </NuxtLink>
    </v-tab>
    <v-tab>
      <NuxtLink :to="'/sale/list'"> Verkauf </NuxtLink>
    </v-tab>
    <v-tab>
      <NuxtLink :to="'/user/list'"> Benutzer </NuxtLink>
    </v-tab>
  </div>
</template>

<script setup lang="ts"></script>

packages/store/app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

1 replies

Gaming

Programming