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?
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?
