Wasp-lang•3d ago

What's the easiest way to add a live chat script?

I'm wondering what's the easiest way to provide a live chat via an external JS script across all of my app pages? Do I have to include it in App.tsx? 🙂

2 Replies

kapa.ai•3d ago

Hi @mb23. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, I can tell you that Wasp provides a fully integrated WebSocket experience by utilizing Socket.IO on the client and server. This can be used to create a live chat feature in your application. You can use the useSocket and useSocketListener hooks in your React components to handle WebSocket connections and events. Here is an example of how you can use these hooks to create a chat page:

import React, { useState } from 'react'  
import {  
 useSocket,  
 useSocketListener,  
} from 'wasp/client/webSocket'  
  
export const ChatPage = () => {  
 const [messageText, setMessageText] = useState('')  
 const [messages, setMessages] = useState([])  
 const { socket, isConnected } = useSocket()  
  
 useSocketListener('chatMessage', logMessage)  
  
 function logMessage(msg) {  
 setMessages((priorMessages) => [msg, ...priorMessages])  
 }  
  
 function handleSubmit(e) {  
 e.preventDefault()  
 socket.emit('chatMessage', messageText)  
 setMessageText('')  
 }  
  
 const messageList = messages.map((msg) => (  
 <li key={msg.id}>  
 <em>{msg.username}</em>: {msg.text}  
 </li>  
 ))  
 const connectionIcon = isConnected ? '🟢' : '🔴'  
  
 return (  
 <>  
 <h2>Chat {connectionIcon}</h2>  
 <div>  
 <form onSubmit={handleSubmit}>  
 <div>  
 <div>  
 <input  
 type="text"  
 value={messageText}  
 onChange={(e) => setMessageText(e.target.value)}  
 />  
 </div>  
 <div>  
 <button type="submit">Submit</button>  
 </div>  
 </div>  
 </form>  
 <ul>{messageList}</ul>  
 </div>  
 </>  
 )  
}

import React, { useState } from 'react'  
import {  
 useSocket,  
 useSocketListener,  
} from 'wasp/client/webSocket'  
  
export const ChatPage = () => {  
 const [messageText, setMessageText] = useState('')  
 const [messages, setMessages] = useState([])  
 const { socket, isConnected } = useSocket()  
  
 useSocketListener('chatMessage', logMessage)  
  
 function logMessage(msg) {  
 setMessages((priorMessages) => [msg, ...priorMessages])  
 }  
  
 function handleSubmit(e) {  
 e.preventDefault()  
 socket.emit('chatMessage', messageText)  
 setMessageText('')  
 }  
  
 const messageList = messages.map((msg) => (  
 <li key={msg.id}>  
 <em>{msg.username}</em>: {msg.text}  
 </li>  
 ))  
 const connectionIcon = isConnected ? '🟢' : '🔴'  
  
 return (  
 <>  
 <h2>Chat {connectionIcon}</h2>  
 <div>  
 <form onSubmit={handleSubmit}>  
 <div>  
 <div>  
 <input  
 type="text"  
 value={messageText}  
 onChange={(e) => setMessageText(e.target.value)}  
 />  
 </div>  
 <div>  
 <button type="submit">Submit</button>  
 </div>  
 </div>  
 </form>  
 <ul>{messageList}</ul>  
 </div>  
 </>  
 )  
}

For more information, you can refer to the Wasp documentation on WebSockets (https://wasp-lang.dev/docs/advanced/web-sockets). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @mb23, 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?

Filip•2d ago

Are you talking about a third party solution (like zendesk widgets and such)?

Gaming

Programming

What's the easiest way to add a live chat script?