W
Wasp•4w ago
ComputO

Reply to chat socket on insert to DB table or an API call from external service.

My use case is that using the socket given by wasp I have set up a chat bot. Now to respond back the reply message is generated in aother microservice which updates the shared table in postgres. It can also do a API call to any action we write in Wasp. My challenge is how to trigger the socket to emit event and point to correct client as everything is async. has anyone done this before. Please point me to correct examples if possible .
11 Replies
kapa.ai
kapa.ai•4w ago
Hi @ComputO. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your question about triggering a socket event from an external service or database update in Wasp, I can provide some guidance based on the available knowledge sources. However, it's important to note that the current Wasp documentation doesn't provide a direct, out-of-the-box solution for your specific use case. That said, I can suggest a workaround that might help you achieve what you're looking for. The main challenge here is that Wasp doesn't currently provide an easy way to access the WebSocket server instance (io) outside of the webSocketFn initialization function. However, there is a workaround that has been suggested by the Wasp team: 1. In the file where you have your WebSocket initialization function (webSocketFn), create a global variable that you export from that file. For example: 
let ioInstance = undefined;

export const webSocketFn = (io, context) => {
  ioInstance = io;
  // ... rest of your WebSocket initialization code
}

export { ioInstance };
let ioInstance = undefined;

export const webSocketFn = (io, context) => {
  ioInstance = io;
  // ... rest of your WebSocket initialization code
}

export { ioInstance };
2. Then, in other parts of your server-side code (like in your actions or API endpoints), you can import this ioInstance and use it to emit events: 
import { ioInstance } from './path/to/your/websocket/file';

// In your action or API endpoint
export const someAction = async (args, context) => {
  // ... your action logic
  
  // Emit a socket event
  if (ioInstance) {
    ioInstance.emit('someEvent', { /* your data */ });
  }
}
import { ioInstance } from './path/to/your/websocket/file';

// In your action or API endpoint
export const someAction = async (args, context) => {
  // ... your action logic
  
  // Emit a socket event
  if (ioInstance) {
    ioInstance.emit('someEvent', { /* your data */ });
  }
}
This workaround has been confirmed to work by Wasp users, as mentioned in the GitHub issue discussion. To address the challenge of pointing to the correct client, you'll need to implement a way to associate clients with specific identifiers (like user IDs or session IDs). You can do this when the client connects to the WebSocket, and then use these identifiers to emit events to specific clients or rooms. For example: 
export const webSocketFn = (io, context) => {
  ioInstance = io;
  
  io.on('connection', (socket) => {
    const userId = socket.handshake.query.userId; // Assuming you pass userId when connecting
    socket.join(userId); // Join a room with the user's ID
    
    // ... rest of your connection logic
  });
}

// In your action or API endpoint
export const someAction = async (args, context) => {
  // ... your action logic
  
  if (ioInstance) {
    ioInstance.to(userId).emit('newMessage', { /* message data */ });
  }
}
export const webSocketFn = (io, context) => {
  ioInstance = io;
  
  io.on('connection', (socket) => {
    const userId = socket.handshake.query.userId; // Assuming you pass userId when connecting
    socket.join(userId); // Join a room with the user's ID
    
    // ... rest of your connection logic
  });
}

// In your action or API endpoint
export const someAction = async (args, context) => {
  // ... your action logic
  
  if (ioInstance) {
    ioInstance.to(userId).emit('newMessage', { /* message data */ });
  }
}
It's worth noting that the Wasp team is aware of this limitation and is considering adding better support for accessing the WebSocket server instance throughout the application, as mentioned in the GitHub issue. For more detailed information on working with WebSockets in Wasp, you can refer to the Wasp WebSockets documentation. Remember that this solution is a workaround, and future versions of Wasp may provide more integrated ways to handle this use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ComputO, 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?
miho
miho•4w ago
You could maintain a Map of userId to socket object so you could invoke the emit on the correct socket client 🙂 let me know if you need more details
ComputO
ComputOOP•4w ago
@kapa.ai can we send a unique conversationId when initiating a connectionusing the socket from the client .. can you show me a example of that
kapa.ai
kapa.ai•4w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! You can indeed send a unique conversationId when initiating a WebSocket connection from the client in Wasp. Here's an example of how you can achieve this: On the client side, when initiating the connection, you can pass the conversationId as a query parameter. Here's how you can do it using the useSocket hook provided by Wasp: 
import { useSocket } from 'wasp/client/webSocket'

