Wasp•8mo ago

websocket definition?

I've been trying to follow along with https://wasp-lang.dev/blog/2023/08/09/build-real-time-voting-app-websockets-react-typescript and https://wasp-lang.dev/docs/advanced/web-sockets to get websockets working with the open-saas demo app template. When I attempt to use

import { WebSocketDefinition } from '@wasp/webSocket';

import { WebSocketDefinition } from '@wasp/webSocket';

in my app/src/server/ws-server.ts file, it's not able to find wasp/websocket. I searched and it doesn't appear to exist but I'm hoping I'm wrong. Are websockets setup to work on the open saas template?

Build a real-time voting app with WebSockets, React & TypeScript 🔌⚡...

TL;DR

Web Sockets | Wasp

Wasp provides a fully integrated WebSocket experience by utilizing Socket.IO on the client and server.

4 Replies

kapa.ai•8mo ago

Hi @JLegendz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Wasp provides a fully integrated WebSocket experience by utilizing Socket.IO on the client and server. It handles making sure your URLs are correctly set up, CORS is enabled, and provides useful useSocket and useSocketListener abstractions for use in React components. To get started with WebSockets in Wasp, you need to: 1. Define your WebSocket logic on the server. 2. Enable WebSockets in your Wasp file, and connect it with your server logic. 3. Use WebSockets on the client, in React, via useSocket and useSocketListener. 4. Optionally, type the WebSocket events and payloads for full-stack type safety. You can enable WebSockets in your Wasp file by adding webSocket to your app and providing the required fn. You can optionally change the auto-connect behavior. Here is an example:

app todoApp {  
 // ...  
  
 webSocket: {  
 fn: import { webSocketFn } from "@src/webSocket",  
 autoConnect: true, // optional, default: true  
 },  
}

app todoApp {  
 // ...  
  
 webSocket: {  
 fn: import { webSocketFn } from "@src/webSocket",  
 autoConnect: true, // optional, default: true  
 },  
}

The webSocket dict has the following fields: - fn: WebSocketFn required: The function that defines the WebSocket events and handlers. - autoConnect: bool: Whether to automatically connect to the WebSocket server. Default: true. Regarding your issue with import { WebSocketDefinition } from '@wasp/webSocket';, it seems like there might be a mistake in the tutorial you are following. The correct import should be import { WebSocketDefinition } from 'wasp/server/webSocket'. As for the open-saas demo app template, it's not clear from the provided sources if it has built-in support for WebSockets. You might need to manually set it up following the steps provided in the Wasp WebSockets documentation (https://wasp-lang.dev/docs/advanced/web-sockets). If you continue to encounter issues, I recommend reaching out to the Wasp community on Discord (https://discord.gg/rzdnErX) or creating an issue on Github (https://github.com/wasp-lang/wasp) for further assistance. Sources: - Wasp WebSockets Documentation (https://wasp-lang.dev/docs/advanced/web-sockets) - Github Issue (https://github.com/wasp-lang/wasp/issues/1289) - Discord Support Thread (https://discord.com/channels/686873244791210014/1215945587841831033) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @JLegendz, 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?

JLegendzOP•8mo ago

@kapa.ai I get Cannot find module '@wasp/webSocket' or its corresponding type declarations

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing typically occurs when the module you're trying to import doesn't exist or isn't correctly installed. In this case, it seems like there might be a mistake in the path you're using for the import. The correct import for WebSocketDefinition should be from 'wasp/server/webSocket', not '@wasp/webSocket'. Here's how you should import it:

import { WebSocketDefinition } from 'wasp/server/webSocket'

import { WebSocketDefinition } from 'wasp/server/webSocket'

If you're still encountering issues, make sure you have the latest version of Wasp installed. You can check your Wasp version by running wasp version in your terminal. If you need to update Wasp, you can do so by running wasp upgrade. If the problem persists, consider reaching out to the Wasp community on Discord (https://discord.gg/rzdnErX) or creating an issue on Github (https://github.com/wasp-lang/wasp) for further assistance. Sources: - Wasp WebSockets Documentation (https://wasp-lang.dev/docs/advanced/web-sockets) - Discord Support Thread (https://discord.com/channels/686873244791210014/1215945587841831033) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @JLegendz, 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?

martinsos•8mo ago

Yup the bot is right -> so that blog post is a bit old and is for older Wasp version, the new one changed the import path a bit, check out the docs here for more info: https://wasp-lang.dev/docs/advanced/web-sockets . The path that bot provided is correct!

Web Sockets | Wasp

Wasp provides a fully integrated WebSocket experience by utilizing Socket.IO on the client and server.

Gaming

Programming

websocket definition?

Did you find this page helpful?