htmx and Elysia Websocket message not rendering
Currently im trying to learn htmx with Elysia by creating a chat app using the websocket from Elysia.
This is my html code:
<body>
<div>
<form hx-ext="ws" ws-connect="/chatroom" hx-target="#chat_room" ws-send>
<input name="chat_message" id="chat" />
<button class="button">Send</button>
</form>
</div>
<div id="chat_room"></div>
</body>
And this is my tsx code:
const app = new Elysia({
websocket: {
idleTimeout: 30
}
}).use(cors());
app.get("/", () => Bun.file("./app/index.html"))
.ws('/chatroom', {
open(ws) {
ws.subscribe("chat");
},
message(ws, message: any) {
let msg = message.chat_message;
//ws.send(message);
ws.send(<div class="message">${msg}</div>); //trying to send as a html
}
})
.listen(8080)
The problem is I'm not able to display the message content in the UI. Am I missing anything?
5 Replies
I have not worked with the htmx websockets extension before
maybe someone else has?
can't say I've tried that before, I've mainly only done tRPC stuff in Elysia. Have you tried checking if you actually get messages back in your websocket connection?
Yes I checked and, I'm able to receive the message. Please find the attached screenshot
Aight well unfortunatly I won't be able to go any deeper into this specific case since I've not done anything with the websocket ext of htmx yet. Maybe somebody else might hop in here with a solution for ya 😄
After reading their documentation for few times was able to fix this by sending the response as html div tag along with the message:
let htmlMsg="<div id="chat_room">${message.chat_message}</div>"