const MyComponent = () => {
  const conversationId = 'unique-conversation-id-123' // Generate or obtain this ID
  const { socket, isConnected } = useSocket({
    queryParams: { conversationId }
  })

  // Rest of your component logic
}
import { useSocket } from 'wasp/client/webSocket'

const MyComponent = () => {
  const conversationId = 'unique-conversation-id-123' // Generate or obtain this ID
  const { socket, isConnected } = useSocket({
    queryParams: { conversationId }
  })

  // Rest of your component logic
}
On the server side, in your webSocketFn, you can access this conversationId from the socket's handshake query. Here's an example: 
export const webSocketFn: WebSocketFn = (io, context) => {
  io.on('connection', (socket) => {
    const conversationId = socket.handshake.query.conversationId as string
    console.log('New connection with conversationId:', conversationId)

    // You can use this conversationId to join a room
    socket.join(conversationId)

    // Rest of your connection logic
    socket.on('chatMessage', async (msg) => {
      console.log('Received message for conversation:', conversationId, msg)
      io.to(conversationId).emit('chatMessage', { 
        id: uuidv4(), 
        conversationId, 
        text: msg 
      })
    })
  })
}
export const webSocketFn: WebSocketFn = (io, context) => {
  io.on('connection', (socket) => {
    const conversationId = socket.handshake.query.conversationId as string
    console.log('New connection with conversationId:', conversationId)

    // You can use this conversationId to join a room
    socket.join(conversationId)

    // Rest of your connection logic
    socket.on('chatMessage', async (msg) => {
      console.log('Received message for conversation:', conversationId, msg)
      io.to(conversationId).emit('chatMessage', { 
        id: uuidv4(), 
        conversationId, 
        text: msg 
      })
    })
  })
}
This approach allows you to: 1. Send the conversationId from the client when initiating the connection. 2. Access the conversationId on the server for each connected socket. 3. Use the conversationId to create rooms or channels for specific conversations. By using rooms (with socket.join(conversationId) and io.to(conversationId).emit()), you can ensure that messages are only sent to clients participating in the same conversation. Remember to adjust the types and interfaces accordingly if you're using TypeScript, as shown in the WebSockets documentation. This example demonstrates how to pass and use a conversationId, but you can extend this concept to include any other necessary identifiers or data when establishing the WebSocket connection. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ComputO, 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?
ComputO
ComputOOP•4w ago
@kapa.ai that does not work the useSocket() hook does not accept any arguments
MEE6
MEE6•4w ago
Wohooo @ComputO, you just became a Waspeteer level 2!
kapa.ai
kapa.ai•4w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous response. You are correct, and thank you for pointing that out. The useSocket() hook in Wasp indeed does not accept any arguments directly. I made a mistake in my previous answer. Let me provide you with the correct information based on the Wasp documentation: According to the Wasp WebSockets documentation, the useSocket() hook doesn't take any parameters. It simply returns a socket object and an isConnected boolean. To pass a unique conversationId when initiating a connection, we need to take a different approach. Here's a correct way to do it: 1. First, in your Wasp file, you can set up the WebSocket configuration: 
app todoApp {
  // ...
  webSocket: {
    fn: import { webSocketFn } from "@src/webSocket",
    autoConnect: false, // Set this to false to control the connection manually
  },
}
app todoApp {
  // ...
  webSocket: {
    fn: import { webSocketFn } from "@src/webSocket",
    autoConnect: false, // Set this to false to control the connection manually
  },
}
2. Then, in your React component, you can use the useSocket() hook and manually connect with the conversationId: 
import { useSocket } from 'wasp/client/webSocket'
import { useEffect } from 'react'

