HotWire Protocol

1import { createApp, hotWire } from "canxjs";
2
3const app = createApp({ port: 3000 });
4
5// Create HotWire SSE endpoint
6app.get("/hotwire/connect", (req, res) => {
7  return hotWire.createStream(req, res);
8});
9
10// Subscribe to channels via POST
11app.post("/hotwire/subscribe", async (req, res) => {
12  const { clientId, channel } = await req.body();
13  hotWire.subscribe(clientId, channel);
14  return res.json({ subscribed: channel });
15});
16
17app.listen();

1import { hotWire } from "canxjs";
2
3// Broadcast JSON data to a channel
4hotWire.broadcast("notifications", {
5  type: "new_message",
6  message: "Hello World!",
7  timestamp: Date.now()
8});
9
10// Broadcast to all connected clients
11hotWire.broadcastAll({
12  type: "announcement",
13  text: "Server maintenance in 5 minutes"
14});
15
16// Send to specific client
17hotWire.sendTo(clientId, { type: "private", data: "secret" });

1import { hotWire } from "canxjs";
2
3// Send partial HTML update to channel
4hotWire.broadcastHTML(
5  "dashboard",           // channel
6  "<li>New item!</li>",  // HTML content
7  "#notifications-list", // target selector
8  "append"               // action: replace, append, prepend
9);
10
11// Replace content
12hotWire.broadcastHTML(
13  "users",
14  "<span class='status online'>Online</span>",
15  "#user-status-123",
16  "replace"
17);

1// Client-side JavaScript
2const eventSource = new EventSource("/hotwire/connect");
3
4eventSource.onopen = () => {
5  console.log("Connected to HotWire");
6};
7
8eventSource.onmessage = (event) => {
9  const data = JSON.parse(event.data);
10  
11  // Handle HTML updates
12  if (data.type === "html") {
13    const target = document.querySelector(data.target);
14    if (target) {
15      switch (data.action) {
16        case "replace": target.innerHTML = data.content; break;
17        case "append": target.innerHTML += data.content; break;
18        case "prepend": target.innerHTML = data.content + target.innerHTML; break;
19      }
20    }
21  }
22  
23  // Handle other events
24  console.log("Received:", data);
25};
26
27eventSource.onerror = () => {
28  console.log("Connection lost, reconnecting...");
29};

1// Real-time notifications example
2app.post("/posts", authMiddleware, async (req, res) => {
3  const post = await Post.create(await req.body());
4  
5  // Notify all subscribers
6  hotWire.broadcastHTML(
7    "feed",
8    `<article class="post">
9      <h3>${post.title}</h3>
10      <p>${post.excerpt}</p>
11    </article>`,
12    "#feed-container",
13    "prepend"
14  );
15  
16  // Also send JSON event
17  hotWire.broadcast("notifications", {
18    type: "new_post",
19    postId: post.id,
20    title: post.title
21  });
22  
23  return res.json(post);
24});