Nuxt•9mo ago

Websocket "unknown" type in typescript app

I have this plugin, and I want to use the send functionallity on components. I also want to add others later on (subscribe to topic etc).

import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin(() => {
    const ws = new WebSocket("ws://localhost:3000/websocket");

    ws.onopen = () => console.log("Connected to WS");
    ws.onmessage = (message) => {
        const parsedData = JSON.parse(message.data);
        console.log("Received data:", parsedData);
    };

    ws.onerror = (error) => console.log(`Error: ${error}`);
    ws.onclose = () => console.log("Disconnected from WS");

    function send(data: string | object) {
        ws.send(typeof data === "string" ? data : JSON.stringify(data));
    }

    return {
        provide: {
            $ws: { send }
        }
    };
});

import { defineNuxtPlugin } from "#app";

export default defineNuxtPlugin(() => {
    const ws = new WebSocket("ws://localhost:3000/websocket");

    ws.onopen = () => console.log("Connected to WS");
    ws.onmessage = (message) => {
        const parsedData = JSON.parse(message.data);
        console.log("Received data:", parsedData);
    };

    ws.onerror = (error) => console.log(`Error: ${error}`);
    ws.onclose = () => console.log("Disconnected from WS");

    function send(data: string | object) {
        ws.send(typeof data === "string" ? data : JSON.stringify(data));
    }

    return {
        provide: {
            $ws: { send }
        }
    };
});

But when using it it says it is unknown type? Is the type not transferred using nuxtplugins? See image for example.

kapa.ai•3/27/25, 10:49 AM

Hi @Toffe. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•3/27/25, 10:49 AM

----------------------
You're experiencing a TypeScript issue with your WebSocket plugin in Nuxt. This is a known issue, particularly with certain IDEs.

The Problem

When you create a plugin that provides helpers (like your WebSocket functionality), TypeScript should automatically type these helpers. However, in your case, the object is being typed as

unknown

unknown

, which prevents TypeScript from recognizing the

send

send

method.

Solution: Type Your Plugin

To fix this issue, you need to properly type your plugin by augmenting the TypeScript declarations. Based on the knowledge sources, you should add type declarations for your WebSocket plugin:

This will properly type your helper so TypeScript recognizes it when you use or access it in your components.

Known IDE Issue

It's worth noting that there's a known bug specifically in JetBrains IDEs (PhpStorm, WebStorm) related to this issue. According to a Stack Overflow post, the same code works fine in VS Code but shows type errors in JetBrains products:

Stack Overflow Post

The bug is tracked here: https://youtrack.jetbrains.com/issue/WEB-59818/Vue-custom-global-properties-added-by-augmenting-vue-are-not-resolved

Alternative Approach

If you prefer a more modern approach, consider creating a composable instead of a plugin. This can provide better type safety and is the recommended approach in Nuxt 3:

kapa.ai•3/27/25, 10:49 AM

Then in your components:

This approach would give you proper TypeScript support without needing to augment type declarations.

For more information on typing plugins in Nuxt, check the Nuxt documentation on plugins.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•3/27/25, 10:49 AM

@260145305754927104 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

t.f.eOP•3/27/25, 11:01 AM

Is composables creating a new connection for each inclusion or maintaining a global connection for the whole application? I need it to be running in the background with some logic for updating data real time to make the website real time when people edit stuff e.t.c. @kapa.ai

kapa.ai•3/27/25, 11:01 AM

Let me check the knowledge base for you again. One moment!

kapa.ai•3/27/25, 11:02 AM

----------------------
Great question about composables and WebSocket connections in Nuxt!

By default, when you create a WebSocket connection in a composable, it will create a new connection each time the composable is called in different components. This is because composables create isolated instances with their own state.

According to the Stack Overflow post in the knowledge sources:

When you invoke useYourComposable() in ComponentOne.vue, and useYourComposable() in ComponentTwo.vue, two separate instances of the composable are created. Each instance has its own separate state. Changes to state in one instance won't affect the same state in the other instance.

Stack Overflow Post

For a real-time application where you need a single WebSocket connection shared across your entire application, you have several options:

Use a Nuxt Plugin Instead

Plugins in Nuxt run once at app initialization and can provide globally accessible functionality:

Then access it with in your components.

Create a Singleton Pattern in Your Composable

```javascript
// composables/useWebSocket.js
let ws = null;

kapa.ai•3/27/25, 11:02 AM

export function useWebSocket() {
const nuxtApp = useNuxtApp();

if (!ws) {
ws = new WebSocket("ws://localhost:3000/websocket");

ws.onopen = () => console.log("Connected to WS");
ws.onmessage = (message) => {
const parsedData = JSON.parse(message.data);
console.log("Received data:", parsedData);
// You could call a function here to update your state
};

// Clean up the connection when the app is destroyed
nuxtApp.hook('app:destroyed', () => {
if (ws && ws.readyState === WebSocket.OPEN) {
ws.close();
ws = null;
}
});
}

function send(data) {
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(typeof data === "string" ? data : JSON.stringify(data));
}
}

return { ws, send };
}

javascript
// server/websocket/index.ts
export default defineWebSocketHandler({
open(peer) {
console.log('Connection opened');
},
message(peer, message) {
// Handle messages
peer.send({ type: 'update', data: 'Some data' });
},
close(peer) {
console.log('Connection closed');
}
});
```

Then on the client side, you can connect to this WebSocket endpoint.

For more information on implementing WebSockets in Nuxt with Nitro, check out this YouTube tutorial which covers the implementation from scratch.

Remember that for a production application, you'll also want to handle reconnection logic, authentication, and error handling for your WebSocket connections.

Would you like more specific guidance on any of these approaches?
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•3/27/25, 11:02 AM

@260145305754927104 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

t.f.eOP•3/27/25, 11:03 AM

@kapa.ai

kapa.ai•3/27/25, 11:03 AM

Let me check the knowledge base for you again. One moment!

kapa.ai•3/27/25, 11:03 AM

Sorry @Toffe, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

t.f.eOP•3/27/25, 11:04 AM

Any humans who can help with this?