const MyComponent = () => {
  const { socket, isConnected } = useSocket()
  const conversationId = 'unique-conversation-id-123' // Generate or obtain this ID

  useEffect(() => {
    if (socket && !isConnected) {
      socket.auth = { conversationId }
      socket.connect()
    }
  }, [socket, isConnected])

  // Rest of your component logic
}
import { useSocket } from 'wasp/client/webSocket'
import { useEffect } from 'react'

const MyComponent = () => {
  const { socket, isConnected } = useSocket()
  const conversationId = 'unique-conversation-id-123' // Generate or obtain this ID

  useEffect(() => {
    if (socket && !isConnected) {
      socket.auth = { conversationId }
      socket.connect()
    }
  }, [socket, isConnected])

  // Rest of your component logic
}
3. On the server side, in your webSocketFn, you can access the conversationId from the socket's auth object: 
export const webSocketFn: WebSocketFn = (io, context) => {
  io.on('connection', (socket) => {
    const conversationId = socket.auth.conversationId
    console.log('New connection with conversationId:', conversationId)
// You can use this conversationId to join a room
    socket.join(conversationId)

    // Rest of your connection logic
  })
}
export const webSocketFn: WebSocketFn = (io, context) => {
  io.on('connection', (socket) => {
    const conversationId = socket.auth.conversationId
    console.log('New connection with conversationId:', conversationId)
// You can use this conversationId to join a room
    socket.join(conversationId)

    // Rest of your connection logic
  })
}
This approach allows you to pass the conversationId when initiating the connection while correctly using the useSocket() hook as provided by Wasp. I apologize again for the earlier misinformation, and thank you for bringing this to my attention. If you have any more questions or need further clarification, please don't hesitate to ask. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ComputO, 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?
ComputO
ComputOOP•4w ago
@kapa.ai how to add conversationId to the SocketData that extends WaspSocketData
kapa.ai
kapa.ai•4w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- To add a conversationId to the SocketData that extends WaspSocketData, you can modify your WebSocket type definitions in your Wasp project. Here's how you can do it: 1. First, locate your WebSocket definition file. This is typically where you define your WebSocketFn and other related types. 2. In this file, you'll need to extend the SocketData interface to include the conversationId. Here's an example of how you can do this: 
import { type WebSocketDefinition, type WaspSocketData } from 'wasp/server/webSocket'

// ... other type definitions ...

// Extend the SocketData interface to include conversationId
interface SocketData extends WaspSocketData {
  conversationId?: string;
}

type WebSocketFn = WebSocketDefinition<
  ClientToServerEvents,
  ServerToClientEvents,
  InterServerEvents,
  SocketData  // Use the extended SocketData here
>
import { type WebSocketDefinition, type WaspSocketData } from 'wasp/server/webSocket'

// ... other type definitions ...

// Extend the SocketData interface to include conversationId
interface SocketData extends WaspSocketData {
  conversationId?: string;
}

type WebSocketFn = WebSocketDefinition<
  ClientToServerEvents,
  ServerToClientEvents,
  InterServerEvents,
  SocketData  // Use the extended SocketData here
>
By extending the WaspSocketData interface and adding the conversationId property, you're telling TypeScript that your socket data can include this additional piece of information. 3. Now, in your webSocketFn, you can access the conversationId from the socket.data object: 
export const webSocketFn: WebSocketFn = (io, context) => {
  io.on('connection', (socket) => {
    const conversationId = socket.data.conversationId
    console.log('New connection with conversationId:', conversationId)

    // Rest of your connection logic
  })
}
export const webSocketFn: WebSocketFn = (io, context) => {
  io.on('connection', (socket) => {
    const conversationId = socket.data.conversationId
    console.log('New connection with conversationId:', conversationId)

    // Rest of your connection logic
  })
}
4. On the client side, when initiating the connection, you can pass the conversationId in the auth object: 
import { useSocket } from 'wasp/client/webSocket'
import { useEffect } from 'react'

