Jawa-the-Hutt
Jawa-the-Hutt
Explore posts from servers
NNuxtCCapgo
PostsComments
NNuxt
Created by Sybrn on 1/18/2025 in #❓・help
Nuxt Layer auto import types automate
@Sybrn did you manage to figure this out? running up against it in my project and was hoping you'd come up with something that works
7 replies
NNuxt
Created by Jawa-the-Hutt on 2/6/2025 in #❓・help
Websocket topic publish doesn't work until you refresh the page
thanks for the info and thanks for taking time to look at this. FWIW, I tagged you in the original message not to get your specific help, but to call out the fact you originated the example at stackblitz. So again...thanks for looking at this. ultimately I'm not doing a chat room. Was just using the chat example that's in all the documentation. I guess the .publish in the chat example would be akin to DM'ing another user directly via some sort of shared topic that included each peer's id. Where I'm going with the websockets is I need to be able to broadcast to a group of users who have subscribed to certain topics or even be able to broadcast to a specific peer that is subscribed to a topic that is based on the peer.id. Unless I've misunderstood some things, .send is not going to be able to do that.
16 replies
NNuxt
Created by Jawa-the-Hutt on 2/6/2025 in #❓・help
Websocket topic publish doesn't work until you refresh the page
have figured out to make it work without the page refresh, but don't like it. really think this is bug in the underlying websocket implementation, but that's a complete guess on my part. so...server side, something like above, but I go ahead and clearInterval on the close. 
import type { Peer } from 'crossws';

let interval;
export default defineWebSocketHandler({
  open(peer: Peer) {
    peer.send(JSON.stringify({ type: 'welcome', message: `Welcome ${peer.toString()}!` }));
    peer.publish('chat', JSON.stringify({ user: 'server', message: `Welcome ${peer.id} to the chat!` }));
    peer.subscribe('chat');

    interval = setInterval(async () => {
      console.log('Sending message to chat');
      peer.publish('chat', 'here is a message from the server');
    }, 2000);
  },
  message(peer: Peer, message) {
  },
  close(peer: Peer) {
    clearInterval(interval);
  }
});
import type { Peer } from 'crossws';

let interval;
export default defineWebSocketHandler({
  open(peer: Peer) {
    peer.send(JSON.stringify({ type: 'welcome', message: `Welcome ${peer.toString()}!` }));
    peer.publish('chat', JSON.stringify({ user: 'server', message: `Welcome ${peer.id} to the chat!` }));
    peer.subscribe('chat');

    interval = setInterval(async () => {
      console.log('Sending message to chat');
      peer.publish('chat', 'here is a message from the server');
    }, 2000);
  },
  message(peer: Peer, message) {
  },
  close(peer: Peer) {
    clearInterval(interval);
  }
});
client side, you open the connection, then close it and then open it again. so something like this: 
import { useWebSocket } from '@vueuse/core';
let { send, data, status, close } = useWebSocket('ws://localhost:3000/_ws');
close();
({ send, data, status, close } = useWebSocket('ws://localhost:3000/_ws'));

watch(data, (newValue) => {
  console.log('data watcher - ', newValue);
});
import { useWebSocket } from '@vueuse/core';
let { send, data, status, close } = useWebSocket('ws://localhost:3000/_ws');
close();
({ send, data, status, close } = useWebSocket('ws://localhost:3000/_ws'));

watch(data, (newValue) => {
  console.log('data watcher - ', newValue);
});
16 replies
NNuxt
Created by Jawa-the-Hutt on 2/6/2025 in #❓・help
Websocket topic publish doesn't work until you refresh the page
Ultimately, I'm going a slightly different direction instead of having a watcher inside the open, I'm sending all the peers to the unstorage memory driver so that I can access the peers from anywhere else I need server side. this inside the open 
let peers = await globalPeers.getItem<Map<string, Peer>>('peers');
    if (!peers) peers = new Map<string, Peer>();
    peers.set(peer.id, peer);
    await globalPeers.setItemRaw<Map<string, Peer>>('peers', peers);
let peers = await globalPeers.getItem<Map<string, Peer>>('peers');
    if (!peers) peers = new Map<string, Peer>();
    peers.set(peer.id, peer);
    await globalPeers.setItemRaw<Map<string, Peer>>('peers', peers);
then something like this function when I want to send something out 
const fireMessageToClient = async (value: SeverSentMessage) => {
  const peers = await globalPeers.getItem<Map<string, Peer>>('peers');
  if (!peers) return;
  for (const peer of peers.values()) {
    peer.publish(value.channel, JSON.stringify(value.data));
  }
};
const fireMessageToClient = async (value: SeverSentMessage) => {
  const peers = await globalPeers.getItem<Map<string, Peer>>('peers');
  if (!peers) return;
  for (const peer of peers.values()) {
    peer.publish(value.channel, JSON.stringify(value.data));
  }
};
16 replies
NNuxt
Created by Jawa-the-Hutt on 2/6/2025 in #❓・help
Websocket topic publish doesn't work until you refresh the page
and I agree...using peer.send does work, but limits a lot of the usable scenarios for the built in websockets from nitro
16 replies
NNuxt
Created by Jawa-the-Hutt on 2/6/2025 in #❓・help
Websocket topic publish doesn't work until you refresh the page
yeah...just something as simple as this with no watcher involved replicates the problem: 
import type { Peer } from 'crossws';

let interval;
export default defineWebSocketHandler({
  open(peer: Peer) {
    peer.send(JSON.stringify({ type: 'welcome', message: `Welcome ${peer.toString()}!` }));
    peer.publish('chat', JSON.stringify({ user: 'server', message: `Welcome ${peer.id} to the chat!` }));
    peer.subscribe('chat');

    interval = setInterval(async () => {
      console.log('Sending message to chat');
      peer.publish('chat', 'here is a message from the server');
    }, 2000);
  },
  message(peer: Peer, message) {
  },
  close(peer: Peer) {
    // clearInterval(interval);
  }
});
import type { Peer } from 'crossws';

let interval;
export default defineWebSocketHandler({
  open(peer: Peer) {
    peer.send(JSON.stringify({ type: 'welcome', message: `Welcome ${peer.toString()}!` }));
    peer.publish('chat', JSON.stringify({ user: 'server', message: `Welcome ${peer.id} to the chat!` }));
    peer.subscribe('chat');

    interval = setInterval(async () => {
      console.log('Sending message to chat');
      peer.publish('chat', 'here is a message from the server');
    }, 2000);
  },
  message(peer: Peer, message) {
  },
  close(peer: Peer) {
    // clearInterval(interval);
  }
});
16 replies