ไลบรารีไคลเอนต์
HTML แบบเรียลไทม์ด้วย WebSocket เพิ่มแท็ก script เดียวในหน้าเว็บใดก็ได้: ได้ไคลเอนต์ที่เชื่อมต่อแล้ว พร้อมตัวนับผู้ออนไลน์แบบสด ฟีด และ toast โดยไม่ต้อง build
ลงชื่อเข้าใช้เพื่อดูโค้ดตัวอย่างเหล่านี้พร้อมโฮสต์คลัสเตอร์ของคุณเอง ลงชื่อเข้าใช้
ใช้เอเจนต์เขียนโค้ด AI อยู่ใช่ไหม? คัดลอกพรอมต์สำหรับเอเจนต์ ↓
เพิ่มแท็ก script
<script src ="https://hibira.io/embed/v1.js" data-key ="YOUR_APP_KEY" data-host ="ws.hibira.io" async > </script > ใส่วิดเจ็ตสำเร็จรูป
<span data-hibira-online ="lobby" > 0</span > online
<ul data-hibira-feed ="news" data-event ="update" data-limit ="10" > </ul >
<div data-hibira-toast ="alerts" data-event ="alert" data-position ="bottom-right" > </div > ใช้ไคลเอนต์ในโค้ดของคุณเอง
(window .Hibira = window .Hibira || []).push ((client ) => {
client.subscribe ('orders' ).bind ('order-shipped' , (data ) => {
console .log ('Order shipped' , data);
});
});พรอมต์สำหรับเอเจนต์ วางข้อความนี้ใน Claude Code, Cursor, GitHub Copilot หรือเอเจนต์เขียนโค้ด AI อื่น แล้วเอเจนต์จะเชื่อม Hibira เข้ากับโปรเจกต์ HTML ของคุณด้วยการตั้งค่าด้านบน
Integrate Hibira realtime messaging into this HTML project. Hibira is a hosted WebSocket service that speaks the Pusher Channels protocol, so it works with the standard Pusher libraries (here: embed/v1.js, https://hibira.io/guides/html) pointed at Hibira instead of pusher.com.
Connection details:
- Host: ws.hibira.io
- Port: 443
- TLS: yes (https)
- App key: YOUR_APP_KEY
- No app secret: it belongs on the server, never in this app
What to do:
1. Look at the project first (framework version, package manager, config and env conventions, where similar integrations live) and follow what it already does.
2. Add the script tag once, in the shared layout or base template (just before </body>), not in every page or component.
3. If the site has a Content-Security-Policy, allow the script's origin in script-src and the WebSocket host (wss://) in connect-src.
4. For online counts in rooms bigger than a few hundred people, use a presence-large-* channel (it needs data-auth-endpoint); window.Hibira.largePresence(channel) gives the member sample and join/leave deltas.
5. Use the data-hibira-online, data-hibira-feed and data-hibira-toast widgets where they fit; style .hibira-feed-item with the site's own CSS. Event text is always inserted as plain text.
6. For custom behaviour, queue callbacks with (window.Hibira = window.Hibira || []).push((client) => ...) rather than polling for the script; the client is a standard pusher-js instance.
7. If the page uses private or presence channels, add data-auth-endpoint pointing at the backend route that signs subscriptions; that route uses the app secret and lives on the server only.
8. Events are published from the server with any Pusher-compatible server library (or the Debug console on the app page for a quick test).
9. Read the credentials and host from environment variables or the project's config, and add placeholder entries to .env.example (or its equivalent). Never commit real values.
10. Always pass the host, port and TLS setting above. The library defaults to pusher.com; where it requires a cluster, use "ap" (the host decides where it connects).
11. If YOUR_APP_KEY above is still a placeholder, keep it as an env placeholder and tell me where to fill it in rather than inventing a value.
12. When you are done, list the files you changed and tell me how to check it works, for example by publishing a test event and watching it arrive.
Reference setup from the Hibira HTML guide (adapt it to the project's structure):
Add the script tag:
```html
<!-- Before </body>, on every page that needs live updates -->
<script src="https://hibira.io/embed/v1.js" data-key="YOUR_APP_KEY" data-host="ws.hibira.io" async></script>
```
Drop in ready-made widgets:
```html
<!-- People on this page right now (turn on "Send subscriber counts" in the app settings) -->
<span data-hibira-online="lobby">0</span> online
<!-- The newest "update" events on the news channel, newest first -->
<ul data-hibira-feed="news" data-event="update" data-limit="10"></ul>
<!-- A toast for each "alert" event: { "title": "...", "body": "...", "url": "..." } -->
<div data-hibira-toast="alerts" data-event="alert" data-position="bottom-right"></div>
```
Use the client in your own code:
```js
// Runs as soon as the script has loaded, even if this code runs first.
(window.Hibira = window.Hibira || []).push((client) => {
client.subscribe('orders').bind('order-shipped', (data) => {
console.log('Order shipped', data);
});
});
```
แทนที่ YOUR_APP_KEY และค่าตัวแทนอื่นด้วยค่าจากแดชบอร์ดของคุณ หรือให้เอเจนต์ปล่อยไว้เป็นตัวแปรสภาพแวดล้อมให้คุณกรอกเอง
หรือเชื่อมต่อเซิร์ฟเวอร์ MCP ของ Hibira แล้วเอเจนต์ของคุณจะสร้างแอปและกรอกข้อมูลรับรองเองได้ เชื่อมต่อเอเจนต์เขียนโค้ด AI ของคุณ →
ใช้ app key และ secret จากแดชบอร์ดของคุณ ช่อง อีเวนต์ และ endpoint การยืนยันสิทธิ์ทำงานเหมือนกับที่ใช้กับ Pusher ทุกประการ ข้อมูลอ้างอิงไลบรารี ↗