const MyComponent = () => {
  const { socket, isConnected } = useSocket()
  const conversationId = 'unique-conversation-id-123' // Generate or obtain this ID
useEffect(() => {
    if (socket && !isConnected) {
      socket.auth = { conversationId }
      socket.connect()
    }
  }, [socket, isConnected])

  // Rest of your component logic
}
import { useSocket } from 'wasp/client/webSocket'
import { useEffect } from 'react'

const MyComponent = () => {
  const { socket, isConnected } = useSocket()
  const conversationId = 'unique-conversation-id-123' // Generate or obtain this ID
useEffect(() => {
    if (socket && !isConnected) {
      socket.auth = { conversationId }
      socket.connect()
    }
  }, [socket, isConnected])

  // Rest of your component logic
}
By following these steps, you've added the conversationId to the SocketData that extends WaspSocketData, making it available in your WebSocket server logic. Remember that this approach assumes you're using TypeScript. If you're using JavaScript, you can skip the type definitions, but the runtime behavior will be the same. For more details on working with WebSockets in Wasp, you can refer to the Wasp WebSockets documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ComputO, 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?
ComputO
ComputOOP•4w ago
@kapa.ai is ther any other way on the client side to inject the conversationId into SocketData
kapa.ai
kapa.ai•4w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the available knowledge sources and our previous conversation, there isn't a direct, alternative way to inject the conversationId into SocketData on the client side in Wasp. The method we discussed earlier, using the socket.auth object, is currently the recommended approach. However, I can suggest a slight variation that might provide more flexibility: 1. Instead of setting socket.auth directly, you can use the io.connect() method with options: 
import { useSocket } from 'wasp/client/webSocket'
import { useEffect } from 'react'

const MyComponent = () => {
  const { socket, isConnected } = useSocket()
  const conversationId = 'unique-conversation-id-123' // Generate or obtain this ID

  useEffect(() => {
    if (socket && !isConnected) {
      socket.io.opts.query = { conversationId }
      socket.connect()
    }
  }, [socket, isConnected])

  // Rest of your component logic
}
import { useSocket } from 'wasp/client/webSocket'
import { useEffect } from 'react'

const MyComponent = () => {
  const { socket, isConnected } = useSocket()
  const conversationId = 'unique-conversation-id-123' // Generate or obtain this ID

  useEffect(() => {
    if (socket && !isConnected) {
      socket.io.opts.query = { conversationId }
      socket.connect()
    }
  }, [socket, isConnected])

  // Rest of your component logic
}
2. On the server side, you would then access the conversationId from the handshake query: 
export const webSocketFn: WebSocketFn = (io, context) => {
  io.on('connection', (socket) => {
    const conversationId = socket.handshake.query.conversationId as string
    console.log('New connection with conversationId:', conversationId)

    // You can now assign this to the socket.data if needed
    socket.data.conversationId = conversationId

    // Rest of your connection logic
  })
}
export const webSocketFn: WebSocketFn = (io, context) => {
  io.on('connection', (socket) => {
    const conversationId = socket.handshake.query.conversationId as string
    console.log('New connection with conversationId:', conversationId)

    // You can now assign this to the socket.data if needed
    socket.data.conversationId = conversationId

    // Rest of your connection logic
  })
}
This approach still achieves the goal of injecting the conversationId into the SocketData, but it uses the query parameters instead of the auth object. It's important to note that Wasp's WebSocket implementation is built on top of Socket.IO, and the options for injecting data are somewhat limited by the Wasp abstraction. The Wasp team is aware of these limitations and may provide more flexible options in future versions, as mentioned in the GitHub issue discussion. If you need more advanced customization options, you might need to consider implementing a custom WebSocket solution outside of Wasp's built-in WebSocket feature. However, this would require more complex setup and might not integrate as seamlessly with the rest of your Wasp application. For the most up-to-date and detailed information on working with WebSockets in Wasp, always refer to the official Wasp WebSockets documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ComputO, 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?

Did you find this page helpful?